Panel diseĂąador de css
El panel Diseñador de CSS (Ventana > Diseñador de CSS) es un inspector de propiedades de CSS que permite crear “visualmente” archivos y estilos CSS, así como definir propiedades y consultas de medios. Las siguientes secciones están disponibles en la interfaz de Diseñador de CSS: • Fuentes: una colección de archivos CSS asociados al proyecto • @Medios: consultas de medios para controlar el tamaño de la pantalla • Selectores: selectores asociados a la consulta de medios seleccionada en el panel @Medios • Propiedades: propiedades asociadas con el selector escogido, con una opción para mostrar solo las propiedades establecidas Usando el Diseñador de CSS, puede editar reglas individuales en una hoja de estilos CSS (utilice la ficha Actual del Diseñador de CSS) o, si lo prefiere, puede trabajar directamente en la hoja de estilos CSS (utilice la ficha Todo del Diseñador de CSS).
Crear y adjuntar hojas de estilo 1.
En el panel Fuentes del panel Diseñador de CSS, haga clic en y, a continuación, haga clic en una de las siguientes opciones: Crear un nuevo archivo CSS: para crear y adjuntar un nuevo archivo CSS al documento Adjuntar archivo CSS existente: para adjuntar un archivo CSS existente al documento Definir en página: para definir un CSS dentro del documento. 2. En función de la opción que elija, aparecerá el cuadro de diálogo Crear un nuevo archivo CSS o Adjuntar archivo CSS existente. 3. Haga clic en Examinar para especificar el nombre del archivo CSS y, si está creando un CSS, la ubicación en la que guardar el nuevo archivo. 4. Siga uno de estos procedimientos: • Haga clic en Vínculo para vincular el documento de Dreamweaver con el archivo CSS. • Haga clic en Importar para importar el archivo CSS al documento. 5. (Opcional) Haga clic en Uso condicional y especifique la consulta de medios que desea asociar al archivo CSS.
Definición de consultas de medios 1. 2.
3. 4.
5.
En el panel Diseñador de CSS, haga clic en una fuente de CSS en el panel Fuentes. Haga clic en + en el panel @Medios para añadir una nueva consulta de medios. Aparecerá el cuadro de diálogo Definir consulta de medios con todas las condiciones de consulta de medios que admite Dreamweaver. Seleccione las Condiciones según sus necesidades. Asegúrese de especificar valores válidos para todas las condiciones que seleccione. De lo contrario, las consultas de medios correspondientes no se crearán correctamente. Nota: solo se puede usar la operación “Y” cuando hay más de una condición. Si agrega condiciones de consulta de medios mediante código, solo se completarán las condiciones admitidas en el cuadro de diálogo Definir consulta de medios. El cuadro de texto Código del cuadro de diálogo, sin embargo, mostrará el códigocompletamente (incluidas las condiciones no admitidas). 6. Si hace clic en una consulta de medios en la vista de Diseño/en vivo, la ventana gráfica cambia para que coincida con la consulta de medios seleccionada. Para ver la ventana gráfica a tamaño completo, haga clic en Global en el panel @Medios.
Definición de selectores CSS 1. 2.
En el panel Diseñador de CSS, seleccione una fuente de CSS en el panel Fuentes o una consulta de medios en el panel @Medios. En el panel Selectores, haga clic en . Dependiendo del elemento seleccionado en el documento, el Diseñador de CSS lo identificará automáticamente y le solicitará el selector correspondiente (hasta tres reglas). Puede realizar una o varias de las siguientes acciones: • Utilice las teclas de flecha arriba o flecha abajo para que el selector sugerido sea más o menos específico. • Elimine la regla sugerida y escriba el selector necesario. Asegúrese de escribir el nombre del selector junto con la definición del Tipo de selector. Por ejemplo, si se especifica un ID, anteponga al nombre del selector un “#”. • Para buscar un selector específico, utilice el cuadro de búsqueda situado en la parte superior del panel. • Para cambiar el nombre de un selector, haga clic en el selector y escriba el nombre deseado. • Para reorganizar los selectores, arrastre los selectores hasta la posición que desee. • Para mover un selector de una fuente a otra, arrastre el selector hasta la fuente deseada del panel Fuentes. • Para duplicar un selector en la fuente seleccionada, haga clic con el botón derecho del ratón en el selector y haga clic en Duplicar. • Para duplicar un selector y añadirlo a una consulta de medios, haga clic con el botón derecho del ratón en el selector, pase el puntero del ratón por Duplicar en consulta de medios y, a continuación, elija lac onsulta de medios.
Nota: la opción Duplicar en consulta de medios solo está disponible cuando la fuente del Selector seleccionado contiene consultas de medios. No se puede duplicar un selector de una sola fuente en la consulta de medios de otra fuente.
Copia y pegado de estilos Ahora puede copiar estilos de un selector y pegarlos en otro. Puede copiar todos los estilos o copiar solamente categorías específicas de estilos, como diseños, textos y bordes. Haga clic con el botón derecho en un selector y elija entre las opciones disponibles: • Si un selector no tiene ningún estilo, se desactivan las opciones Copiar y Copiar todos los estilos. • Pegar estilos se desactiva para los sitios remotos que no se puedan editar. Sin embargo, las opciones Copiar y Copiar todos los estilos están disponibles. • Es posible pegar estilos que ya existen parcialmente en un selector (superposición). Se pega la unión de todos los selectores. • La copia y el pegado de estilos también funcionan para diferentes vínculos de archivos CSS: estilos importados, vinculados y en línea.
Reorganización de los selectores Haga clic en el selector que quiera y arrástrelo a su nueva posición dentro del panel Selectores. Definición de las propiedades CSS Las propiedades se agrupan en las siguientes categorías y se representan mediante distintos iconos en la parte superior del panel Propiedades: • Diseño • Texto • Borde • Fondo • Más (lista de propiedades “solo texto”, sin propiedades con controles visuales) Nota: antes de editar las propiedades de un selector CSS, identifique los elementos que tiene asociados mediante la inspección inversa. Al hacerlo, podrá saber si todos los componentes resaltados durante la inspección inversa requieren realmente cambios. Seleccione la casilla de verificación Mostrar conjunto para ver solo las propiedades establecidas. Para ver todas las propiedades que se pueden especificar para un selector, anule la selección de la casilla de verificación Mostrar conjunto. Para definir una propiedad, como por ejemplo width o border-collapse, haga clic en las opciones requeridas que se muestran junto a la propiedad en el panel Propiedades. Las propiedades que se han anulado aparecen tachadas.
Establecimiento de márgenes, relleno y posición Los controles de cuadro del panel Propiedades del Diseñador de CSS le permiten definir rápidamente márgenes, rellenos y propiedades de posición. Si prefiere usar código, puede especificar el código abreviado de margen y relleno en los cuadros de edición rápida, como se puede ver en este ejemplo. Haga clic en los valores y escriba el valor en cuestión. Si desea que los cuatro valores sean iguales y cambien simultáneamente, haga clic en el icono de vínculo en el centro. Cuando quiera, podrá deshabilitar o eliminar valores específicos, por ejemplo, el valor de margen izquierdo, conservando los valores derecho, superior e inferior. Establecimiento de propiedades de borde Las propiedades de Control de bordes se organizan en fichas lógicas para ayudarle a ver o modificar las propiedades de forma rápida. Si prefiere usar códigos, puede especificar el código de la forma abreviada para los bordes y los radios de bordes en los cuadros de edición rápida. Para especificar las propiedades de Control de bordes, establezca primero las propiedades de la ficha “todos los lados”. Posteriormente, se activarán las demás fichas y se reflejarán las propiedades definidas en la ficha “todos los lados” en cada uno de los bordes. Cuando cambie una propiedad en las fichas de los distintos bordes, el valor de la propiedad correspondiente en la ficha “todos los lados” pasará a “no definido” (valor predeterminado). En el siguiente ejemplo, el color de borde se definió en negro y luego se cambió a rojo para el borde superior.
El código que se inserta se basa en la configuración de preferencias para la forma abreviada o sin abreviar. Durante la inspección, las fichas se examinan en función de la prioridad de las fichas “definidas”. La máxima prioridad recae en la ficha “todos los lados”, seguida de las fichas “superior”, “derecha”, “inferior” e “izquierda”. Por ejemplo, si solo se define el valor superior de un borde, el modo calculado se concentra en la ficha “superior” e ignora la ficha “todos los lados” porque esta no se ha definido.
Desactivación o eliminación de propiedades La función Deshabilitar/Activar propiedad CSS le permite convertir en comentarios partes del código CSS desde el panel Estilos CSS sin tener que realizar cambios directamente en el código. Al convertir en comentarios partes del código CSS, podrá comprobar los efectos que provocan en la página determinadas propiedades y valores. Al deshabilitar una propiedad CSS, Dreamweaver añade etiquetas de comentario CSS y una etiqueta [disabled] a la propiedad CSS que ha deshabilitado. Posteriormente podrá volver a activar o eliminar fácilmente la propiedad CSS deshabilitada conforme a sus preferencias. El Diseñador de CSS permite desactivar o eliminar todas las propiedades. La siguiente captura de pantalla muestra los iconos para deshabilitar y eliminar la propiedad width. Estos iconos son visibles al pasar el ratón sobre la propiedad.
También puede usar los controles de eliminación y desactivación en el nivel de grupo Control de bordes para aplicar estas acciones a todas las propiedades. Métodos abreviados de teclado Puede añadir o eliminar selectores y propiedades de CSS mediante métodos abreviados de teclado. También puede desplazarse entre los grupos de propiedades en el panel Propiedades.
Identificar los elementos de página asociados a un selector CSS La mayoría de las veces hay un solo selector CSS asociado a varios elementos de página. Por ejemplo, el texto del contenido principal de una página, un encabezado y el texto de un pie de página pueden asociarse al mismo selector CSS. Cuando edite las propiedades del selector CSS, todos los elementos asociados al selector se verán afectados, incluidos los que no va a cambiar. El Resaltado en vivo le ayuda a identificar todos los elementos asociados a un selector CSS. Si desea cambiar un solo elemento o varios elementos, puede crear un nuevo selector CSS para
dichos elementos y luego editar las propiedades. Para identificar los elementos de página asociados a un selector CSS, pase el ratónsobre el selector de Vista en vivo (con Código en vivo en “desactivado”). Dreamweaver resalta los elementos asociados con líneas de puntos. Para bloquear el resaltado de los elementos, haga clic en el selector. Los elementos se resaltan con un borde azul. Para eliminar el resaltado azul alrededor de los elementos, haga clic de nuevo en el selector. El Resaltado en vivo está activado de forma predeterminada. Para desactivar el Resaltado en vivo, haga clic en Opciones de Vista en vivo en la barra de herramientas Documento y haga clic en Desactivar resaltado en vivo. Vinculación a una hoja de estilos CSS externa Si edita una hoja de estilos CSS externa, todos los documentos vinculados a esa hoja se actualizarán para reflejar los cambios. Puede exportar los estilos CSS de un documento para crear una nueva hoja de estilos CSS, así como adjuntar o vincular dichos estilos a una hoja de estilos externa para aplicarlos. Puede adjuntar a las páginas cualquier hoja de estilos que cree o copie en el sitio. 1.
2.
Abra el panel Diseñador de CSS mediante uno de estos procedimientos: • Seleccione Ventana > Diseñador de CSS. • Presione Mayús + F11. En el Diseñador de CSS, haga clic en el icono + situado junto a Fuentes y seleccione Adjuntar archivo CSS existente. Adjuntar archivo CSS existente
3.
4.
5.
Siga uno de estos procedimientos: • Haga clic en Examinar para localizar una hoja de estilos CSS externa. • Escriba la ruta de la hoja de estilos en el cuadro Archivo/URL. Haga clic en el botón Vista previa para verificar que la hoja de estilos aplica los estilos que desea en la página actual. Si los estilos aplicados no tienen el efecto que esperaba, haga clic en Cancelar para eliminar la hoja de estilos. La página recuperará su aspecto anterior. Haga clic en OK.