Computación y electrónica

Cómo agregar texto sobre una imagen en Dreamweaver CS5

Escrito por william harrel | Traducido por enrique pereira vivas
Cómo agregar texto sobre una imagen en Dreamweaver CS5

Coloca texto sobre los gráficos en Dreamweaver.

John Foxx/Stockbyte/Getty Images

La colocación de texto sobre una imagen en una página web es una técnica de diseño atractiva. Adobe Dreamweaver, un programa de diseño de páginas web, soporta varias maneras de lograr este efecto. Uno de los métodos más fáciles y más comunes es la creación de una Hoja de Estilo en Cascada, o contenedor CSS (por sus siglas en inglés), a continuación, se inserta la imagen como el fondo del recipiente. Luego, puedes escribir un texto sobre la imagen y darle formato al texto como lo desees.

Nivel de dificultad:
Moderadamente difícil

Otras personas están leyendo

Necesitarás

  • Adobe Dreamweaver CS3 o posterior
  • Un archivo de imagen de web compatible con JPG, PNG de GIF

Lista completaMinimizar

Instrucciones

  1. 1

    Abre el archivo HTML de Dreamweaver en el que deseas crear una imagen con texto superpuesto, o inicia un nuevo archivo HTML haciendo clic en el menú "Archivo" y seleccionando "Nuevo". Esto abrirá el cuadro de diálogo Nuevo documento. Selecciona HTML en la lista Tipo y el diseño que deseas en la lista Diseño, haz clic en el botón "Crear".

  2. 2

    Haz clic en el menú "Archivo" y selecciona "Guardar como". Esto abrirá el cuadro de diálogo. Nombra y guarda la página Web.

  3. 3

    Haz clic en la página donde desees insertar la imagen con el texto superpuesto para colocar el cursor.

  4. 4

    Haz clic en el menú desplegable "Regla de destino" en el panel Propiedades y selecciona "Nueva regla CSS." Esto abrirá el cuadro de diálogo de la nueva regla CSS.

  5. 5

    Haz clic en el campo "Nombre de selección" y escribe un nombre para la nueva regla CSS. Puedes asignar el nombre de selección que desees, pero debe comenzar con un punto, por ejemplo, ".image".

  6. 6

    Haz clic en "Aceptar" para abrir el cuadro de diálogo de la Definición de Reglas CSS. Desde aquí puedes configurar el formato para el texto superpuesto, seleccionar el archivo de imagen de fondo y establecer los márgenes para el contenedor. El texto superpuesto se muestra dentro de los márgenes, lo que te permite centrar el texto sobre la imagen.

  7. 7

    Haz clic en "Tipo" en la lista Categoría. Esto muestra las opciones para darle formato al texto. Elige el tipo de letra, tamaño de fuente, el peso de la fuente y color de fuente, haz clic en el botón "Aplicar".

  8. 8

    Haz clic en "Fondo" en la lista Categoría. Esto muestra las opciones para darle formato al fondo del contenedor CSS. Haz clic en el botón "Examinar" al lado de "Imagen de fondo". Esto abrirá el cuadro de diálogo de Selección de Fuente de la Imagen. Navega hasta el archivo de imagen, selecciónalo, a continuación, haz clic en el botón "Aceptar".

  9. 9

    Haz clic en el menú desplegable "Repetir fondo" y selecciona "Sin repetir". Esto le indicará a Dreamweaver que muestre sólo una instancia de la imagen, en lugar de embaldosar varias copias para cubrir todo el fondo del contenedor.

  10. 10

    Haz clic en "Aplicar".

  11. 11

    Haz clic en "Caja" en la lista Categoría. Esto muestra las opciones para dar formato al contenedor, como su anchura y altura, así como los márgenes. Normalmente, establecerás el tamaño del contenedor para que coincida con el tamaño de la imagen de fondo. Por ejemplo, si la imagen mide 800 x 300 píxeles, introduce "800" en el campo de "Ancho" y "300" en el campo de "Altura".

  12. 12

    Haz clic en el campo de "Ancho" y escribe el ancho deseado para tu contenedor, a continuación, haz clic en "Altura" y escribe la altura deseada para tu contenedor.

  13. 13

    Haz clic en la casilla de verificación "Igual para todos" en la sección Margen de la caja de diálogo de Definición de Reglas CSS. Esto le indica a Dreamweaver para que haga los márgenes del mismo tamaño en los cuatro lados del contenedor. Escribe el ancho del margen deseado en el campo "Superior". Dreamweaver inserta valores coincidentes en los campos "Derecho", "Inferior" e "Izquierdo". Ten en cuenta que puede tomar un poco de experimentación para que tus márgenes queden exactamente como lo deseas.

  14. 14

    Haz clic en "Aceptar". Dreamweaver crea el contenedor y coloca la imagen.

  15. 15

    Haz clic en la imagen y escribe el texto deseado. El texto se muestra sobre la imagen con las propiedades que figuran en el cuadro de diálogo de Definición de Regla CSS.

Consejos y advertencias

  • Puedes modificar el formato del texto, el tamaño del contenedor y los márgenes mediante la edición de la regla CSS. Haz clic en el menú desplegable "Regla de destino" en el panel Propiedades, selecciona la regla CSS que deseas editar, haz clic en el botón "Editar regla". Esto abrirá el cuadro de diálogo de la Definición de Reglas CSS. Realiza los cambios que desees al contenedor y a las propiedades del texto superpuesto.

Más galerías de fotos

comentarios

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles

Copyright © 1999-2014 Demand Media, Inc. Acerca de

El uso de este sitio constituye la aceptación de los términos y política de privacidad de eHow. Ad Choices es-US

Demand Media