deseoaprender.com
Curso básico de Adobe Dreamweaver
 Aprende el manejo de Dreamweaver MX y 8

Aprender a Manejar Adobe Dreamweaver para crear una web.

   
 
   
 

TRABAJAR CON IMAGEN Y 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.

   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):

curso de Adobe Dreamweaver gratis

    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:

aprender a crear paginas web con Dreamweaver

    Así que picamos 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í:

herramienta webmaster diseño web con Dreamweaver

    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í:

aprender a crear paginas web en HTML

    Veremos 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í):

curso en linea de Adobe Dreamweaver

    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:

    Aquí, yo pongo por ejemplo estos datos (se puede poner lo que quiera cada uno):

aprender a diseñar web

    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:

aprender a diseñar web con Adobe Dreamweaver 8

    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 si quisiéramos, por ejemplo:

imagenes y texto en tablas HTML Dreamweaver

    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.

 
  ** Un excelente hosting: Alojamiento web recomendado. Si tienes nociones de inglés, es un buen alojamiento para tu web.
   
 
Nos han visitado ya:
 usuarios.
   
Copyright © deseoaprender.com - Cantabria (España) 2005-2010.-Todo el contenido de esta web está protegido por la Ley de Propiedad Intelectual; por tanto no podrá reproducirse ni copiarse en todo o en parte, sin el consentimiento por escrito de su autor y propietario.