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

Las etiquetas div y span en Dreamweaver CC 2017

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Para poder controlar la colocación y distribución de los elementos HTML que vamos añadiendo, necesitaremos etiquetas que nos permitan asociar estilos a los textos y den estructura de bloque a los contenidos que estén dentro.

Transcripción

Voy a seguir trabajando con la vista en vivo, la vista de diseño, en concreto con la vista en vivo, vamos a ver ciertas diferencias a la hora de trabajar con ello y vamos a ver como combinar estas vistas en vivo o de diseño con el panel DOM, este panel DOM es fundamental para poder seleccionar elementos concretos por ejemplo yo aquí dentro de todo este código, es imposible que sepa donde esta el artículo. Pero si me muevo por el DOM y veo la estructura de etiquetas veo fácilmente realmente donde esta colocado ese artículo. Con este DOM yo voy a poder hacer modificaciones y voy a poder hacer selecciones y me van a facilitar bastante la tarea. Eso por un lado, por otro, me voy a ir a la vista de diseño y voy a añadir una etiqueta de la que no he hablado, en realidad esto no es un curso de HTML, es un curso de Dreamweaver, pero la utilización de Dreamweaver va a servirnos para aprender HTML, así que voy a ir revisando algunas de las etiquetas HTML que vamos a ir usando, y así va a servir también para aprender un poquito de el. La etiqueta DIV en concreto sirve como contenedor, es bastante interesante, el código que yo tengo aquí puedo ver que en realidad es un código semántico, tengo Header, Main, Sección, Artículo, todo esto está muy bien pero yo hay veces que voy a querer englobar contenidos sin que esos contenidos tengan una significación, por ejemplo, podría querer que parte del contenido se fuese a la derecha y que estuviese flotando o que hayan algunas palabras que salgan de un color distinto, necesito algo que me englobe esos contenidos. Para eso hay dos etiquetas, voy a comenzar con la DIV, si selecciono artículo, y pulso la tecla DIV, inmediatamente me abre este insertar DIV, siempre que este en la vista de diseño, y aquí tengo las opciones para elegir donde quiero insertarlo y clase e identificador. Pero puedo ir más allá, si selecciono la vista en vivo, y selecciono este artículo, veremos que ahora es más visual, selecciono DIV, e inmediatamente me muestra un pequeño panel en el que puedo elegir las distintas opciones de inserción que es colocar la etiqueta antes, colocar la etiqueta después, englobar la etiqueta que tenía seleccionada dentro de la nueva etiqueta, o sea que la nueva etiqueta envuelva a la otra, o que la nueva etiqueta aparezca anidada en la etiqueta seleccionada, o sea que aparezca dentro de esa etiqueta, eso además no va a sustituir el contenido que había, lo que va a hacer va a ser colocarlo además del contenido que había. Voy a seleccionar anidar, aquí vemos en el código como me ha creado artículo, me ha creado ese DIV con un poco de texto adentro, y luego me ha mantenido después también el resto de ese contenido. No se nota la diferencia en el aspecto, pero sin embargo el código es distinto, ahora sobre este momento yo puedo aplicarle clases, puedo aplicarle estilos de CSS que me vayan a servir después para hacer que ese DIV aparezca distinto. Para añadir una clase, pulso en el más, aquí podemos ver que es añadir clase o identificador, puedo hacer clic entonces en este campo, y aquí ponerle el nombre de clase que yo quiera utilizar, por ejemplo, bloque, cuando hago intro, me permite también elegir. ¿Qué es lo que me está dejando elegir? Primero, donde quiero que me añada esa clase en concreto, quiero decir, yo he creado esta clase, pues además para que sea más cómodo desde el mismo sitio me va a crear un selector CSS que haga referencia a esta clase que he añadido, y dentro de el entonces ya podré añadir las propiedades que quiera. Y me deja elegir crearlo en la página, o en cualquiera de los archivos de CSS vinculados a esa página, como no tengo ninguno, de momento puedo mantener este definido en página. Y por otro lado, también me permite elegir la media query donde quiero que vaya, esto es si yo tengo diferentes media queries, o sea diferentes selectores específicos para determinados tipos de pantalla, por ejemplo, bueno pues puedo elegir donde. Si vuelvo a hacer intro, y me voy al código se ve que me ha añadido efectivamente una etiqueta style, que son las etiquetas que se ponen en HTML para meter estilos de CSS y dentro me ha metido esa clase en concreto. En cualquier caso sigue sin notarse la diferencia, pero de nuevo una vez más si yo selecciono este objeto y me voy al diseñador CSS, puedo por ejemplo hacer clic en fondo y seleccionar un color de fondo, y ahora si que se va a notar la diferencia, aquí podemos verlo. De todos modos, se puede hacer todavía de otra manera distinta supongamos que yo lo que quiero es que dentro de este bloque de código pues haya un trozo del texto que se comporte de una manera y otro de otra. Esto en realidad lo puedo hacer con etiquetas DIV, puedo por ejemplo seleccionar todo este trozo de código, seleccionar la etiqueta DIV, y como podemos observar ha añadido esa etiqueta DIV en esta parte independiente de este otro resto de texto. Eso me ha generado, aquí se puede ver, como si fuesen dos líneas distintas porque son bloques diferentes, esto es una etiqueta DIV. Pero hay otra forma de englobar, hay otro contenedor de texto, en este caso, que sirve para que el texto aparezca englobado pero sin embargo no me genere una nueva línea, no se comporte como un bloque. Esa es la etiqueta SPAN, no está dentro de insertar pero la puedo añadir en cualquier momento, no hay que tener miedo a la vista de código, simplemente hay que empezar a escribir abrir etiqueta, y solamente con escribir SP ya sabe que es una etiqueta SPAN, hago intro, cierro la etiqueta y ya cierra esa etiqueta, selecciono el trozo de cerrar etiqueta, lo coloco del otro lado del texto, y tengo esa etiqueta como digo, SPAN. Esta etiqueta SPAN me sirve también para añadir clases, de hecho si me vuelvo de nuevo a la vista en vivo, si selecciono dentro del panel DOM esa etiqueta SPAN, yo puedo aplicarle clases sobre ella, hago doble clic, selecciono el campo de al lado, y aquí por ejemplo, puedo poner punto y añadir otro estilo distinto. Por ejemplo, resaltado, hago clic, selecciono enter, y ya lo habría añadido, es igual que si lo hubiera hecho también directamente desde aquí, la parte superior. Por cierto, que si me pongo encima también me permite hacer clic sobre la X que quitaría esa clase en concreto. Si me vuelvo al código, vemos como efectivamente me ha generado esa etiqueta SPAN con esa clase. Y de hecho, si me vuelvo a en vivo vemos que sin embargo sigue estando en la misma línea, no se ve ninguna diferencia. A partir de este punto, de nuevo vuelvo a utilizar el diseñador CSS para darle el aspecto que yo quisiese. Presumiendo, es interesante utilizar etiquetas DIV y etiquetas SPAN, y hemos visto como utilizar el panel DOM, y como utilizar también la inserción de etiquetas dentro de la vista en vivo.

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.