Dreamweaver CC 2017 esencial

Estilos CSS y textos en Dreamweaver CC 2017

¡Prueba gratis durante 10 días

nuestros 1220 cursos !

Prueba gratis Mostrar modalidades de suscripción
En este vídeo haremos un repaso sobre muchas de las propiedades CSS aplicables sobre los textos que servirán para cambiar parámetros como el color o el tamaño, todas ellas modificadas de manera visual desde el panel diseñador CSS de Dreamweaver.

Transcripción

(hombre) En aspecto de los textos, como en el resto de elementos que hay en una página web, debería venir controlado mediante los estilos CSS. Vamos a ver un poco cómo trabajar con estos estilos CSS relacionados con los textos. Por ejemplo, para controlar el tamaño que tiene el texto, supongamos que sobre toda la página voy a tener la opción de seleccionar la propiedad "Font Size". Para ello me voy al selector correspondiente, me voy al texto correspondiente, y aquí selecciono dentro de todas las opciones "Font Size". Tenemos diferentes formas de trabajar con diferentes formatos de texto. Puedo hacerlo con píxeles, con puntos, puedo hacerlo sobre tanto % de la pantalla, o incluso puedo trabajar con valores estándar. En mi caso, me gusta utilizar el EM, que son valores de referencia, y voy a hacer que sobre el valor básico, en realidad el tamaño del cuerpo en esta página, sea de 0.9 %, lo he escrito con "0." (cero punto) y debería ser de "0," (cero coma). Eso hace que sea un poco más pequeño pero queda un poco más elegante. Igual que eso, puedo también cambiar el color del texto, y puedo hacerlo globalmente. Puedo venirme a color y en vez de poner el texto por defecto, que es ese texto negro, puedo poner un texto gris. Incluso, generalmente suele ser mejor utilizar códigos hexadecimales, porque son más cortos y fáciles de entender. Pues, selecciono sobre el botón "Hex", y aquí me parece el código hexadecimal, y ahora sobre él... puedo marcar, por ejemplo, que sea 666666. Aquí lo tenemos. Supongamos ahora que tenemos todas estas opciones globales marcadas, yo quiero trabajar sobre elementos concretos, siempre puedo seleccionar la etiqueta que me interesa, por ejemplo, esta etiqueta H2 y sobre esta etiqueta añadir un selector. En vez de poner todo el selector que ha puesto, puedes añadir H1, H2, H3, H4, H5... Para todas las haches. ¿Qué consigo con ello? Pues consigo que para todas las etiquetas H ocurra algo. Por ejemplo, que efectivamente todo el texto sea negro, y aquí vemos como este texto ya aparece negro, y es más, puedo aplicar que sea negrita o no. En vez de hacerlo con las etiquetas "Stroke", en los casos de estos encabezamientos o en muchos otros casos, puede interesar no añadir ese tipo de etiquetas, y para eso se utiliza "Font weight". Pues selecciono entre las distintas opciones, Normal, Bold, Bolder o Lighter, o también puedo elegir sobre grosores, por ejemplo, me gustaría que fueran sobre 800, bastante gruesas. Igual que estoy trabajando sobre estas propiedades, hay otras propiedades interesantes, por ejemplo, en los enlaces a mi no me interesa que aparezca ninguno de ellos con la línea debajo, puedo añadir un nuevo selector, es más, en realidad no necesito ni seleccionar el texto que quiero modificar, puedo pulsar sobre Más, escribir el selector que me interesa y ahora hacer cambios sobre él. ¿Y qué cambios quiero hacer sobre esa etiqueta "A"? Voy a irme de nuevo al apartado de texto y dentro de él voy a buscar el "Text decoration", aquí lo tengo. En vez de que sea "Underlined", es decir, que salga una línea debajo, voy a poner Ninguno y he conseguido que no aparezca con esa línea. Pero, es más, también me interesa que salga, por ejemplo, de azul oscuro. No es problema. Me vuelvo de nuevo un poco más arriba, selecciono Color y de hecho, con el cuenta gotas, selecciono el mismo tono de color, voy a seleccionar con el cuenta gotas ese color del logotipo. Pulso en "Intro" y ahora todas estas etiquetas A tienen que aparecer con ese tono de color. Incluso también me podría interesar que fuese un poco más grandes, no es problema. Cambiamos de nuevo en el "Font Size", basado sobre el EM y voy a pedirle que sean 1,2. Hemos visto como ha cambiado el aspecto de esos enlaces. Igual que estoy trabajando sobre esas etiquetas y sobre el texto, en estos casos, puedo hacer unas modificaciones, por ejemplo, me puedo ir a la parte de abajo, aquí tengo todo ese enlace contacto. Está recibiendo todos los estilos propios de los enlaces, pero este enlace es especial, este enlace yo quiero que salga blanco y que salga centrado en la pantalla. Nada más fácil. Selecciono de nuevo el selector, en este caso en realidad me pone UL, LI, A, pero hay otras formas de saber exactamente como añadir clases a un selector en concreto. Me puedo mover a aquí abajo y estoy viendo que realmente viene del "footer", que es el enlace que viene del "footer", así que puedo modificar todo esto que me ha añadido, y puedo poner simplemente "footer" y espacio A, con él ya seleccionado me puedo ir al panel de propiedades, y dentro del panel de propiedades decirle que salga con color blanco, y ya lo tengo de color blanco, que el tamaño de letras sea más pequeñito, entonces, puedo hacer doble clic y escribirlo directamente 0,8 EM y además me interesa que salga centrado. Tenemos las opciones más abajo de "Text alignment", y sirve para hacer que parezca centrado. ¿Qué ocurre? Que este texto en concreto, está centrado pero dentro de su pequeña caja, en realidad, a veces interesa más que editar las características del texto en su propia etiqueta, modificar las características de su contenedor, por ejemplo, de este "footer", puedo seleccionar la etiqueta "footer", puedo añadir un nuevo selector para ella, y sobre ese selector pedir que se centre ese texto. Entonces, ahora sí que aparece ese contacto y aparece con el texto centrado. Si sigo trabajando sobre el texto que tenía aquí marcado, hay que también tener en cuenta que estos textos no solamente tienen las características más visibles, más comprensibles, también por ejemplo, tienen el alto de la línea sobre la que va a trabajar, eso va a servir para que genere un poco de espacio entre los elementos que están colindantes, encima y debajo, por ejemplo si aquí le pongo que tenga 1,4 EM lo que ocurre es que se va a comportar con un poco más de espacio dentro de esa línea. Y lo normal, para que aparezca dentro de su contenedor totalmente centrado no solamente poner ese 1,4 EM sobre la línea sino también hacer que su propio contenedor tenga el mismo alto. De hecho, bueno, voy a cambiarlo un poco, voy a hacerlo un poco más grande y además también le voy a poner un poco de "Padding" superior. Porque a cualquier elemento de texto le podemos aplicar cualquiera de las otras propiedades como anchos, altos, bordes a su alrededor, etcétera. Entonces en mi caso, a parte de ponerle ese alto de línea, pues luego puedes pedirle que tenga un "padding" en concreto en la parte superior que sea, por ejemplo, de 10 píxeles. Para que se apliquen los "paddings", para que se apliquen los bordes y demás correctamente, de todas formas, es necesario que estos textos sean comprendidos como bloques, y un texto en sí, no es un bloque, una etiqueta de texto, pero sin embargo, sí lo es si yo lo obligo a serlo. Y para ello, dentro del apartado de diseño, irme a "Display" y seleccionar que sea "Inline-Block", y entonces sí que se va a comportar como un texto que va a ir seguido de los otros textos pero que además va a aplicar todas las características de cajas. Como podemos ver, podemos hacer modificaciones sobre todos los estilos CSS de una manera muy fácil y muy visual, dentro de Dreamweaver.

Dreamweaver CC 2017 esencial

Crea sitios web gracias al software de Adobe, Dreamweaver CC 2017. Con este repaso esencial a sus fundamentos podrás crear páginas responsive y mostrar tus contenidos a la última.

6:11 horas (78 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.