Unidad 4. Herramientas de diseño (II)


4.3. 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:

 

 

4.4. Edición en la vista En vivo

Ver el videotutorial

La nueva versión de Dreamweaver CC no sólo ha mejorado la previsualización de las páginas en la vista En vivo, que cobran el mismo aspecto que en la mayoría de los navegadores, ahora también permite diversas tareas de edición.

Recuerda que la barra de documento tiene un botón que permite conmutar entre la vista Diseño y la vista En vivo. En esta vista podemos hacer clic sobre algún elemento de la página para editar el texto, insertar imágenes, asociar elementos HTML con selectores de CSS (tema que veremos más adelante), tener una vista rápida de los elementos de toda la página, cortar, copiar y pegar, elementos, etcétera.

Cuando hacemos clic sobre un elemento de una página en la vista En vivo, Dreamweaver remarca el elemento HTML correspondiente con un recuadro azul. No te preocupes por lo pronto de lo que esto significa, lo más importante es que en la parte superior de este recuadro podemos ver la etiqueta HTML que se trata y podemos asociarle fácilmente un selector de clase CSS o un ID.

En la siguiente imagen hemos hecho clic sobre el párrafo. Observa el recuadro azul, en la parte superior indica que se trata de una etiqueta <p> (de párrafo):

 

Si pulsamos el en signo +, veremos una pequeña caja de texto al lado de la etiqueta que nos permitirá añadir un selector CSS a esa etiqueta, como en la siguiente imagen.

Con ello, como estudiaremos en los siguientes capítulos, podríamos modificar rápidamente las propiedades de texto de ese párrafo, como en la siguiente imagen en donde hemos aplicado la clase llamada .marron.

 

A su vez, en algunos elementos, como las imágenes, aparecerá un Inspector de propiedades de visualización rápida al hacer clic sobre el icono a la izquierda de la etiqueta, lo cual nos permitirá editar sus propiedades más importantes.

Si hacemos doble clic en un objeto de texto, como un párrafo o un encabezado, el recuadro cambia de azul a naranja y veremos un cursor que nos permitirá modificar el texto. Si además seleccionamos una parte del texto, podremos ver una pequeña barra de herramientas para darle formato.

La edición en la vista En vivo aún tiene algunas otras características, pero para revisarlas debemos estudiar otros elementos, como la Vista rápida de elementos, que trataremos en el siguiente apartado.

 


Marzo-2015
Pág. 4.2
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.