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

  1. Software
  2. Adobe
  3. Dreamweaver
  4. Cómo editar los estilos en un diseño CSS en Dreamweaver

Libro Relacionado

Dreamweaver CC para tontos

Por Janine Warner

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 tiene que determinar qué estilos de la hoja de estilo corresponden a los elementos que desea editar.

Como probablemente puedas imaginar, puedes editar los estilos en un diseño CSS de muchas maneras para crear tus propios diseños.

Después de ajustar los estilos existentes para obtener el diseño básico de la página de la manera que desea, 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 una maqueta CSS, siga estos pasos:

  1. Abra un archivo de página basado en un diseño CSS de Dreamweaver y seleccione Estilos Window→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.
  2. Haga clic para seleccionar el nombre de la hoja de estilo en el panel Fuentes en la parte superior de CSS Designer.
  3. Las reglas CSS correspondientes definidas para el estilo se muestran en el panel Propiedades, en la parte inferior del panel CSS Designer. Hacer clic en la lista de estilos y revisar sus reglas correspondientes es una buena manera de obtener una visión general rápida del diseño y ver dónde están almacenadas las diversas opciones de formato de página.

El encabezado HTML5, .nav y las etiquetas de 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 modificar el color del área de cabecera en la parte superior de la página, modifique la parametrización del color de fondo en la regla de cabecera.

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 toda la página, siga estos pasos:

  1. Las propiedades definidas en la regla de estilo seleccionada se muestran en el panel Propiedades.
  2. Haga clic en el icono T en la parte superior del panel Propiedades y cambie o añada la fuente deseada y otras configuraciones de texto. Para cambiar el espacio entre líneas de texto, cambie la altura de la línea.
  3. Desplácese hacia abajo hasta el área Fondo del panel Propiedades y utilice el color en el campo Color de fondo para especificar un color para todo el fondo de la página o bien, puede introducir cualquier código de color hexadecimal en el campo Color de fondo o utilizar el cuentagotas para muestrear cualquier color. Para añadir una imagen de fondo, haga clic en el campo URL de la sección Fondo y, a continuación, haga clic en el botón Examinar que aparece y seleccione la imagen que desea utilizar como fondo. Utilice los iconos de repetición de fondo para especificar cómo debe repetirse la imagen de fondo en la página.
  4. Haga cualquier otro cambio o adición 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 las áreas de contenido

Para cambiar el ancho u otros parámetros de las áreas principales de contenido, que controlan el tamaño total de la página y el encabezado, el pie de página y la barra lateral, siga estos pasos:

  1. Para cambiar el ancho de toda el área de diseño principal: haga clic en el estilo.container en el panel Selectors del panel CSS Designer Las propiedades de la regla de estilo.container se muestran en el panel Properties, donde también puede editar el estilo.El ancho del diseño de página se cambia automáticamente en función del tamaño que haya introducido. Cuando altera el ancho del estilo.container, cambia el ancho de todo el diseño porque todas las etiquetas <div> y otros elementos están contenidos en el <div> formateado con el estilo.container – y todos están configurados para expandirse para llenar el.container<div>.
  2. Para modificar el tamaño del área de contenido de la página, seleccione el estilo denominado .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 incluya una barra lateral, también debe cambiar el ancho de la barra lateral.
  3. Para cambiar el color de fondo de cualquier estilo de 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 lo tanto, para cambiar el color de fondo, haga clic en .sidebar1 en el panel Selectors, seleccione la categoría Background en el panel Properties y seleccione el color que desee. De manera similar, para cambiar el color de fondo del encabezado, seleccione el estilo llamado encabezado en el panel de selectores y utilice bien el color.
  4. Para agregar una imagen al encabezado: Seleccione la imagen del marcador de posición Insertar Logo y presione la tecla Suprimir o Retroceso, elija Insertar →Image→Image y seleccione una imagen utilizando el cuadro de diálogo Seleccionar Fuente de Imagen.
  5. Puede agregar o reemplazar texto e imágenes en cualquier página creada a partir de un diseño CSS, como lo haría en cualquier otra página web.
  6. Elija File→Save Todos para guardar la página y los estilos.

ADD YOUR COMMENT