.: Rodear imágenes con texto:
No dejo pasar mucho tiempo, y voy a abordar la explicación del asunto que quedaba pendiente en la lección anterior: aprender mediante Dreamweaver a insertar una imagen y texto alrededor de ella en vista al diseño de una web, y quiero empezar por ofrecer la apariencia de lo que quiero explicar, mostrando en esta imagen como quedaría si no lo hacemos de forma correcta con Dreamweaver MX:
|
|
|
o haciéndolo perfectamente (como veremos paso a paso):
Una vez explicado vais a comprender que no tiene mayor dificultad, pero conviene que lo sepais por si teneis que llevarlo a la práctica algún día.
Comenzamos, y lo primero que haremos será crear una Tabla de 1 fila por 2 columnas justo picando debajo de la Tabla con la que habíamos trabajado en la lección anterior, y ahora volvemos a picar sobre el icono “ Tabla ” de la barra superior (siempre que estemos en la vista “ Común ”  ):
para poder fijar el tamaño de la misma según hemos dicho: |
|
|
así que damos a “Aceptar” y nos debrá salir:
donde explicaremos la parte contenida en la celda derecha (que es de lo que trata la lección de hoy), ya que lo que hay en la celda izquierda es simplemente una imagen incrustada sin más y luego texto a parte de la imagen (lo que vimos ya en una de las lecciones pasadas, así que cuando comienzo a explicar, tengo la Tabla así: |
|
y ya picando dentro de la celda derecha, tenemos que colocar el cursor arriba (recordad que para ello estaba el comando “valign=”top”” ya estudiado) e irnos a “vista Código” y justo en el sitio donde tenemos el cursor (y que señalo con una flecha):
 |
|
introducimos manualmente el comando, quedando así:
viendo como al volver a la “vista Diseño” ya está el cursor arriba; procedemos ahora a insertar una imagen (yo la de siempre, que simplemente “copio” de la anterior y “pego” aquí):
así que ahora es cuando viene la explicación ¡atentos!, selecciono la imagen picando sobre ella y me voy abajo al “ Inspector de propiedades ” donde debo hacer cambios en estos sitios:
donde yo pongo por ejemplo (se puede poner lo que se quiera cada uno):
|
|
|
en “ Espacio V ” (vertical) pongo 8, en “ Espacio H ” (horizontal) pongo 4, y en “ Alinear ” selecciono con la flechita “Izquierda”, con lo que automáticamente veremos como la imagen nos muestra este espacio reservado, en color negro:
así que ahora picamos dentro de la celda, y el cursor se quedará a la izquierda de la imagen, pero con la tecla de “dirección a derecha” pulsando una vez, ya pasa a colocarse a la derecha de la imagen, quedando ahora solamente escribir lo que queramos para que aparezca así: |
Nada nos habría impedido el colocar la imagen a la derecha del texto:
|
simplemente en el “Inspector de propiedades” en el apartado “Alinear” (ojo, con la imagen seleccionada –picada-) le ponemos “Derecha” en vez de izquierda como antes.
Y hasta aquí lo que quería explicaros en este tema, aún queda alguno para que ninguna duda os quede a la hora de enfrentaros al diseño de una página web, pero eso ya será para otro día así que saludos. |
|
|
|
| |
|
|
| |
|
|
