21. Imágenes

<< 20. Enlaces                        22. Vídeo >>

 

 

http://cursodw.papelyweb.com/21_Imagenes/imagenes.html

Repetimos los pasos de el capítulo 20. Enlaces.

1/ Abrimos desde Mi_Plantilla 2/ Guardamos como imagenes.html dentro de una nueva carpeta 21_Imagenes, 3/ Copiamos los textos de Mi_Sitio / Guiones / 21_imagenes.txt, 4/ Pegar el texto en imagenes.html, 6/ Realizar las prácticas, 6/ Enlazar entre imagenes.html y galeria.html.

 

Abrimos un documento desde Mi_Plantilla para hacer prácticas con la imágenes, que guardaremos como “imagenes.html” en una nueva carpeta 21_Imagenes de nuestro sitio.

Lo primero es ir a Insertar / Imagen y buscar la foto a insertar. En nuestro caso vamos a Mi_Sitio/ 11_Contenidos / imagenes / Retoque_portada.jpg . Es recomendable poner siempre el texto alternativo.

También podemos “arrastrar” la imagen directamente desde el panel de archivos o desde el de activos al lienzo. O ir al panel Insertar / Común / Imágenes.

E incluso podemos ir a Bridge y arrastrarla desde aquí. Así tendremos una buena ayuda, pues nos dará mucha información sobre el archivo que queremos adjuntar, teniendo en cuenta que las fotos estén dentro de nuestro sitio.

Seleccionamos la foto y vamos a ver el código “<img src=”../11_Contenidos/imagenes/Retoque_portada.jpg” width=”340” height=”510”>” y comprobamos que crea un referencia al archivo, no lo incrusta, por lo que cuando subimos el documento a internet también tenemos que subir las imágenes.

Las imágenes se pueden modificar de tamaño (no recomendable), el origen, crear un borde, darle márgenes horizontales y verticales, editarlos en Photoshop, Fireworks o en el propio Dreamweaver, crearle un vínculo, asignadle una clase o darle un ID para crear una zona interactiva (ya lo hemos visto). Todo esto en el panel de propiedades.

Creamos ahora una imagen de sustitución o rollover. Para ello vamos a Insertar / Común / Imagen / Imagen de sustitución, y en el cuadro de diálogo rellenamos los campos. Buscando la imagen en ../11_Contenidos/imagenes/Retoque_portada_sustitucion.jpg

Una vez que hemos acabado el ejercicio vamos a “Pruebas.html” y creamos un enlace a esta página.

 

 

Crear las carpetas del curso

C: … / Cursos / Curso_Dreamweaver /  Curso_Final. Contiene los archivos finalizados que vamos a necesitar para completar las prácticas de curso.

C: … / Cursos / Curso_Dreamweaver /  Mi_Sitio. Es donde realizaremos las prácticas.

Si es necesario crea las carpetas que necesites. Es muy importante mantener la estructura de carpetas que recomendamos en estos apuntes, para seguir el curso sin perdidas de tiempo adicionales.

Envia un comentario

Debes ser Conectado Para publicar un comentario.