Reglas guias y cuadriculas, imagen de rastreo

Introducción

 Antes de comenzar a trabajar con los elementos que conforman una página web, vamos a estudiar algunas herramientas de Dreamweaver que sirven para asistir el diseño e incluso algunas más que sirven para dar mantenimiento a páginas ya creadas. Usarlas o no es opcional. Sin embargo, son particularmente útiles en diversas tareas. Por ejemplo, como referencia cuando insertamos o re-dimensionamos una imagen o un elemento estructural HTML. Las imágenes de rastreo, en otros casos, sirven como moldes para el diseño. A su vez, la vista En vivo nos puede servir para hacer ajustes en una página sin regresar a la vista Diseño, viendo además el resultado de inmediato.

Los elementos que vamos a estudiar son:

• Reglas y guías
• Cuadrículas
• Imagen de rastreo
• Edición en la vista En vivo
• Vista rápida de elementos
• Guías interactivas
• Selección inversa

A lo largo del curso podremos usar estas herramientas en diversos momentos según tengamos necesidad de las mismas.

Reglas, guías y cuadrícula

Cuando trabajamos en la vista Diseño, podemos activar las reglas, horizontal y vertical, que aparecerán en la parte izquierda y superior del área de trabajo, a través del menú Ver, opción Reglas, después Mostrar. Como podemos ver, podemos establecer las unidades de medida que presentarán las reglas, pixeles, pulgadas o centímetros.

Lo más recomendable es utilizar pixeles, ya que es una unidad común para establecer el tamaño en el que las distintas pantallas y dispositivos presentan las páginas web.

Las reglas en el área del documento se ven así:

Observa que en la esquina superior izquierda están los valores de origen, es decir, cero horizontal y cero vertical. Podemos cambiar ese valor de origen para, por ejemplo, medir una sección que estemos diseñando en nuestra página. Eso es tan simple como hacer clic y desplazar el cuadro que está exactamente en la esquina. Unas líneas nos mostrarán dónde podemos ubicar el nuevo origen, tanto vertical como horizontalmente.

 

Como puedes observar en la imagen del menú, tenemos también la opción Restablecer origen, que devuelve la regla a su posición original.

Otra ventaja que nos da el uso de las reglas es que podemos derivar de ellas líneas guías. De la regla superior derivamos líneas horizontales y verticales de la que está a la izquierda. Para ello, debemos hacer clic en la regla deseada y sin soltar el botón izquierdo del ratón, desplazamos sobre el área del documento y soltamos en el punto donde deseamos la línea. Una etiqueta te irá mostrando el punto en el que se encuentra la línea. Obviamente, estas guías no van a formar parte de nuestra página, sólo nos servirán de referencia para la ubicación y/o re-dimensionamiento de los objetos.

Podemos ubicar tantas líneas guías como consideremos necesario para el diseño de nuestra página. Para eliminarlas, basta con "tomarlas" con el ratón y desplazarlas hasta la regla correspondiente. Otra ventaja que presentan, es que podemos ver la distancia entre líneas guías ahí donde ubicamos el cursor cuando pulsamos la tecla CTRL (Control).

Otra herramienta similar a las anteriores es la cuadrícula. Ésta aparece en el fondo del área del documento en la vista Diseño. Para activarla utilizamos el menú Ver, opción Cuadrícula, Mostrar cuadrícula.

La apariencia del área del documento sería ahora así:

El color de la cuadrícula, si se presenta como líneas o puntos y su distancia se establecen con el menú Ver, Cuadrícula, opción Configuración de cuadrícula.

La opción Ajustar a cuadrícula sirve para "atraer" objetos a las líneas de la cuadrícula cuando los movemos el cursor, pero esto sólo funciona cuando dichos objetos tienen posición absoluta. Esto será tema de estudio más adelante.

Imagen de rastreo

Podríamos definir a las imágenes de rastreo como fondos en el área de documento que sirven de moldes para el diseño de nuestra página web. Este fondo no forma parte de la propia página, por supuesto.

Para insertar una imagen de rastreo, utilizamos el menú Ver, Imagen de rastreo y luego la opción Cargar.

Podemos seleccionar una imagen de cualquiera de los formatos más comunes, .jpg, .png, .gif, etcétera. En cualquier caso, después de seleccionar el archivo, se abre el cuadro de diálogo Propiedades de la página, en la categoría Imagen de rastreo.

También llegamos a este cuadro de diálogo a través del menú Modificar, Propiedades de página y luego seleccionando la categoría correspondiente.

En este cuadro no sólo vemos la ruta al archivo de imagen, sino además podemos establecer su grado de transparencia.

Al final tendremos un fondo en el área del documento que, como ya mencionamos, no será parte de nuestra página, pero nos servirá para irla confeccionando. Su apariencia podría ser algo como esto: