Crear leyenda de imagen con CSS en Dreamweaver

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




video

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

0 comentarios:

Publicar un comentario

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Top WordPress Themes