Modificación de diseño CSS en Adobe CS5 Dreamweaver

categoría Computadoras y software / Gráficos y animación / Diseño Grafico

Morada Creative Suite 5 (CS5 de Adobe) Dreamweaver ofrece múltiples formas de cambiar una página Hojas de diseño de estilo en cascada. Un diseño CSS es controlado completamente por las reglas de hojas de estilo, así que usted puede modificar la apariencia de la página directamente desde el panel Estilos CSS y el inspector de propiedades.

Cada columna, caja, y el espacio en su nueva página está posicionado y dimensionado utilizando reglas y propiedades CSS, todos los cuales se pueden ajustar, ya sea del inspector de propiedades (en el panel Estilos CSS) o el panel de definición de reglas CSS.

  1. Si el panel Estilos CSS no está abierto, elija Ventana Estilos CSS para abrirlo.

  2. Seleccione la pestaña Todas para mostrar la hoja de estilo y sus reglas.

    La hoja de estilo interna se muestra como Encima. Haga clic en la flecha a la izquierda para expandirla y mostrar todas las reglas que contiene. Presentaciones utilizando una hoja de estilos adjunta (externo) mostrará el nombre de la hoja de estilo (como styles.css) en lugar de la etiqueta.

  3. Selecciona el cuerpo gobernar.

    Este estilo basado en etiquetas controla el formato general de toda la página (todo dentro de la etiqueta).

  4. Haga clic en el campo al lado de la regla de fondo para editar IT- en lugar de mantener el # 4E5869 (gris medio) establecer, escriba un color hexadecimal (por ejemplo, # CC0000 para el rojo) para cambiar el color de fondo de la página.

  5. Haga clic en la muestra junto a la regla de color para abrir las Muestras panel- elegir un color nuevo tipo predeterminado para el texto en su página.

  6. En la parte superior del panel Estilos CSS, seleccione otro estilo (por ejemplo, el .estilo #container twoColElstHdr) Para ver sus propiedades.

    los .twoColHybLtHdr #estilo Identificación contenedor controla el tamaño y la apariencia del envase principal disposición en la página.

  7. En el inspector de propiedades, edite las propiedades para cambiar la apariencia del estilo.

    Por ejemplo, puede cambiar el ancho de la regla mediante la introducción de un nuevo número en el cuadro de texto Ancho Regla. Si introduce 95%, por ejemplo, a hacer todo el diseño en general.

Cada columna y sección que comprende el diseño es controlado por uno de los estilos de identificación que figuran en el panel Estilos CSS. La mayoría de cada estilo ID cuenta con una propiedad de ancho que puede utilizar para cambiar el tamaño de las diferentes áreas de la página.

Continuar modificar diferentes estilos enumerados en el panel Estilos CSS y ver cómo afectan los diferentes elementos en su página. Intente cambiar el color de tipo, la familia de la fuente, y otras propiedades, tales como el relleno y color de fondo.

Para averiguar exactamente qué controles que la columna o de la sección de identificación, haga clic en el área de la página y mirar el selector de etiquetas en la parte inferior de la ventana de documento. El último

etiqueta al final de la cadena que qué contenedor que está y su correspondiente identificación en el panel Estilos CSS (por ejemplo, muestra, ).



Artículos Relacionados

Sobre el autor
Cómo adjuntar una hoja de estilos externa a una página en Dreamweaver Cómo adjuntar una hoja de estilos externa a una página en Dreamweaver

Después de crear una hoja de estilos externa en Dreamweaver, puede adjuntarlo a cualquier página web. En las instrucciones paso a paso que siguen, puede utilizar cualquiera de las hojas de estilos predefinidos incluidos en Dreamweaver, o puede…

Cómo cambiar los estilos de enlace con propiedades de página en Dreamweaver Cómo cambiar los estilos de enlace con propiedades de página en Dreamweaver

Si usted es como muchos diseñadores que utilizan Dreamweaver, es probable que no te gusta el subrayado que aparece automáticamente en todo el texto vinculado en una página web. Es muy fácil de quitar ese subrayado y cambiar el color, la fuente,…

Cómo crear-absoluta posicionado (ap) divs en adobe dreamweaver CS6 Cómo crear-absoluta posicionado (ap) divs en adobe dreamweaver CS6

Adobe Dreamweaver CS6 utiliza contenedores virtuales CSS controlado, o cajas, creado por la etiqueta DIV para posicionar libremente el contenido de una página. los DIV etiqueta es una etiqueta básica utilizada para crear áreas de contenido en su…

Cómo crear una nueva página con un diseño CSS en Dreamweaver Cómo crear una nueva página con un diseño CSS en Dreamweaver

Dreamweaver incluye dos diseños CSS diseñados con las etiquetas HTML5 que se pueden personalizar para crear una variedad aparentemente infinita de diseños de página. Estos diseños le dan una ventaja al crear una nueva página, y están…

Cómo crear un nuevo estilo de etiqueta en Adobe Dreamweaver CS6 Cómo crear un nuevo estilo de etiqueta en Adobe Dreamweaver CS6

Creando un estilo de etiqueta (o selector de tipo) En Adobe Dreamweaver CS6 es una ruta sencilla y segura para los nuevos usuarios a entender CSS porque se dirige etiquetas HTML existentes, tales como P, H1, H2 y.El uso de etiquetas existentes en su…

Cómo crear estilos con los selectores de clase e id en Dreamweaver Cómo crear estilos con los selectores de clase e id en Dreamweaver

Selectores de clase e ID en Dreamweaver tienen muchas similitudes y una diferencia clave. Estilos de identificación sólo se pueden utilizar una vez por página, pero los estilos de clase se puede utilizar tantas veces en la misma página que…

¿Cómo editar un estilo en Dreamweaver ¿Cómo editar un estilo en Dreamweaver

Usted puede cambiar los atributos de cualquier estilo en Dreamweaver después de crearlo editando su definición de estilo. Aquí es donde algunas de las mayores ventajas de Cascading Style Sheets entran en juego. Usted puede hacer cambios globales…

Cómo editar los estilos en un diseño CSS en Dreamweaver 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, usted tiene un número aparentemente infinito de opciones para editar, pero primero hay que determinar qué estilos en la hoja de estilo se corresponden con los elementos que…

Cómo modificar (AP) divs-absolutos posicionado en CS6 Adobe Dreamweaver Cómo modificar (AP) divs-absolutos posicionado en CS6 Adobe Dreamweaver

Cada Posicionado-Absoluto (AP) Div dibujar en Adobe Dreamweaver CS6 aparece automáticamente en el panel Elementos PA (elija Ventana-AP Elementos para mostrarlo). El panel Elementos PA puede ayudarle a seleccionar, ocultar y mostrar cualquier Div PA…

Cómo establecer las propiedades de página en Dreamweaver Cómo establecer las propiedades de página en Dreamweaver

Dreamweaver presenta diferentes opciones para la definición del contenido de la cabeza. Uno de ellos implica la incorporación de estilos dentro de una página, que no se recomienda. En su lugar, crear hojas de estilo externas - las hojas de estilo…

Cómo cambiar entre el modo de css y html en el inspector de propiedades de Dreamweaver Cómo cambiar entre el modo de css y html en el inspector de propiedades de Dreamweaver

El inspector de propiedades, que es accesible desde la parte inferior del espacio de trabajo de Dreamweaver, muestra las propiedades disponibles a cualquier elemento seleccionado en la página. Por lo tanto, las opciones en el inspector de…

Tabla de color celular en Adobe CS5 Dreamweaver Tabla de color celular en Adobe CS5 Dreamweaver

Usted puede cambiar colores de una sola célula, múltiples células, o una fila completa en Adobe Creative Suite 5 (CS5 de Adobe) Dreamweaver. Puede utilizar cualquiera de los dos atributos HTML estándar o utilizar reglas CSS para aplicar color a…

» » » » Modificación de diseño CSS en Adobe CS5 Dreamweaver