Unidad 4. Herramientas de diseño (I)


4.1. 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 redimensionamos 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:

A lo largo del curso podremos usar estas herramientas en diversos momentos según tengamos necesidad de las mismas.

4.2. Reglas, guías y cuadrícula

Ver el videotutorial

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á mostran 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 redimensionamiento 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ícula, Mostrar 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ú Ver, Cuadrí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.


Marzo-2015
Pág. 4.1
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.