Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

Dreamweaver CC 2017 esencial

Vista de diseño y Vista en vivo en Dreamweaver CC 2017

¡Prueba gratis durante 10 días

nuestros 1290 cursos !

Prueba gratis Mostrar modalidades de suscripción
Hay dos formas distintas de trabajar sobre el diseño en Dreamweaver: por un lado, con la Vista de diseño podremos ver cómo se estructuran los contenidos que añadimos y por otro, con la Vista en vivo tenemos un motor de navegación corriendo en el programa.

Transcripción

(hombre) En Dreamweaver se puede trabajar perfectamente en la lista de código, de hecho, es una buena costumbre usarla de vez en cuando, aunque no sepamos nada de HTML, porque nos puede ayudar muy fácilmente a aprender código HTML. Si yo añado cualquier etiqueta de manera visual sobre el código, pues así voy a ver qué es esa etiqueta y como se configura. En cualquier caso, de todas formas, también es muy cómodo trabajar de manera visual y vamos a tener dos formas distintas de trabajar de manera visual. Ambas van a estar dentro de este desplegable "En Vivo" o "Diseño." Haciendo clic sobre el nombre que se ha asignado a ese desplegable, me paso a ese tipo de visualización. La diferencia básica entre "En Vivo" y "Diseño", es que En Vivo lo que tengo es el motor de un navegador funcionando dentro de Dreamweaver, voy a ver algo muy parecido al resultado final de como va a quedar la página en los distintos navegadores. Hay que tener en cuenta que los distintos navegadores interpretan de diferentes maneras diferentes etiquetas, algunas partes de código o incluso de CSS, entonces sí es cierto que lo que yo estoy viendo aquí no tiene que ser exactamente lo que después vea en el navegador. No obstante, como dimos una buena referencia, incluso si estoy trabajando con una página con lenguaje de servidor como PHP, voy a poder ver aquí el resultado de ese PHP, es muy interesante. En el caso de la vista de diseño es un poco distinto. Aquí realmente no voy a tener una simulación de como se va a ver en el navegador. Aunque me va a plantear como se ven los elementos de una manera bastante visual. El trabajo en una o en otro, va a ser, como digo, de todas formas, muy distinto. Voy a mantenerme en la vista de ''diseño''. Por una línea de puntos al pasar por encima, me muestra en rojo esa etiqueta, y si la selecciono, de hecho, podemor ver como abajo me dice qué etiqueta he seleccionado y además aparece reenmarcada. Yo puedo hacer modificaciones sobre esa etiqueta fácilmente yéndome al Diseñador CSS y sobre él podré añadir estilos CSS. Pero de todas formas puedo hacer más cosas. Poniéndome encima, se observa que me indica el identificador asociado a esa etiqueta, las clases aplicadas y algunas de las características más importantes. Pero realmente no tengo muchas más opciones de edición, salvo que me vaya a ventana y abra el panel de Propiedades. En realidad esta vista de diseño, está pensada para trabajar con el panel de propiedades. Así, si por ejemplo aquí en el Header quisiese añadir una imagen, es tan fácil como donde lo tengo seleccionado, pulsar en imagen y seleccionar el logotipo. Se ve fácilmente como puedo hacer modificaciones sobre esa imagen, entonces puedo modificar de donde sale esa imagen, puedo añadirle enlaces, puedo hacer, por ejemplo, que haya un mapa de imagen, todo esto iremos viéndolo más adelante, o cambiar el tamaño de esa imagen. Todo esto son modificaciones sobre el HTML. Además también podemos ver como aparece seleccionada esa imagen, por ejemplo, si quiero cambiar su tamaño, solo tengo que pinchar y arrastrar y hacer cambios sobre ese tamaño. Si me paso a la vista en vivo, en cambio, ahora la cosa cambia. Yo sí, efectivamente, también puedo seguir utilizando el panel de propiedades pero en este caso, mejor que utilizar el panel de propiedades, es utilizar las opciones que me dan los menús contextuales que aparecen directamente en la vista en vivo. Por ejemplo, puedo añadir fácilmente una clase o un identificador, pulsando solamente en el 'más' y escribiendo el nombre que quiera. Y también puedo, haciendo clic en el menú contextual, modificar las propiedades más importantes. Las HTML, como sería de nuevo, de donde sale la imagen, el texto alternativo, el tamaño o el enlace. De todas formas, no hay que olvidar que esta es una forma fácil y cómoda de trabajar, pero en cualquier caso, para hacer cierto tipo de modificaciones, no nos quedará más remedio que volver al panel de propiedades o en su defecto, pasarnos a la vista de código. De hecho, el panel de propiedades también cambia dentro de la vista en vivo, y es que en este caso, teniendo seleccionada esta etiqueta de imagen, por ejemplo, podemos ver que no tengo algunas de las opciones que tenía en la parte inferior. Voy a irme a la vista en vivo y veremos como, al cambiar, me permite, por ejemplo, elegir la creación de mapas de imagen, o me permite también, hacer modificaciones sobre esa imagen editando directamente en Fireworks o haciendo recortes o modificaciones de otros tipos. Depende muchísimo del perfil, que tipo de visualización elijamos para trabajar. Va a haber personas que prefieran ''diseño'', va a haber personas que prefieran la vista ''en vivo'', yo personalmente prefiero trabajar sobre la vista ''en vivo'', o tener una mezcla entre la vista 'en vivo' y la vista de 'código' para hacer las modificaciones gruesas, digamos, dentro de esta vista, y las modificaciones de detalle, hacerlas directamente sobre el código. Otra cuestión interesante es que dentro de la vista en vivo yo puedo seleccionar una etiqueta haciendo clic, pero si quiero editar esa etiqueta, tengo que hacer un segundo doble clic, si quiero editar el contenido de esa etiqueta. Podemos ver como al haber editado ese contenido me muestra otras opciones distintas.

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.