Reglas, cuadrículas y guías

DISEÑO DE INTERFACES WEB

REGLAS, CUADRÍCULAS Y GUÍAS
Dreamweaver proporciona varios
tipos de guías visuales que
ayudarán a diseñar documentos y
predecir de forma aproximada, cuál
será su apariencia en los
navegadores. Con l utilización de
herramientas se podrá:
• Ajustar instantáneamente el
tamaño deseado para una
ventana de documento y
comprobar si caben los elementos
REGLAS, CUADRÍCULAS Y GUÍAS
• Utilizar la cuadricula para
Reglas
lograr una mayor precisión en
la colocación y ajuste del
tamaño de las capas o
etiquetas. Las marcas de
cuadrícula de la página
ayudarán a alinear las capas y,
cuando está activada la
función de ajuste, permiten
usar automáticamente las
capas con el punto más
próximo de la cuadrícula al
reglas
1

Las reglas pueden mostrarse en los

bordes izquierdo y superior de la
página expresada en pixeles, pulgadas
o centímetros.
Cuando se desee mostrar las reglas en
Dreamweaver hay que acceder al
menú Ver/Reglas/Mostrar.
Para cambiar el origen, se arrastrará el 3
2
icono de origen de la regla, que
aparece en la esquina superior
izquierda de la vista de Diseño de la
ventana de documento cuando están
visibles las reglas, hasta cualquier
Pixeles, pulgadas o centímetros
1

Otra posibilidad que se tiene

es la de cambiar la unidad de
medida bien a pixeles,
pulgadas o centímetros según
se desee. Para ello en el menú
2 Ver/Reglas/Pixeles, Pulgadas o Centímetros.
3
GUÍAS
Otro elemento muy útil a la hora de
diseñar la página web son las Guías. Se GUÍA
emplean para extender marcas de las
reglas a lo largo del documento. Se
pueden emplear para planificar la
página, o bien se pueden agregar a
posteriori para que sirvan de ayuda a
la hora de colocar nuevos elementos
en relación con los objetos ya
existentes. Para crear una guía bastará
con hacer clic en la regla horizontal y
vertical y arrastrar el puntero del ratón
hasta colocar la guía en el lugar
deseado. De manera predeterminada,
GUÍAS COMO PORCENTAJE Y DISTANCIA ENTRE GUÍAS
GUÍA
COMO
Para registrar la guía como
PORCEN
TAJE
porcentaje, se debe presionar
la tecla {Mayús} mientras se
crea o mueve la guía.
Otra acción es la de poder
DISTAN
CIA visualizar las distancias entre
ENTRE
GUÍAS las guías. Para ello tan solo se
tiene que pulsar la tecla {Ctrl]
y desplazar el puntero del
 1

Opciones de guías
En el submenú Guía/Ver se encuentran
varias opciones que se pueden aplicar a las
guías:
• Mostrar guías: con esta opción se hará
que las guías sean visibles o por el contrario 3
se oculten.
• Ajustar a guías: el objeto que se
acerque a la guía será atraído como un imán
y quedará pegado a la guía.
• Ajustar guías a elementos: en este
caso ocurre lo contrario, será la guía la que
al acercarse al objeto quede ajustada a él.
• Bloquear guías: con esta opción no se 2
podrán mover las guías.
• Editar guías: con esta opción se abrirá
un cuadro de diálogo en el que se podrá
cambiar el color de las guías, así como las
cuadrícula
Dreamweaver facilita el uso de una
cuadrícula (visible sólo mientras se trabaja),
que puede ser útil como armazón para
ordenar los elementos en la página,
distribuir espacios y definir lugares para
marcos o tablas.
La cuadrícula será útil para lograr una
mayor precisión, colocar y ajustar el tamaño
de las etiquetas.
Las marcas de la cuadrícula de la página
ayudan a alinear las capas y, cuando está
activada la función de ajuste, permiten
ajustar automáticamente las capas con el
punto más próximo de la cuadrícula al
moverlas o ajustar su tamaño..
cuadrícula
Para mostrar la cuadrícula se desplegará el 1
menú Ver/Cuadrícula/Mostrar cuadrícula:
En este menú también se encuentra la opción
Ajustar a cuadrícula que actúa de imán sobre las
etiquetas.
Por otro lado existe la opción Configuración de
cuadrícula que permite configurar los siguientes
elementos: 2 3
Color: Especifica el color de las marcas de la
cudrícula.
Mostrar cuadrícula: Se hará visible o invisible la
cuadrícula.
Ajustar cuadrícula: Activa o desactiva la opción de
ajuste.
Espaciado: Define la distancia entre las marcas
¡MUCHAS GRACIAS
POR TU VALIOSA
ATENCIÓN!
BIBLIOGRAFÍA
Alloza, J. M. (2014). Dreamweaver CS6.
Antequera, Málaga: Iceditorial.