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 esencial

Panel DOM en Dreamweaver CC 2017

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
El panel DOM es otro panel fundamental ya, que gracias a él, tenemos acceso a la estructura del HTML de una forma muy visual, permitiendo además hacer cambios sobre esta estructura, como recolocar o eliminar etiquetas, entre otros.

Transcripción

Otro panel verdaderamente interesante es el panel DOM. Antes de trabajar con él, voy a quitar el panel de propiedades. Puedo cerrarlo en realidad simplemente haciendo clic sobre la X, o también puedo pedir que se cierre pulsando 'Cerrar' en el menú contextual de la derecha. Para el menú DOM, si no soy capaz de verlo, lo puedo sacar directamente desde ventana. Si me aparece minimizado en esta parte de abajo, también puedo pedir que en el espacio de trabajo estándar se restablezca y me lo va a mostrar. ¿Para qué sirve este panel DOM? Este panel DOM va a servir para descubrir cómo están organizadas las etiquetas dentro del HTML. El DOM en realidad es eso, es la estructura de etiquetas que tengo en un documento HTML, y aquí lo puedo ver de manera visual. Eso es muy interesante porque me va a servir para muchas cosas. Por ejemplo, si yo no sé qué elemento es este, puedo hacer clic sobre él e inmediatamente aparece marcado dentro del DOM. Y así puedo ver dentro de él la estructura de cómo está organizado y hacer modificaciones sobre él. Por ejemplo, si lo que quiero es hacer que se modifiquen los elementos de la lista, pues entonces tendré que seleccionar esa lista, y ahora sobre ellos podría hacer cosas como irme al diseñador CSS y aplicarle los estilos que me interesasen. Por ejemplo, si en vez de trabajar dentro de la vista de diseño, me voy a la vista de código, veremos que es todavía más útil, porque aquí sí que es difícil encontrar dónde está un elemento concreto. Por poner otro ejemplo, el logotipo principal, hay una forma muy fácil de encontrarlo, y es utilizar el DOM. Dentro del DOM me voy moviendo, sé que está en el 'header', busco en el 'header' los distintos elementos que hay y descubro que hay una imagen. Hago clic en ella y efectivamente aquí veo que esa imagen es el logotipo. Es más, si he sido cuidadoso al crear el documento, al crear este elemento en concreto, y le he puesto un identificador que sea fácil de localizar, también voy a ver aquí ese identificador dentro del panel DOM y por tanto me va a ser mucho más fácil todavía encontrarlo. Este panel DOM además actúa en combinación con la información de etiquetas que tengo en la parte inferior de la ventana. Así que la función de trabajo va a ser básicamente la misma, solo que podemos ver cómo seleccionando las etiquetas aquí debajo selecciono todas las que engloban y, sin embargo, seleccionando las etiquetas aquí, es mucho más fácil llegar a la etiqueta final sobre la que quiero trabajar. Y por último, tengo también la posibilidad de añadir nuevas etiquetas dentro de un elemento concreto. Voy a ponerlo de nuevo en vivo. Y supongamos que yo lo que quiero es añadir un poco más de texto aquí. Puedo seleccionar ese elemento dentro de la vista en vivo y ahora sobre él, puedo pedir, con el botón +, que me inserte antes, después o un elemento hijo. Un elemento hijo lo va a meter dentro de esta etiqueta. Un elemento después lo va a colocar después. ¿Qué es lo que me interesa hacer? Aquí, por ejemplo, voy a añadir una segunda etiqueta 'p'. Ya tengo esa etiqueta 'p' y sobre esa etiqueta 'p' podría meter código. Como vemos, el panel DOM es muy interesante. No tanto para añadir elementos como acabo de hacerlo, pero sobre todo para tener una idea clara de cómo está estructurada la página y para poder moverme entre los distintos elementos de una forma rápida y visual. Por último también, otra cosa para la que sirve muy bien este DOM es para poder eliminar elementos, por ejemplo, este elemento que en realidad estaría vacío, yo puedo pulsar con el botón derecho y puedo cortarlo, copiarlo o duplicarlo, o en mi caso, eliminarlo. También podría quitar o ajustar etiquetas. Como digo, voy a pulsar en 'Eliminar' y vemos que ya he hecho modificaciones también sobre el HTML, trabajando directamente sobre este DOM.

Dreamweaver CC 2017 esencial

Crea sitios web gracias al software de Adobe, Dreamweaver CC 2017. Con este repaso esencial a sus fundamentos podrás crear páginas responsive y mostrar tus contenidos a la última.

6:11 horas (78 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.