¿Cómo colocar bordes o marcos alrededor de las imágenes en DreamWeaver paso a paso?

A veces, tendrá que establecer una imagen aparte del fondo o del contenido circundante para que se destaque con Dreamweaver. Una forma de crear este efecto es colocar un borde alrededor de la imagen.

Un borde puede llamar la atención sobre una imagen y puede ser parte de una apariencia estilística en todo el sitio. A veces, un borde también puede indicar un enlace.

Hay dos formas de definir un borde en este ejercicio: usarás CSS para crear el borde, pero también aprenderás sobre el segundo método para aplicar el atributo de borde a la etiqueta de imagen.

 ¿Cómo agregar bordes a Dreamweaver?

El panel Borde de Dreamweaver define la apariencia de los bordes alrededor de imágenes, tablas, etiquetas <div> y otros elementos. Puede especificar la configuración de borde en uno, dos, tres o cuatro lados de un elemento.

1. Seleccione la regla studioPhoto de la lista Todas las reglas en el Panel de estilos CSS.
2. Haga clic en el botón Editar estilo en la parte inferior del panel.
3. Las reglas aparecen en el orden en que las creaste.
4. Con la más antigua en la parte superior de la lista y la más reciente en la parte inferior.
5. En el cuadro de diálogo Definición de regla CSS, seleccione la categoría Borde.
6. Elija sólido de las opciones de Estilo.
7. Ingrese 1 en el campo de texto superior para la sección Ancho y elija # 747E3F.
8. Haga clic en Aceptar para cerrar el cuadro de diálogo y aplicar el cambio.
9. Dreamweaver agrega un borde de un píxel alrededor de la imagen.
10. Configuración de borde utiliza una medición basada en píxeles.
11. La predeterminada en el cuadro de diálogo Definición de regla.
12. Puede establecer el ancho del borde a cualquier número que desee.

¿ Cómo usar el panel de borde que presenta Dreamweaver?

Puede usar la configuración de borde para crear líneas divisorias entre etiquetas <div> que crean columnas o agregan líneas de separación por encima o por debajo de los elementos.

• Contraer Borde: especifique si los bordes de la tabla se combinan en un solo borde o se separan tal como aparecen en HTML estándar cuando usa la etiqueta <table>. Las opciones son Contraer, Separar (el valor predeterminado) y Heredar.
• Espacio Entre Bordes: establezca el espacio entre los bordes de las celdas de la tabla adyacente cuando la opción Contraer borde se establece en Separar.
• Color del Borde: especifique el color del borde para los cuatro lados de un elemento ingresando un color hexadecimal o haciendo clic en el color y usando el selector de color.
• Color de Borde Superior, Derecho, Izquierdo e Inferior: especifique colores diferentes para cualquiera o todos los bordes de un elemento.
• Ancho del Borde: especifique el ancho o grosor del borde. Puede elegir delgado, medio o grueso, o puede especificar el tamaño en píxeles, ems o cualquiera de las otras opciones de tamaño.
• Borde Superior, Derecho, Izquierdo y Ancho Inferior: especifique diferentes anchos para cualquiera o todos los bordes de un elemento.
• Estilo de Borde: elija entre cualquiera de las opciones de estilo de borde, incluyendo Sólido, Punteado o Doble.
  Estilo de borde superior, derecho, izquierdo e inferior: especifique diferentes estilos de borde para cualquiera o todos los bordes de un elemento.
• Radio de Borde: crea esquinas redondeadas en tus bordes. Haga clic para colocar el cursor en cualquiera de los cuatro campos ubicados cerca de las esquinas del cuadro de vista previa del borde e ingrese un número para especificar la cantidad del radio. Puede elegir cualquiera de las opciones de tamaño de CSS usando la lista desplegable.

Recomendaciones

También puede aplicar un borde a una imagen usando el atributo de borde de la etiqueta <img>. Para hacerlo, seleccione la imagen e ingrese un valor para el grosor deseado en el campo de texto Borde en el inspector de propiedades.

Si asigna un enlace a una imagen, el color del borde será el mismo que el Color del enlace predeterminado especificado en Propiedades de la página a menos que se aplique un estilo CSS, en cuyo caso un enlace no causará ningún cambio en el color del borde.

El color del borde será el mismo que el color de texto predeterminado que se especificó en el cuadro de diálogo Propiedades de la página. El siguiente ejemplo muestra una imagen que tiene un atributo de borde aplicado a través del inspector de propiedades.

Evitar el atributo de borde en favor de usar CSS para definir bordes de imagen, como lo ha hecho en este ejercicio, es un mejor proceso de codificación.