Arrastre la guía desde la regla correspondiente.
Última actualización el
27/04/2021
Utilice las ayudas visuales para diseñar en Dreamweaver, que incluyen la configuración de las reglas y de las guías de diseño, así como la utilización de guías con plantillas, cuadrículas de diseño e imágenes de rastreo.
Establecimiento de reglas
Reglas te ayudan a medir, organizar y planificar el diseño.Pueden aparecer en los bordes izquierdo y superior de la página, marcadas en píxeles, pulgadas o centímetros.
- Para activar y desactivar las reglas, elija Ver > Reglas > Mostrar/Ocultar.
- Para cambiar el origen, arrastre a cualquier parte de la página el icono de origen de la regla
(situado en la esquina superior izquierda de la vista Diseño de la ventana de documento). - Para restablecer el origen a su posición predeterminada, seleccione Ver > Opciones de vista de diseño > Restablecer origen.
- Para cambiar la unidad de medida, seleccione Ver > Reglas y elija Píxeles, Pulgadas o Centímetros.
Establecimiento de guías de diseño
Guides son líneas que arrastras al documento desde las reglas.Te ayudan a colocar y alinear objetos con mayor precisión.También puedes usar Guides para medir el tamaño de elementos de página, o emular los pliegues (áreas visibles) de navegadores web.
Para ayudarte a alinear elementos, puedes ajustar elementos a guías y ajustar guías a elementos.(Los elementos deben estar posicionados de forma absoluta para que la función de ajuste funcione.) También puedes bloquear Guides para evitar que se muevan accidentalmente por otro usuario.
Crear una guía horizontal o vertical
Coloca la guía en la ventana Documento y suelta
el botón del ratón (reposiciona la guía arrastrándola de nuevo).
Nota
De forma predeterminada, las guías se registran como medidas absolutas en píxeles desde la parte superior o izquierda del documento y se muestran en relación con el origen de la regla.Para registrar la guía como porcentaje, presiona la tecla Mayús mientras creas o mueves la guía.
Visualización u ocultación de guías
seleccionar Ver > Guides >
Mostrar Guides.
Ajuste de elementos a las guías
- Para ajustar elementos a guías, seleccione Ver > Opciones de vista de diseño> Guías > Ajustar a guías.
- Para ajustar guías a elementos, seleccione Ver > Opciones de vista de diseño> Guías > Ajustar guías a elementos.
Nota
Puede cambiar el tamaño de elementos, como elementos con posición absoluta (elementos PA), tablas e imágenes; los elementos cuyo tamaño cambia se ajustan a las guías.
Bloqueo o desbloqueo de todas las guías
Seleccione Ver > Opciones de vista de diseño> Guías > Bloquear guías.
Ver y mover una guía a una posición específica
Mantenga el puntero del ratón sobre la guía para ver su posición.
Haga doble clic en la guía.
Introduzca la nueva posición en el cuadro de diálogo Mover guía y haga clic en Aceptar.
Visualización de la distancia entre guías
Pulse Control (Windows) o Comando (Macintosh) y mantenga el puntero del ratón en cualquier lugar entre las dos guías.
Nota
La unidad de medida es la misma que la unidad de medida usada para las reglas.
Emular el pliegue (área visible) de un explorador web
Seleccione Ver > Opciones de vista de diseño > Guías y luego seleccione un tamaño de navegador predefinido del menú.
Eliminación de una guía
Arrastre la guía hacia fuera del documento.
Cambio de la configuración de guías
Seleccione Ver > Opciones de vista de diseño > Guías > Editar guías, establezca las siguientes opciones y haga clic en OK.
Color de guías
Establece el color de las líneas de la guía. Haga clic en la muestra de color y seleccione un color del selector de color, o escriba un número hexadecimal en el cuadro de texto.
Color de distancia
Especifica el color de las líneas que aparecen como indicadores de distancia cuando mantienes el puntero del ratón entre las guías.Haga clic en la muestra de color y seleccione un color del selector de color, o escriba un número hexadecimal en el cuadro de texto.
Mostrar guías
Hace que las guías estén visibles en la vista Diseño.
Ajustar a guías
Hace que los elementos de página se ajusten a las guías mientras mueves elementos por la página.
Bloquear guías
Bloquea las guías en el lugar en que se encuentran.
Ajustar guías a elementos
Ajusta las guías a los elementos de la página al arrastrar las guías.
Borrar todo
Borra todas las guías de la página.
Utilización de guías con plantillas
Cuando se agregan guías a una plantilla de Dreamweaver, todas las instancias de la plantilla heredan las guías.Guides en las instancias de plantilla, sin embargo, se tratan como regiones editables, por lo que los usuarios pueden modificarlas.Las guías modificadas en las instancias de plantilla se restauran a su ubicación original cada vez que la instancia se actualiza con la plantilla principal.
También puede añadir sus propias guías a instancias de una plantilla. Los Guides añadidos de esta manera no se sobrescriben cuando la instancia de plantilla se actualiza con la plantilla maestra.
Uso de la cuadrícula de diseño
La cuadrícula muestra un sistema de líneas horizontales y verticales en la ventana del documento. Es útil para colocar objetos con precisión. Puedes hacer que los elementos de página con posición absoluta se ajusten automáticamente a la cuadrícula mientras los mueves, y cambiar la cuadrícula o controlar el comportamiento de ajuste especificando la configuración de la cuadrícula. El ajuste funciona tanto si la cuadrícula es visible como si no.
Visualización u ocultación de la cuadrícula
Seleccione Ver > Opciones de vista de diseño > Cuadrícula > Mostrar cuadrícula.
Activación o desactivación del ajuste
Seleccione Ver > Opciones de vista de diseño > Cuadrícula > Ajustar a cuadrícula.
Cambio de la configuración de cuadrícula
Seleccione Ver > Opciones de vista de diseño > Cuadrícula > Configuración de cuadrícula.
Configure las opciones y haga clic en OK para aplicar los cambios.
Color
Establece el color de las líneas de la cuadrícula. Hacer clic en la muestra de color y seleccionar un color del selector de color, o escribir un número hexadecimal en el cuadro de texto.
Mostrar cuadrícula
Hace que la cuadrícula esté visible en la vista Diseño.
Ajustar a cuadrícula
Hace que los elementos de la página se ajusten a las líneas de la cuadrícula.
Espaciado
Controla la separación entre las líneas de la cuadrícula. Introducir un número y seleccionar Píxeles, Pulgadas o Centímetros del menú.
Visualización
Especifica si las líneas de la cuadrícula deben mostrarse como líneas o como puntos.
Nota
Si Mostrar cuadrícula no está seleccionado, la cuadrícula no aparece en el documento y no se ven cambios.
Utilización de una imagen de rastreo
Puedes usar una imagen de rastreo como guía para recrear un diseño de página que fue creado en una aplicación gráfica como Adobe Freehand o Fireworks.
Una imagen de rastreo es una imagen JPEG, GIF o PNG que se coloca en el fondo de la ventana del documento.Puedes ocultar la imagen, establecer su opacidad y cambiar su posición.
La Imagen de rastreo solo es visible en Dreamweaver; no es visible cuando ves la página en un explorador. Cuando la Imagen de rastreo es visible, la imagen de fondo real y el color de la página no son visibles en la ventana del documento; sin embargo, la imagen de fondo y el color serán visibles cuando la página se vea en un explorador.
Colocar una imagen de rastreo en la ventana del documento
Siga uno de estos procedimientos:
Seleccione Ver > Opciones de vista de diseño > Imagen de rastreo > Cargar.
Seleccione Archivo > Propiedades de la página y, a continuación, en la categoría Imagen de rastreo, haga clic en Examinar (situado junto al cuadro de texto Imagen de rastreo).
Navegue hasta el archivo de imagen y haga clic en OK.
En el cuadro de diálogo Propiedades de página, especifique la transparencia de la imagen arrastrando el regulador de Transparencia de imagen y, a continuación, haga clic en Aceptar.
Para cambiar a otra imagen de rastreo o cambiar la transparencia de la imagen de rastreo actual en cualquier momento, seleccione Archivo > Propiedades de la página.
Visualización u ocultación de la imagen de rastreo
Seleccione Ver > Opciones de vista de diseño > Imagen de rastreo > Mostrar.
Cambiar la posición de una imagen de rastreo
Seleccione Ver > Opciones de vista de diseño > Imagen de rastreo > Ajustar posición.
Para especificar con precisión la posición de la imagen de rastreo, introduzca valores de coordenadas en los cuadros de texto X e Y.
Para mover la imagen 1 píxel cada vez, utilice las teclas de flecha.
Para mover la imagen 5 píxeles cada vez, presione Mayús y una tecla de flecha.
Restablecer la posición de la imagen de rastreo
Seleccione Ver > Opciones de vista de diseño > Imagen de rastreo > Restablecer posición.
La imagen de rastreo vuelve a la esquina superior izquierda de la ventana del documento (0,0).
Alinear la imagen de rastreo con un elemento seleccionado
Seleccionar un elemento en la ventana Documento.
Seleccione Ver > Opciones de vista de diseño > Imagen de rastreo > Alinear con selección.
La esquina superior izquierda de la imagen de rastreo se alinea con la esquina superior izquierda del elemento seleccionado.
Establecer propiedades de imagen de rastreo
Establece propiedades para una imagen de rastreo (que es un archivo de imagen que se utiliza como guía para diseñar tu página).
Siga uno de estos procedimientos:
- Haga clic en Archivo > Propiedades de página
- Haga clic en Ventana > Propiedades y, a continuación, haga clic en Propiedades de página en el Inspector de propiedades de texto.
En el cuadro de diálogo Propiedades de página, seleccione Imagen de rastreo Puede configurar las siguientes opciones de este panel:
- Imagen de rastreo: Especifica una imagen que sirve de guía para copiar un diseño.Esta imagen solo sirve como referencia, ya que no aparece cuando el documento se muestra en un navegador.
- Transparencia: Determina la opacidad de la imagen de rastreo, desde completamente transparente hasta completamente opaca.
Crear sitios web atractivos en Dreamweaver
Diseña, codifica y gestiona sitios web dinámicos en una potente herramienta todo en uno.
