Reglas guias y cuadriculas, imagen de rastreo - Curso Rapido Dreamweaver

Popular

Curso Rapido Dreamweaver

Curso Rapido de Dreamweaver

Bienvenidos!

jueves, 16 de abril de 2020

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Ć­culaMostrar 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Ćŗ VerCuadrĆ­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Ćŗ VerImagen 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Ćŗ ModificarPropiedades 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:


No hay comentarios:

Publicar un comentario