comparte el articulo 

Herramientas de maquetación web de Adobe Dreamweaver CS4

Actualizado el 28/06/2010 < > 0 Comentarios

Resumen: Adobe Dreamweaver CS4 cuenta con herramientas que facilitan notablemente la maquetación de páginas web.

Una de las características distintivas de Adobe Dreamweaver es que presenta una serie de herramientas destinadas a facilitar la tarea de maquetación, tanto para los elementos creados mediante la utilización de capas (divs) como para maquetar tablas y marcos.

La maquetación de páginas web requiere de la utilización de medidas precisas de sus elementos, de forma que estos se alineen perfectamente y aparezcan visualmente ordenados de una forma determinada, de acuerdo al diseño que se ha elegido. Por ejemplo, es frecuente que queramos que un elemento esté perfectamente alineado con otro, por lo que deberemos utilizar, o bien mediciones perfectas, o alguna herramienta que facilite la visualización de la alineación de los elementos.

Adobe Dreamweaver CS4 cuenta con reglas, guías, cuadrículas e imágenes de rastreo, elementos que brindan grandes ventajas a los diseñadores a la hora de maquetar una página web.

Las reglas

La más conocida de todas las herramientas de maquetación de Dreamweaver son las reglas, ya que este tipo de herramientas se emplean en muchos otros programas. Se trata de reglas que aparecen en el borde izquierdo y superior de la Vista de Diseño y que cuentan con escalas expresadas en pixeles, centímetros o pulgadas, según como se hayan configurado. En estas reglas aparece marcada la posición del puntero con una línea punteada. En la medida que el puntero es desplazado, estas líneas siguen el movimiento del mismo, brindando siempre la posición extacta.

Cuando se desea saber la posición de un determinado elemento, basta con posar el puntero en el punto de origen del elemento y ver la lectura que arroja en las reglas.

Configuración de las reglas

Para activar y desactivar las reglas, se debe ir a “Ver / Reglas / Mostrar”. Haciendo clic sobre “Mostrar” se activará o desactivará la vista de las reglas. Esto también puede hacerse empleando las teclas del método abreviado “Ctrl + Alt + R”.

En el mismo menú se configura el resto de las propiedades de las reglas. Por ejemplo, más abajo puede seleccionarse la unidad de longitud que se empleará para las reglas, tal como puede observarse en la siguiente imagen, donde también aparece una función que veremos más adelante

Las reglas en el menú

En la unión de ambas reglas, en la esquina superior izquierda, aparece un pequeño cuadrado. Cuando se hace clic en este cuadrado y se desplaza el puntero con el botón izquierdo presionado, se puede desplazar el punto de origen de las reglas hasta el punto del diseño que deseemos. Con esta herramienta, podremos instalar el 0 de ambas reglas, por ejemplo, en el origen de un elemento determinado, de forma que las reglas sirvan para establecer las dimensiones del mismo. En la siguiente imagen, vemos a la izquierda a ambas reglas con su origen en cero, mientras que en la imagen de la derecha vemos el desplazamiento del puntero con el origen de las reglas hacia otro punto del diseño.

Vista de las reglas

Para restablecer el punto de origen de las reglas, basta con ir a “Ver / Reglas / Restablecer origen” para que las reglas marquen como cero al extremos superior izquierdo del diseño.

Las guías

Las guías son líneas horizontales o verticales que pueden colocarse en cualquier parte del diseño para facilitar la alineación de objetos o marcar las dimensiones de las diferentes resoluciones de pantalla. Estas líneas solo se muestran en la “Vista de diseño”, desapareciendo en la “Vista en vivo”.

Guías

Para instalar una línea guía en el diseño, en primer lugar deben estar activadas las reglas. Para crear una línea guía, hay que arrastrar el puntero desde una de las reglas (para crear una guía vertical, desde la regla izquierda; para crear una guía horizontal, desde la regla superior) y soltar el botón en el punto donde deseamos instalarla.

Luego de colocada en un lugar, las guías pueden desplazarse haciendo clic sobre ellas y desplazándolas. Para eliminar una guía, basta con arrastrarla hasta la regla correspondiente. Si se desean borrar todas las guías a la vez, hay que seleccionar “Ver / Guías / Borrar guías”, como se muestra en la siguiente imagen.

Guías en el menú

También es posible ocultar y mostrar las guías sin necesidad de borrar y crear nuevas, empleando la opción correspondiente en el menú. Para evitar que se produzcan borrados o movimientos no deseados, 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.

Para desplazar una guía a una posición concreta, dada en unidades de longitud, hay que hacer doble clic en la guía, con lo que se abrirá un cuadro que mostrará un campo donde puede introducirse un valor numérico y una lista con las unidades que se pueden emplear. Una vez que se hace clic en “Aceptar”, la guía se establecerá en el punto deseado.

Si se desea conocer la distancia que existe entre dos guías, basta con colocar el puntero entre ellas y presionar la tecla Ctrl. Automáticamente aparecerá la distancia que existe entre las guías, dadas en la misma unidad que las que tienen las reglas, tal como se muestra en la siguiente imagen:

Distancias entre guías

Una utilidad interesante de las guías es que es posible emular las dimensiones de distintas resoluciones de pantalla, empleando para ello las opciones que hemos visto en el menú “Ver / Guías”. Automáticamente dos guías se ubicarán en los límites vertical y horizontal de dicha resolución.

Las guías pueden ser configuradas para su visualización por defecto. Para ello hay que seleccionar “Ver / Guías / Editar guías”, donde se podrá modificar el color, el color en que se muestran las distancias, además de otras opciones que ya hemos visto en este tutorial. Una vez que se han modificado estos parámetros, éstos aparecerán por defecto en todas las guías que utilicemos, aún cuando reiniciemos el programa.

Configuración de guías

Cuadrícula de diseño

La cuadrícula es una serie de líneas horizontales y verticales que aparecen superpuestas al diseño (aunque no forman parte del mismo), que sirven para tener una mayor precisión en la ubicación de los diferentes elementos del diseño.

Al igual que las guías, la cuadrícula puede mostrarse u ocultarse, debiendo emplearse la opción “Ver / Cuadrícula / Mostrar cuadrícula”. También puede hacerse que los elementos del diseño con posición absoluta se ajusten a la misma.

La configuración de la cuadrícula permite seleccionar el color de las líneas que la conforman, definir el espaciado entre las líneas, si se mostrarán como líneas o puntos, y las opciones ya vistas de mostrar y ocultar y de ajuste.

Imagen de rastreo

Una de las opciones más interesantes con que cuentan las ayudas para la maquetación, es la posibilidad de insertar una imagen de rastreo. Esta imagen puede insertarse para ser utilizada como guía para el diseño, siendo visible solo en la “Vsita de diseño”, sin que afecte la visualización del diseño en un navegador.

Para colocar una imagen de rastreo, hay que seleccionar “Ver / Imagen de rastreo / Cargar”, tras lo cual se abre un cuadro que nos permitirá cargar una imagen de guía. Posteriormente, tal como puede hacerse con las guías y cuadrícula, esta imagen puede mostrarse u ocultarse.

En este mismo menú puede abrirse un cuadro que permite ajustar la posición de la imagen de rastreo, en el cual pueden introducirse las coordenadas x e y en valores numéricos con unidades de longitud. Una vez modificada la posición de la imagen de rastreo, ésta puede ser restablecida, empleando la opción correspondiente en el menú. Siempre que se utilice esta opción, se restablecerá la imagen a la primera posición en que se emplazó.

Se puede alinear la imagen de rastreo con otro elemento que se encuentra en el diseño. Para ello emplearemos la opción “Ver / Imagen de rastreo / alinear con selección”, tras lo que la esquina superior izquierda de la imagen de rastreo se alineará con la esquina superior izquierda del elemento seleccionado.

Conclusión

Estas herramientas hacen que la tarea de maquetación de una página web empleando Adobe Dreamweaver sea más sencilla. Como veremos en otros artículos, estas opciones no son solo útiles para la maquetación general del diseño, sino que también pueden ser empleadas para la maquetación de otros elementos dentro del diseño, como por ejemplo, durante la creación de tablas.

Publicado el 28/06/2010, última actualización 28/06/2010.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras