Manejo de reglas en css

Solo disponible en BuenasTareas
  • Páginas : 6 (1261 palabras )
  • Descarga(s) : 0
  • Publicado : 15 de agosto de 2012
Leer documento completo
Vista previa del texto
MANEJO DE REGLAS CSS EN DREAMWEAVER
Las facilidades de trabajo que ofrece Adobe Dreamweaver incluyen la edición y creación de reglas y propiedades CSS. Cuando nos encontramos realizando un diseño, necesitaremos inevitablemente generar nuevas reglas en la medida que se vayan introduciendo nuevos elementos dentro del mismo.
No tendría ningún sentido contar con un programa WYSIWYG para la creaciónde páginas web, si necesitáramos crear todo o buena parte de los códigos de los archivos CSS en forma manual. Adobe Dreamweaver brinda la posibilidad de realizar el ingreso de nuevas reglas y propiedades CSS y su posterior edición, sin necesidad de salir de la ventana de edición.
A continuación, explicaremos como utilizar esta herramienta. Para ejemplificar cada uno de los pasos que daremos,tomaremos la misma página de ejemplo que hemos utilizado para el artículo anterior. En caso de no haberlo leído, es conveniente que sigan los pasos allí descritos, para lo cual deberán acceder al artículo desde aquí.
Ubicación de las herramientas
Cuando nos encontremos diseñando una página, es conveniente que el cuadro de “Estilos CSS” se encuentre abierto, ya que desde allí podremos crear ymodificar todos los estilos, mientras estamos visualizando los resultados.
Para abrir el cuadro, debemos hacerlo desde el menú “Ventana / Estilos CSS” o con el método abreviado “Mayús+F11”. De inmediato, en la columna izquierda de la ventana del programa, donde seguramente ya se encontrarán otros cuadros, se abrirá el cuadro de edición CSS.
Para desplegar dicho cuadro, tal como se realiza con otroscuadros, basta con hacer clic en la pestaña correspondiente, desplegándose el cuadro en la misma columna. Para retirarlo de la ventana y trasladarlo a otra parte de la página, se hace mediante el método de arrastrar desde la propia pestaña.
El cuadro aparece dividido en tres secciones, cuyos tamaños pueden modificarse desde la ventana que encabeza cada una de estas secciones. La posición del cuadrodentro de la columna que contiene los cuadros puede modificarse también arrastrando con el puntero.

Edición de reglas CSS existentes
Esto se aplica a los elementos del diseño que ya han sido creados y que tienen sus reglas y propiedades definidas.
Selección del elementos cuyas reglas y propiedades van a modificarse
Para seleccionar las reglas CSS a editarse, hay dos métodos que se puedenemplear. El primero es seleccionar el elemento cuyas propiedades se van a editar desde la vista de diseño. Si el elemento es texto o imagen, basta con hacer clic en cualquier parte de los mismos. De inmediato aparecerán las reglas y propiedades que definen al elemento en el cuadro.
Si el elemento es una capa (div) o una tabla (table), se debe hacer clic en el borde del elemento. En este caso,aparecerán las reglas que definen a la capa o la tabla, así como las de todos los elementos padre del mismo. Por ejemplo, para editar las reglas y propiedades del encabezado (nos referimos a la capa encabezado), haremos clic en el borde del mismo. El resultado es igual al que se muestra en la imagen anterior.
Modificación e introducción de propiedades
En la parte superior del cuadro, hay dos pestañasque permiten seleccionar entre ver todas las reblas o la actual (seleccionada). Al seleccionar la última, aparecen tres divisiones iguales a las que se muestran en la imagen. En la división superior aparecen todas las propiedades del elemento, aún aquellas que no están especificadas y tienen valores por defecto.
En la división del centro, se muestran la regla involucrada y todos sus padres,hasta llegar a “body”. En la división inferior aparecen las propiedades que figuran en el archivo CSS a la izquierda, mientras que los valores respectivos aparecen a la derecha. Esta sección es editable, bastando para ello hacer clic en la celda que se pretende editar e introducir los nuevos valores.
En la última fila aparece una celda a la izquierda que dice “Añadir Propiedad”. Haciendo clic en...
tracking img