Edicion en la vista de diseño

Edición en la vista En vivo

La nueva versión de Dreamweaver CC no sólo ha mejorado la pre-visualizació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 .azul.

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.