El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

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

Edición en la Vista diseño, Vista en vivo e Inspeccionar

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Muchas veces es complicado encontrar los elementos que queremos editar dentro de la gran cantidad de líneas de código. Gracias a la Vista en vivo se puede recuperar información sobre las partes de código relacionadas, permitiendo seleccionar etiquetas y ver selectores CSS aplicados.

Transcripción

Cuando se crean sitios webs complejos tenemos muchas etiquetas, con muchas clases y a veces es muy complicado llegar a la parte de código que nos interesa. Dentro de Dreamweaver vamos a tenerlo relativamente fácil, sin necesidad de ir al navegador y con el navegador inspeccionar y demás, vamos a tener nuestra propia herramienta de inspección. Si pongo como vista "Dividir" y mantengo la vista "En vivo", puedo desde el menú "Ver" "Inspeccionar", moverme por las distintas etiquetas y voy a recibir información sobre ellas. De hecho, vamos a ver que es muy interesante porque, por ejemplo, me devuelve por un lado los colores verde y naranja que sirven para hablarme del margen que tiene un objeto concreto. De hecho, el margen y el paddy. Por otro lado, justo encima me esta poniendo además un tooltip, si estuviese en la parte de arriba me lo pondría debajo. Con la etiqueta que tengo seleccionada, con la clase que tiene en caso de que haya alguna, voy a seleccionar una con alguna clase y por otro lado también me devuelve, podemos verlo, el tamaño que tiene ese objeto en concreto. Ese tamaño que en realidad es un tamaño calculado, es decir, no es que haya una clase que este dando ese tamaño y por eso me los devuelva, si no que en este tamaño de pantalla en concreto tiene ese tamaño en concreto. Eso me puede servir para hacer cálculos para determinadas media queries por ejemplo. Por otro lado, también se ve en la parte del código resaltado, el código en concreto que genera ese elemento visual y además debajo de la barra de la información se puede ver también la anidación de etiquetas para llegar a ese objeto en concreto. Incluso si hago clic, lo que ocurrirá será que queda seleccionado de este objeto y puedo editarlo por supuesto desde la vista "En vivo" pero también puedo editarlo desde la vista de "Código" y trabajar con el normalmente. Esto es parte de lo bueno que tiene, me va a servir muy bien para hacer selecciones sobre elementos o para saber qué elemento en concreto es cuál, pero también tengo otra posibilidad muy importante y es que suponiendo que yo, por ejemplo, sobre este elemento no se que clases se aplican que selector es CSS. Bien pues, vamos a tener una herramienta que es muy importante y es el navegador de código y se llega hasta el con la tecla Alt y haciendo clic. Eso me abre el navegador de código, aquí podemos verlo y consiste en que me muestra un listado con todos los elementos que están relacionados con el objeto sobre el que he hecho clic. Me dice que en "Index.html", en el código fuente, puedo seleccionarlo en un punto o si me va a seleccionar exactamente en el sitio donde estaba pero también voy a volver hacer clic de nuevo, me muestra todos los estilos CSS relacionados con ese elemento y entonces desde aquí lo tengo fácil porque me puedo mover con ellos mirar a ver cuál es el que tiene el color naranja, me puedo ir moviendo por ellos y cuando encuentro ese color naranja, aquí lo tengo, haría clic sobre el, me devuelve directamente a ese punto y puedo sustituir ese color naranja para por ejemplo, pues poner un color gris. Así que, se simplifica enormemente la tarea de saber que estilo es el que modifica un determinado elemento en un momento concreto.

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.