Dreamweaver CC 2017 avanzado: Automatizaciones y trabajo con PHP y CSS

La herramienta Quick edit en Dreamweaver CC 2017

¡Prueba gratis durante 10 días

nuestros 1244 cursos !

Prueba gratis Mostrar modalidades de suscripción
La herramienta Quick edit (edición rápida) facilita el acceso a los selectores CSS relacionados con el elemento que tenemos seleccionado. Así se puede editar el aspecto asociado con el código sin necesidad de tener que cambiar entre varios archivos.

Transcripción

Una herramienta que a mi personalmente me encanta es el Quik Edit. Cuando estamos trabajando en código, no tenemos relación visual con los elementos de pantalla, con los elementos visuales. Cuando estamos trabajando en la vista visual, no tenemos tampoco una conexión directa con el código. Tenemos la vista dividir, esta vista dividir sí que es verdad que viene muy bien, pero se me queda corta porque si yo quiero hacer por ejemplo, estoy trabajando en este objeto, en este texto, y quiero hacer que sea de color naranja en vez de ser de color negro, tendré que trabajar sobre sus estilos CSS, con lo cual tengo que andar moviéndome entre la vista de diseño para ver como queda, entre la vista de código para seleccionar esa etiqueta, buscar este H2, moverme hasta los estilos, buscar dentro de estos estilos, ese H2 en concreto. Es algo molesto e incómodo. Bueno pues, para evitar ese problema, para hacerlo muchísimo más fácil, tenemos el Quick Edit. El Quick Edit consiste en el atajo de teclas control E o comando E en Macintosh que básicamente, me abre una pequeña ventana en la que me muestra el código CCS, relacionado con un elemento en concreto. Aquí lo podemos ver, es como una especie de micro ventana que se me abre sobre los estilo CCS y que me permite hacer modificaciones. Entonces, en este caso, aquí, pues ya puedo cambiar, por ejemplo, el color y utilizar y añadir el código necesario para recuperar ese color. Por cierto, que también tenemos un selector de color con el que fácilmente puedo ir hasta el color que quiera o incluso, otra cosa que también es muy habitual el que "no, yo quiero utilizar el mismo color que tengo aquí, en concreto, no quiero utilizar otro". Bueno, pues hay varias herramientas con las que muy cómodamente podremos recuperar un color entre ellas, el cuentagotas. Puedo utilizar ese cuentagotas para recuperar ese color y una vez que lo tengo, pulso en intro y aquí vemos como cambia. En este caso es muy fácil, porque yo simplemente he añadido un color sobre un elemento que ya tenía una clase asociada, pero podemos ir más allá, puedo irme un poco más abajo en el artículo que cree, en este artículo además, puedo hacer que sea un artículo especial por ejemplo. Y ahora, sobre este elemento, también tengo la posibilidad de abrir el Quick Edit y pedir que me abra una regla en concreto puedo tener varias ya creadas o puedo, como digo, crear una y eso va a crearme en principio una regla con la clase, bueno sería con el identificador que tengo si no tiene ningún identificador, entonces con la clase que tengas seleccionada y ahora sobre ella os puedo añadir, el tipo de característica que me interese pues por ejemplo, un background en el que puedas seleccionar también un color, pero que en este caso, pues por ejemplo sea un gris prácticamente semitransparente con un poquito de tono. También puedo elegir los colores que me va a devolver todo este selector puedo elegir, RGB, entonces con eso me va a recuperar ese alfa y aquí ya lo tendría dentro del código. Utilizando control E o comando E, vuelvo a cerrar de nuevo ese Quick Edit, hay que recordar de todas formas que dentro de los cambios que estoy haciendo, en realidad, no he guardado nada, tengo que irme a los estilos CCS, alguna vez y guardarlos o mejor aún, irme a "Archivo" y guardar todo y se va a ocupar de que me guarde todos los archivos relacionados con ese archivo HTML que tengo en un momento determinado. Voy a copiar, voy a pegar este código un poco más abajo y así vamos a ver un poco el efecto de que efectivamente me ha añadido ese gris sobre esa fotografía en concreto. Hay más posibilidades también, supongamos que yo ahora lo que hago es seleccionar un elemento que en realidad se está recibiendo varios selectores de varios sitios distintos, por ejemplo, esta etiqueta "A" en concreto. Bueno, pues, pulsando de nuevo control E, me vuelve otra vez a abrir el Quick Edit y me pone uno de los selectores que está afectando en concreto, el más concreto, el más específico para él pero también me muestra un listado con todos los archivos CCS asociados que tienen algún tipo de selector que puede afectar al elemento sobre el que tenía el cursor. Aquí estamos viendo los distintos elementos posibles. Así que, no solamente voy a poder trabajar con un estilo, sino que voy a poder trabajar con todos los estilos en todos los archivos que estén afectando a ese elemento a través de este Quick Edit. Como se puede ver es una herramienta verdaderamente potente. Y también el Quick Edit va a funcionar dentro del código CCS y vamos a tener varias opciones por ejemplo, si yo selecciono un color cualquiera y al ponerme encima me previsualiza ese color, pero si selecciono control E, o sea si vuelvo a abrir el Quick Edit en este caso, en vez de abrirme una pequeña ventanita con código lo que hace es abrirme el selector de color con el que puedo trabajar normalmente y esta es una de las posibilidades porque otra de las posibilidades de edición visual, es cuando estemos trabajando con transiciones por ejemplo, suponiendo que yo quiero que este elemento tenga una transición, bien pues puedo utilizar fácilmente las ayudas, hacer que acepte todas las propiedades que tarde dos segundos y que sea una transición con una determinada aceleración. Bueno pues, en estas aceleraciones yo puedo también utilizar el Quick Edit para hacer modificaciones sobre la aceleración y pasar de utilizar una aceleración que viene por defecto, a realizar cambios sobre la mía propia, hacer una personalizada por ejemplo, pues que tenga una aceleración mucho más fuerte al principio y que sea mucho más suave al final. En cuanto voy haciendo esos cambios, se puede ver cómo me ha cambiado a "cubic bezier" y dentro de ella pues me ha ido añadiendo esos cambios de los que estoy hablando.

Dreamweaver CC 2017 avanzado: Automatizaciones y trabajo con PHP y CSS

Utiliza Dreamwaver CC 2017 para crear y automatizar contenidos dinámicos. Aprende cómo mejorar tu flujo de trabajo y usar el programa como un gran IDE de programación web.

2:33 horas (43 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.