Estilos CSS

Estilos CSS

Tema 1. Capas en Adobe Dreamweaver CS6

Para incluir una capa, es necesario hacer clic en la opción Insertar, luego debe ubicarse en Objetos de diseño y por último seleccionar Div PA.

Agregar texto a una capa

Observe que aparece un recuadro azul. En una capa se puede escribir texto, (al cual se le puede aplicar formato, color, tipo de fuente, tamaño, negrita, cursiva, alineado, entre otras.) insertar imágenes y colores.

Insertar una imagen en una capa

Para anexar la ilustración, ubique el cursor del mouse dentro de la capa, posteriormente dé

clic en la opción Insertar, luego seleccione Imagen y en la ventana que aparece, escoja la

figura y presione el botón Aceptar.

En el nuevo cuadro de diálogo vuelva a dar clic en Aceptar.

Observe como aparece la imagen dentro de la capa.

Mover una capa

Es posible desplazar la capa con todo su contenido a un lugar específico de la página web, lo que permite un mejor diseño. Para moverla, basta con dar clic sostenido sobre el recuadro que aparece en la parte superior izquierda, luego se traslada hasta donde se quiera ubicar.

Visualice como queda la capa una vez se ha cambiado de lugar, también, mediante los puntos exteriores de la capa, se puede ampliar o disminuir su tamaño; sin embargo, cuando se tienen imágenes insertadas dentro de la capa, esta se adecua al tamaño de la figura.

Cuando se requiere cambiar el tamaño de una capa, teniendo esta insertada una imagen, lo primero que se debe modificar es el tamaño de la misma, para proceder después a cambiar el tamaño de la capa.

Con la ayuda de las capas se puede mover una imagen libremente, ya que si se agrega directamente en la página web, no es tan sencillo realizar el desplazamiento.

Aplicar color de fondo a una capa

Para introducirle fondo a una capa, lo primero que debe hacer es seleccionarla, luego en Propiedades, dar clic en el cuadro de opciones Col. Fondo y escoger el color deseado.

Observe como queda aplicado el color de fondo de la capa.

Aplicar imagen de fondo a una capa

Asimismo se puede asignar una imagen de fondo a una capa, para ello, seleccione la capa, luego en Propiedades, dé clic sobre la carpeta de la opción Im. fondo.

En la ventana que se muestra, escoja la imagen previamente guardada en el computador y haga clic Aceptar.

Visualice como queda la imagen de fondo dentro de la capa.

Para que el texto de la capa quede de un color más claro, es necesario seleccionar el escrito dentro de la capa para luego en Propiedades, en la alternativa Tamaño, en el ícono de color, escoger el deseado.

Contemple como queda aplicado el color al texto de la capa.

Diseño de una página web usando capas

Las capas son muy útiles para diseñar páginas web, ya que con ellas se pueden crear muchos diseños agradables, por consiguiente, a continuación se va a mostrar cómo se utilizan.

Creé un nuevo sitio llamado Fútbol, configure la carpeta de imágenes, y asimismo instaure una nueva página web con el nombre de Mundial. Observe

...