Crear leyenda de imagen con CSS en Dreamweaver

En este video mostramos como crear una leyenda para una imagen en CSS mediante Dreamweaver

Pasos dados:

1. Ponemos el título de la página
2. Insertamos la imagen desde el icono de la barra de herramientas. también puede hacerse desde Insertar - Imagen
3. Seleccionamos la imagen con doble clic o bien con un clic y haciendo clic en Aceptar
4. Aparece el cuadro de accesibilidad. En este caso no vamos a establecer descripción de la imagen. Hacemos clic en Aceptar
5. Aparecerá nuestra imagen insertada. Puede ocurrir que no sea del tamaño esperado. Podemos modificarlo desde el inspector de propiedades en los campos ancho y alto. Esto no es recomendable. Siempre es mejor editar previamente la imagen para que no pierda resolución.
6. Escribimos el texto de la leyenda
7. Seleccionamos la imagen y el texto
8. Insertamos la etiqueta div que actuará como contenedor desde menú Insertar - Objetos de diseño - Etiqueta Div
9. En el cuadro de diálogo Insertar etiqueta Div creamos una nueva clase ya que no tenemos ninguna creada para aplicar
10. Podemos nombrar nuestra clase en el apartado Nombre
11. Hacemos clic en el botón Nueva regla CSS
12. En el cuadro de diálogo Nueva regla CSS marcamos las opciones Clase (porque vamos a crear una nueva clase), aparecerá nuestro nombre de clase precedido de un punto y marcamos la opción Sólo en este documento (aunque es mejor utilizar una hoja de estilos externa)
13. Hacemos clic en Aceptar
14. Marcamos la categoría Fondo para aplicar color al documento
15. Marcamos la categoría Cuadro para establecer el ancho, la posición, el relleno y el margen
16. Marcamos la categoría Borde para establecer un estilo sólido, un ancho grueso y un color
17. Hacemos clic en Aceptar
18. Hacemos clic en Aceptar
19. Guardamos la página desde menú Archivo - Guardar. Observamos como el asterisco al lado del nombre de la página desaparece.
20. Previsualizamos la página presionando tecla F12.
    
21. Podemos darle mayor estilo al párrafo creando un selector de clase. Volvemos a Dreamweaver y seleccionamos en el panel CSS la opción Editar estilo. Si no aparece dicho panel podemos mostrarlo pulsando Mayus+F11.
22. Seleccionamos la opción Avanzadas
23. En Nombre establecemos la etiqueta p de párrafo después del nombre de la clase
24. Seleccionamos Sólo este documento
25. Hacemos clic en Aceptar
26. Seleccionamos la categoría Tipo.
27. Tamaño: menor
28. Estilo: Cursiva
29. Seleccionamos la categoría Bloque
30. Alineamiento de texto: centrar
31. Sangría de texto: 0 px
32. Hacemos clic en Aceptar
33. Guardamos la página (Ctrl+S)
34. Actualizamos la página en el navegador pulsando la tecla F5

Redactado en: Dreamweaver CS3