Como 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, usted tiene un número aparentemente infinito de opciones para editar, pero primero hay que determinar qué estilos en la hoja de estilos se corresponden con los elementos que desea editar.
Como podrán imaginar, se pueden editar los estilos en un diseño CSS en muchas maneras de crear sus propios diseños.
Después de ajustar los estilos existentes para obtener la página de diseño básico de la forma que desee, puede crear tantos estilos adicionales como se desee.
Cómo ver los estilos disponibles y hacer ediciones básicas
Puede utilizar estas mismas instrucciones básicas con cualquier diseño CSS incluido en Dreamweaver. Para modificar el estilo en un diseño CSS, siga estos pasos:
Abrir un archivo de página que se basa en un diseño de Dreamweaver CSS y elegir estilos de ventana → CSS (o haga clic en la pestaña Diseñador de CSS para expandir el panel).
El panel CSS diseñador se abre o se expande.
Haga clic para seleccionar el nombre de la hoja de estilos en el panel Fuentes en la parte superior del diseñador CSS.
Todos los estilos asociados a la nueva página se enumeran en el panel de selectores.
Seleccione el nombre de cualquier estilo que aparece en el panel de selectores CSS diseñador.
Las reglas CSS correspondientes definidos por el estilo se muestran en el panel Propiedades, en la parte inferior del panel Diseñador de CSS. Accediendo a la lista de estilos y la revisión de sus normas correspondientes es una buena manera de obtener una visión rápida del diseño y para ver donde se almacenan las distintas opciones de formato de página.
el HTML5 encabezamiento, .NAV, y pie de página etiquetas controlan las principales secciones de la página. Por ejemplo, el encabezamiento estilo incluye una regla que hace que el color verde de fondo. Por lo tanto, para cambiar el color de la zona de cabecera en la parte superior de la página, cambia la configuración de color de fondo en el encabezamiento regla.
Cómo modificar la configuración de toda la página
Para editar la configuración de toda la página - tales como el color de fondo de la página o la cara principal de fuente, tamaño y color del texto utilizado a través de la página - siga estos pasos:
En el panel de selectores CSS diseñador, seleccione el estilo llamado cuerpo.
Las propiedades definidas en la regla de estilo seleccionado se muestran en el panel Propiedades.
Haga clic en el icono de T en la parte superior del panel Propiedades y cambiar o añadir su fuente deseada y otros parámetros de texto.
Video: Curso de Dreamweaver CC. 17. Estilos CSS
Puede cambiar el tipo de letra, tamaño, estilo, y el peso. Para cambiar el espacio entre líneas de texto, cambiar la altura de la línea.
Desplazarse hacia abajo al área de fondo del panel de propiedades y el uso de la paleta de colores en el campo de fondo de color para especificar un color para todo el fondo de la página.
Alternativamente, se puede introducir cualquier código de color hexadecimal en el campo de fondo de color o utilizar el cuentagotas para muestrear cualquier color. Para agregar una imagen de fondo, haga clic en el campo URL en la sección Antecedentes y luego haga clic en el botón Examinar que aparece y seleccionar la imagen que desea servir como el fondo. Utiliza los iconos background-repeat para especificar cómo la imagen de fondo debe repetir en la página.
Hacer cualquier otro cambio o adiciones a la regla de estilo.
Los cambios en las reglas de estilo en el panel de propiedades se guardan y se aplican al contenido formateado con la regla de forma automática.
Cómo personalizar las áreas de contenido
Para cambiar el ancho o en otros parámetros de las principales áreas de contenido, que controlan el tamaño total de la página y el encabezado, pie de página, y la barra lateral, siga estos pasos:
Para cambiar la anchura de la totalidad de la zona principal de diseño:
Haga clic en el .envase estilo en el panel de selectores del panel Diseñador de CSS.
Las propiedades de la .envase regla de estilo se muestran en el panel Propiedades, donde también se puede editar el estilo.
Cambiar el tamaño en el campo Anchura o introduzca un nuevo número de su ancho de la página deseada.
El ancho de la página de diseño se cambia automáticamente en función del tamaño de la que ha introducido. Cuando se altera el ancho de la .envase estilo, cambia el ancho de todo el diseño, porque todas las etiquetas y otros elementos están contenidos en el formato con el .envase estilo - y que está todo listo para expandir para llenar el .envase .
Para modificar el tamaño del área de contenido de la página, seleccione el estilo llamado .contenido y especificar 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, debe cambiar el ancho de la barra lateral también.
Para cambiar el color de fondo de cualquier estilo en la página, haga clic en el nombre del estilo correspondiente y cambiar la configuración en la sección Antecedentes del panel Propiedades.
Por ejemplo, en los diseños de CSS en Dreamweaver, la barra lateral se define en un estilo llamado .sidebar1. Por lo tanto, para cambiar el color de fondo, debe hacer clic en el panel .sidebar1 selectores, seleccione la categoría de fondo en el panel Propiedades y seleccione el color que desee. Del mismo modo, para cambiar el color de fondo de la cabecera, seleccione el estilo llamado encabezado en el panel de selectores y el uso de la paleta de colores.
Video: Curso de Dreamweaver CS6. 17. Estilos CSS
Para añadir una imagen a la cabecera:
Seleccione el marcador de posición de imagen etiquetada Logo Insertar y pulse la tecla Supr o Retroceso.
Seleccione Insertar → Imagen → Imagen y seleccione una imagen mediante el cuadro de diálogo Seleccionar origen de imagen.
Reemplazar texto e insertar imágenes en la barra lateral y principales áreas de contenido.
Se pueden añadir 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.
Seleccione Archivo → Guardar todo para guardar la página y estilos.