Veamos como definir y aplicar estilos a los textos e imágenes. En la misma hoja de Estilos, (puesto que sera la que aplicaremos a la nueva web, supuestamente,) vamos a crear una

Nueva Regla de estilos:

Empezaremos con las imágenes:

En la categoría Cuadro, asignamos estos valores:

Vamos a la categoría Borde y ponemos estos otros:

Insertamos una imagen, la seleccionamos y aplicamos el nuevo estilo, de la misma forma que hacíamos con los anteriores, este sera el efecto:

Jugar a cambiar los valores, colores etc, e incluso, si queremos que se vean cada imagen con un borde diferente, un efecto distinto, pues crearíamos otros estilos, .img2, .img3 etc.. Podemos duplicar un estilo así:

Ahora lo abrimos para modificar los valores.

Cambie el color del borde así como el efecto a solido y el color #CC3300 En cuadro, puse unos valores que son totalmente desiguales. Lo lógico es que sean simétricos, para que la imagen quede perfectamente encuadrada en ellos, pero a veces, si se inserta en mitad de un texto, podríamos querer que haya mas espacio por un lado que por otro.

Pues así vemos que se puede también hacer

Ver ejemplos aquí

Vamos a crear ahora un estilo para párrafos:

Empezamos por Tipo para definir la fuente, su color, tamaño, en Grosor, podemos elegir si negrita, mas oscura, etc… lo dejo a vuestra elección:

Podemos definir un color de fondo para todo el parrafo:

En la categoría Bloque:

Alineamiento del texto, Sangría, etc, etc…

En Cuadro, el espacio de relleno que dejaremos entre el texto y la celda que ocupa. Y el margen, igual que antes con la imagen, pueden ser valores distintos según lo necesitemos, yo puse el relleno igual para todo y margen solo a la derecha:

Y por ultimo, podemos añadir Borde:

Ver aquí el ejemplo

Si queremos otros párrafos, distintos, crearíamos mas estilos .parrafos2, o .tex, .tex2, etc. etc.. Combinamos los dos estilos anteriores? Insertando una imagen en el párrafo que hayamos puesto y le hayamos aplicado el estilo:

Pero antes hemos de conocer una cosa, ( creo que no la explique aun)

No se vosotros, pero yo una de las cosas que mas me hizo ‘pelearme’ en el Word, era crear un documento al estilo de las revistas o diarios. Aquellas columnas donde va un foto y el texto parece que se adapte a ella.

Cuando insertamos una imagen junto, (o en medio) a un texto, nos queda así:

O así:

Esto es porque en realidad, es tenida en cuenta como un carácter mas, que es el que delimita el espacio entre las líneas de caracteres

Pues para que quede como queríamos, es decir, que el texto se adapte a ella, basta con que le demos una alineación a la imagen adecuada. La seleccionamos y :

Nos quedara así:

Pero en este caso, tampoco es lo que queríamos ya que solo se adapta una línea, (Este queda muy bien con imagenes muy pequeñitas) cambiemos la alineación a Derecha o Izquierda a ver

Ahora si!! Le puse alineación a la izquierda!

Puede ser que al hacerlo, en el Dream, lo veáis con el texto superpuesto en la imagen, pero si comprobáis como se vera en el navegador, viereis que queda tal como muestra la captura.

Ahora, para poner el borde a la imagen, le aplicaríamos el estilo .img2:

y al texto también le aplicamos ahora el estilo párrafos:

Y ahora si queda tal como queríamos

Como veis, hay un montón de cosas que podemos hacer con los estilos, pero es un tema largo y eso que apenas hemos visto muy por encima.

Veremos un par de cositas mas y de momento ya dejamos este tema vale?

En los tutos, habréis visto que muchas palabras yo suelo ponerla en negrita, para realzarlas y que se note que son digamos importantes a tener en cuenta.

Pues para no poner un strong, que es una etiqueta que a veces pasa por el test de las 3w y otras no, yo cree un estilo que aplico a esas palabras cada vez que creo oportuno.

El nombre es por ejemplo, palabras clave o lo que es igual a .pclave y lo único que tiene definido este estilo es que sea el negrita:

Para los titulos también tengo otro estilo, donde cambio el tipo de fuente a Times New Roman por ser como mas decorativa que la Verdana, el tamaño, etc…

.titulos

Y una cosa molona, en los enlaces, seguro que habéis visto en algún lado que al ir a pulsaralos,

o pasar el raton por ellos, las letras se separan, o parpadean.

Para crear estos efectos, seleccionaremos el estilo que pusimos al principio:

Pulsamos en el icono del lápiz, para editarlo y en Tipo :

Marcamos Parpadeo.

En Bloque, espaciado entre letras, ponemos una cifra, en píxeles, podéis probar puntos,

pero quizás sea ya demasiado

y una cosa importante, este estilo se aplicara el sólito a todos los enlaces que vayáis creando en los documentos a los que vinculéis este estilo, es decir, esta hoja de estilos.

Creo que como dije antes, por ahora ya basta de estilos, no??

Lo cierto es que yo tuve que digerirlos despacito, ahora, haciendo los tutoriales, he llegado a entenderlos mucho mejor, que no creáis que no me han dado la ‘lata’. Pero al igual que otras muchas cosas, el ir conociendolos, me hace ir dandome cuenta de todo el potencial que tienen y por decirlo de algún modo, a ‘quererles’ cada vez mas.