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Ć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.
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ú Ver, Imagen 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Ćŗ Modificar, Propiedades 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