Cómo editar los estilos en un diseño CSS en Dreamweaver

Después de crear una nueva página con un diseño CSS en Dreamweaver, tiene un número aparentemente infinito de opciones para editarla, pero primero debe determinar qué estilos de la hoja de estilo corresponden a los elementos que desea editar.

Como probablemente pueda imaginar, puede editar los estilos en un diseño CSS de muchas formas para crear sus propios diseños.

Después de ajustar los estilos existentes para obtener el diseño de página básico de la forma que desee, puede crear tantos estilos adicionales como desee.

Cómo comprobar los estilos disponibles y realizar ediciones básicas

Puede utilizar estas mismas instrucciones básicas con cualquier diseño CSS incluido en Dreamweaver. Para editar estilos en un diseño CSS, siga estos pasos:

Abra un archivo de página basado en un diseño CSS de Dreamweaver y elija Ventana → Estilos CSS (o haga clic en la pestaña Diseñador de CSS para expandir el panel).

El panel Diseñador de CSS se abre o se expande.

Haga clic para seleccionar el nombre de la hoja de estilo en el panel Fuentes en la parte superior del Diseñador CSS.

Todos los estilos asociados con la nueva página se enumeran en el panel de selectores.

Seleccione el nombre de cualquier estilo que aparezca en el panel de selectores del diseñador CSS.

Las reglas CSS correspondientes definidas para el estilo se muestran en el panel Propiedades, en la parte inferior del panel Diseñador CSS. Hacer clic en la lista de estilos y revisar sus reglas correspondientes es una buena manera de obtener una descripción general rápida del diseño y ver dónde se almacenan las distintas opciones de formato de página.

Las etiquetas HTML5 de encabezado, .nav y pie de página controlan las secciones principales de la página. Por ejemplo, el estilo del encabezado incluye una regla que hace que el color de fondo sea verde. Por lo tanto, para cambiar el color del área del encabezado en la parte superior de la página, cambia la configuración del color de fondo en la regla del encabezado.

Cómo editar la configuración de toda la página

Para editar la configuración de toda la página, como el color de fondo de la página o la fuente principal, el tamaño y el color del texto utilizado en la página, siga estos pasos:

En el panel de selectores del diseñador CSS, seleccione el estilo denominado cuerpo.

Las propiedades definidas en la regla de estilo seleccionada se muestran en el panel Propiedades.

Haga clic en el icono T en la parte superior del panel Propiedades y cambie o agregue la fuente deseada y otras configuraciones de texto.

Puede cambiar el tipo, el tamaño, el estilo y el peso de la fuente. Para cambiar el espacio entre líneas de texto, cambie la altura de la línea.

Desplácese hacia abajo hasta el área Fondo del panel Propiedades y use la paleta de colores en el campo Color de fondo para especificar un color para todo el fondo de la página.

Alternativamente, puede ingresar cualquier código de color hexadecimal en el campo Color de fondo o usar el cuentagotas para probar cualquier color. Para agregar una imagen de fondo, haga clic en el campo URL en la sección Fondo y luego haga clic en el botón Examinar que aparece y seleccione la imagen que desea que sirva como fondo. Utilice los iconos Fondo-Repetir para especificar cómo debe repetirse la imagen de fondo en la página.

Realice otros cambios o adiciones a la regla de estilo.

Los cambios en las reglas de estilo en el panel Propiedades se guardan automáticamente y se aplican al contenido formateado con la regla.

Cómo personalizar áreas de contenido

Para cambiar el ancho u otras configuraciones de las áreas de contenido principal, que controlan el tamaño general de la página y el encabezado, pie de página y barra lateral, siga estos pasos:

Para cambiar el ancho de toda el área de diseño principal:

Haga clic en el estilo .container en el panel Selectores del panel Diseñador CSS.

Las propiedades de la regla de estilo .container se muestran en el panel Propiedades, donde también puede editar el estilo.

Cambie el tamaño en el campo Ancho o escriba un nuevo número para el ancho de página deseado.

El ancho del diseño de la página se cambia automáticamente según el tamaño que ingresó. Cuando modifica el ancho del estilo .container, cambia el ancho de todo el diseño porque todos los

etiquetas y otros elementos están contenidos en el

formateados con el estilo .container, y todos están configurados para expandirse para llenar el .container

.

Para modificar el tamaño del área de contenido de la página, seleccione el estilo llamado .content y especifique el tamaño y otras opciones que desee en el panel Propiedades.

Si cambia el ancho del área de contenido en un diseño que incluye una barra lateral, también debe cambiar el ancho de la barra lateral.

Para cambiar el color de fondo de cualquier estilo en la página, haga clic en el nombre del estilo correspondiente y cambie la configuración en la sección Fondo del panel Propiedades.

Por ejemplo, en los diseños CSS de Dreamweaver, la barra lateral se define en un estilo llamado .sidebar1. Por lo tanto, para cambiar el color de fondo, debe hacer clic en .sidebar1 en el panel Selectores, seleccionar la categoría Fondo en el panel Propiedades y seleccionar el color que desee. De manera similar, para cambiar el color de fondo del encabezado, seleccione el estilo llamado encabezado en el panel Selectores y use la paleta de colores.

Para agregar una imagen al encabezado:

Seleccione la imagen de marcador de posición etiquetada Insertar logotipo y presione la tecla Eliminar o Retroceso.

Elija Insertar → Imagen → Imagen y seleccione una imagen usando el cuadro de diálogo Seleccionar fuente de imagen.

Reemplaza texto e inserta imágenes en la barra lateral y las áreas de contenido principal.

Puede agregar o reemplazar texto e insertar imágenes en cualquier página creada a partir de un diseño CSS, tal como lo haría en cualquier otra página web.

Elija Archivo → Guardar todo para guardar la página y los estilos.