Dentro del programa Adobe Dreamweaver se puede realizar la maquetación de una página web con el objetivo de facilitar el trabajo de estructuración tanto para los elementos creados como para maquetar tablas y marcos.

Para realizar la maquetación de una página web es necesario utilizar medidas exactas de los elementos que se van a colocar dentro de ella para que se alineen exactamente y visualmente aparezcan ordenados según el diseño que ha elegido.

Adobe Dreamweaver CS4 cuenta con reglas, guías, cuadrículas e imágenes de rastreo, los cuales tienen varias ventajas que les facilita a los diseñadores al momento de maquetar una web.

Las reglas

Conocidas también como herramienta de maquetación de Dreamweaver, la cual se emplea en otros programas y que aparecen en el borde izquierdo y superior de la Vista de Diseño. Además esta herramienta cuenta con escalas que se dan a conocer a través de los pixeles, centímetros o pulgadas, esto dependerá de cómo el usuario lo haya configurado. Dentro de estas reglas aparece marcada la posición de puntero con una línea punteada. Cuando el puntero es desplazado las líneas continúa el movimiento del mismo brindando siempre la posición exacta.

Para saber la posición de un determinado elemento solo tiene que posar el puntero en el punto de origen del elemento y ver la lectura que arroja en la regla.

Configuración de las reglas

Si quiere activar o desactivar la regla debe ir a Ver / Reglas / Mostrar, hace clic en mostrar y se activará o desactivará la vista de las reglas. Para mayor rapidez puede teclear Ctrl + Alt + R.

Asimismo, dentro del menú podrá configurar las otras propiedades de la regla. Por ejemplo, más abajo puede seleccionar la unidad de longitud la cual se emplea para las reglas.

En la esquina superior izquierda donde se unen ambas reglas hay un pequeño cuadrado, si hace clic en este y desplaza el puntero con el botón izquierdo presionado, el punto de origen se podrá desplazar hasta el punto del diseño que queramos. Con esta herramienta podrá instalar el 0 de ambas reglas.

Las guías

Son líneas horizontales o verticales que pueden colocarse en cualquier parte del diseño con el objetivo de facilitar la alineación de objetos o marcar las dimensiones de las diferentes resoluciones de pantalla. Cabe señalar que estás líneas solo se pueden ver en “Vista de diseño”, desapareciendo en la “Vista en vivo”.

Estas líneas guías para que se activen primero deben estar activadas las reglas, luego para crear una de estas debe arrastrar el puntero desde una de las reglas y soltar el botón en el punto donde deseamos colocarla.

Posteriormente, las guías pueden desplazarse haciendo clic sobre ellas y desplazándolas. Si usted desea eliminar alguna solo arrástrela hasta la regla correspondiente. Si se desean borrar todas las guías a la vez, seleccione Ver / Guías / Borrar guías.

Para ocultar y mostrar las guías sin eliminarlas y crear nuevas, utilice la opción correspondiente en el menú. Asimismo, las guías pueden bloquearse empleando la opción Bloquear Guías del menú.

La posición de las guías puede ajustarse a los elementos, empleando la opción “Ajustar guías a elementos”, con lo que cuando desplazamos una guía y nos acercamos a un elemento, la guía se tratará de ajustar al mismo. Otra opción es ajustar los elementos a las guías, empleando la opción del menú que corresponde, con lo que los elementos que desplacemos (siempre que tengan posición absoluta), se ajustarán a la guía en cuanto estén próximos a ella.

Sin duda, las líneas guías son de mucha ayuda para la estructuración y maquetación de una página web. Como veremos estás herramientas pueden ser empleadas para la maquetación de una website de otros elementos que se encuentran dentro del diseño.