Tutorial de CSS en Dreamweaver

Hojas de estilo en cascada (CSS) es una forma avanzada de la codificación de la página HTML que proporciona mayores opciones de diseño y formato. En lugar de aplicar fragmentos individuales de código HTML para cada bloque de texto o sección en la página, CSS le permite definir reglas "estilo" y clases, similar a los grupos de estilos de procesamiento de texto y el software de diseño de página. A continuación, puede aplicar los estilos a los elementos en sus páginas --- haciendo formato más rápido y más fácil, así como asegurar la uniformidad en toda la página o un sitio web completo. CSS función incorporada de Dreamweaver parece complicado al principio, pero no después de haber intentado un par de veces.

Instrucciones

El uso de CSS en Dreamweaver

1 Iniciar un nuevo documento HTML de Dreamweaver o abrir un documento existente en la que desea crear reglas CSS.

2 Vaya al panel Propiedades y haga clic en el botón "CSS" que se encuentra en el lado izquierdo del panel. Esto pone en modo de Dreamweaver CSS.

3 Haga clic en la "Regla de destino" desplegable en el panel Propiedades y seleccione "<Nueva regla CSS>".

4 Haga clic en el botón "Editar regla" en el panel Propiedades. Esto abre el cuadro de diálogo Nueva regla CSS donde se nombra a su nueva regla de estilo y definir su comportamiento.

5 Haga clic en la "Selección de tipo" desplegable. Hay cuatro opciones de este menú desplegable, que tienen nombres descriptivos que explican lo que hacen. Por ejemplo, "Clase (se puede aplicar a cualquier elemento HTML)" permite crear una clase de estilo que puede aplicar a cualquier texto en el documento. "Compuesto (según la selección)" le permite crear una clase de estilo basado en texto que selecciona antes de hacer clic en "Editar regla."

6 Haga clic en el campo "Nombre de selección" y escriba el nombre de su estilo. Dependiendo de qué tipo de selección que eligió en el paso anterior, ciertos tipos de reglas de estilo requieren convenciones específicas de nombres. Por ejemplo, "Clase (se puede aplicar a cualquier elemento HTML)" requiere que el nombre del estilo se inicia con un punto (.). Por lo tanto, si usted está definiendo un estilo de encabezado, por ejemplo, usted podría nombrar el primer nivel encabezado ".h1." Usted podría nombrar el cuerpo del texto ".body". Dreamweaver le pedirá que si el convenio de denominación es incorrecta, y le proporcionará una explicación de cómo nombrar el estilo.

7 Haga clic en la "Definición de regla" desplegable y elija cómo desea que Dreamweaver para aplicar el estilo. Hay dos opciones: "Este documento sólo" crea las etiquetas de estilo en la sección del encabezado HTML de la página actual. Los estilos están disponibles sólo para esta página. "(Nuevo Estilo archivo de hoja)" crea un archivo externo CSS (.css).

El poder de CSS es que se puede dar formato a varias páginas --- basado en el mismo conjunto de reglas CSS todo un sitio ---. Esto se consigue con los archivos CSS externos. Si elige "(Nuevo archivo de hoja de estilos)," cuando hace clic en "OK" en este cuadro de diálogo, Dreamweaver le pide que nombre el archivo CSS. Si sólo utiliza un archivo CSS para todo el sitio, el estándar de la convención de nombres es "styles.css." Sin embargo, un sitio puede tener muchas hojas de estilo --- uno de los encabezados, pies de página para la otra, las barras laterales. Dé a sus archivos CSS nombres significativos.

Después de crear el primer archivo CSS externo, la próxima vez que abra Nueva regla CSS, el archivo se muestra en la definición de regla desplegable. Al crear otro estilo, asegúrese de agregar al archivo CSS externo apropiado.

8 Haga clic en "OK" para mostrar la "Definición de regla CSS para ..." cuadro de diálogo. Aquí es donde puede dar formato al estilo, como fuente, tamaño, estilo (negrita, cursiva), el color. Las opciones aquí son extensas, lo que permite el formato bastante elaborada, incluyendo cuadros de texto, fondos y muchas otras opciones de formato. Establecer todo el formato deseado para este estilo, y luego haga clic en "Aceptar".

9 Repita este proceso para crear reglas de estilo adicionales. Para aplicar un estilo a un bloque de texto, simplemente haga clic en el párrafo, y luego elegir el estilo deseado de la "Regla de destino" desplegable en el panel Propiedades.

Consejos y advertencias

• Dreamweaver viene con varias plantillas CSS predefinidos. Puede comenzar con uno de estos, en lugar de crear todos los estilos desde cero. Haga clic en "Archivo" en la barra de menú y elegir la opción "Nuevo". Esto abre el cuadro de diálogo "Nuevo documento". Haga clic en "Nuevo a partir de muestras" en la columna izquierda, y luego elija "Conjuntos de estilos CSS. A continuación, elija una de las plantillas en la columna de la derecha.
• Puede cambiar el formato de estilo en cualquier momento con Editar regla. Cuando se cambia un estilo, todo el texto etiquetado con la regla de estilo en el documento - o sitio, cuando se utiliza archivos CSS externos - cambiará automáticamente.
• Cuando subir sus páginas a Internet, asegúrese de que también sube sus archivos CSS externos.