Insertar Imágenes

Material necesario para empezar a trabajar:

       Macromedia Dreamweaver
     

    
         Autora del tutorial:
Lilian´s Design

En este tutorial aprenderás:

REALIZACION:

Insertar imágenes:

Podemos insertar una imagen de varias formas. Desde la barra de opciones de menú Insertar - Imagen o bien desde la barra insertar haciendo clic en el icono que muestra la imagen superior. Inmediatamente nos saldrá una ventana emergente como esta:

Nota que puedes obtener una imagen previa de la imagen en el margen derecho de la ventana si seleccionas la casilla correspondiente. También es útil hacer clic en un espacio en blanco con el botón derecho del ratón y seleccionar la opción ver - vistas en miniatura, de esta forma podremos ver que tenemos en una carpeta de manera global, sobre todo cuando los nombres de los archivos no definen mucho el contenido de las imágenes (como es mi caso).

Bien, insertaremos primeramente la imagen Bienvenidos. Saldrá una ventana emergente donde podremos rellenar algunos campos.

Texto alternativo, es lo que se corresponde con la etiqueta ALT. La acción asociada a esta etiqueta será que una vez vista la página en el navegador, si posamos el ratón sobre la imagen, saldrá un rótulo con este texto.

Como vemos, bienvenidos aparece alineado a la izquierda en el navegador. Vamos a centrarlo para que quede más bonito haciendo clic en el icono correspondiente en el inspector de propiedades.

Con el mismo método vamos a insertar la imagen central del set y también la barra de modo que el conjunto se vea así:

Vamos a ser detallistas ahora. Confeccionaremos un cuadro central donde irá maquetado el texto más adelante en su centro. Para ello vamos a insertar una tabla con las siguientes medidas:

En el inspector de propiedades modificaremos los siguientes valores de la tabla: (Nota: ir fijaros en las transformaciones progresivas que sufren las tablas solo así lograréis comprender su dinámica).

Dentro de la tabla dorada vamos a insertar el fondo liso marrón del set, de modo que crearemos dentro de la tabla anterior otra tabla con las siguientes dimensiones:

En el inspector de propiedades he cambiado algunos valores:

Notad que he rectificado el valor de espaciado de celda, porque me di cuenta que de esa forma se crearía un espacio vacío entre en borde del marco marrón y el borde imaginario de la tabla que me será muy útil para que el texto no quede completamente pegado al borde.

Nos queda insertar las imágenes del libro de visitas y el logotipo de mi firma. Vamos a ello.

El libro de visitas está dividido en dos mitades, de modo que en esta ocasión necesitaré crear una tabla de una fila y 2 columnas:

Centramos la tabla en el set desde el inspector de propiedades y esto es lo que veremos:

Insertamos la mitad izquierda del libro en la celda izquierda de la tabla, y haremos lo propio con la mitad derecha del libro en la celda derecha de la tabla:

Finalmente, insertaremos el logotipo de mi firma en el final del set y lo centraremos, y así es como tenemos la página hasta ahora:

Mi página Web

 

Para enseñarme este resultado en el foro: Archivo - Guardar como y nómbralo parte2.html

 Nos vemos en el siguiente tutorial.

 

Tutorial creado el 28/03/2006
Prohibida la reproducción total o parcial sin consentimiento escrito.