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

Dreamweaver CC 2017 esencial

Añadir y modificar imágenes desde Dreamweaver CC 2017

¡Prueba gratis durante 10 días

nuestros 1290 cursos !

Prueba gratis Mostrar modalidades de suscripción
Hay varias formas distintas de añadir imágenes a nuestros contenidos web desde Dreamweaver. Exploraremos aquí varias formas de añadir imágenes al HTML, tanto de forma visual como mediante programación.

Transcripción

A lo largo de este capítulo hablaremos de cómo añadir imágenes y para poder hacerlo con ejemplos reales en la carpeta de archivos iniciales de este capítulo, encontramos un sitio en el que tengo un archivo 'index.html' que no tiene ninguna imagen y luego tenemos en la carpeta de imágenes un montón de ellas. Además van a tener ya 'estilos.css' preparados para ser aplicados automáticamente sobre las imágenes que yo añada. Vamos a ver cómo añadir las imágenes en este video en concreto. Veremos diferentes formas de añadirlas y de hacer modificaciones sobre ellas. La forma más fácil de añadir una imagen si se quiere, es utilizando el código, obviamente. En realidad se trata de ir añadiendo el código de la etiqueta con escribir simplemente "i", ya me sale el 'img', pulso 'Intro', pulso 'Espacio' y aquí voy seleccionando las distintas características, en concreto el atributo fundamental es el atributo 'src'. Así que al escribir dos letras me sale 'src' pulso 'Intro' Y me da tres formas distintas de añadir una imagen. Por un lado 'Examinar' que es la primera que aparece. Si hago 'Intro' de nuevo me muestra una ventana en la cual puedo seleccionar la imagen que quiero añadir. Esa es la primera, pero no la única. La segunda desde 'Mi biblioteca' lo vamos a ver de una manera visual más adelante. Es muy interesante esta forma de añadir imágenes desde la biblioteca de Creative Cloud porque me permite crear las imágenes al tamaño al que me interesa utilizarlas. Y en tercer lugar es moverme por el árbol de directorios directamente. En concreto están dentro de la carpeta de imágenes es así que la selecciono, pulso 'Intro' y me voy moviendo por ellas con sus previsualizaciones hasta elegir la que me interesa. Cuando he terminado cierro la etiqueta y guardo. En la vista 'En vivo' vamos a poder ver esa imagen; en realidad no es la imagen que yo querría. No pasa nada porque podemos hacer cambios en las imágenes. Dentro de la vista 'En vivo' tengo un menú desplegable que me permite hacer modificaciones sobre el HTML de ese objeto y en concreto de dónde lo estoy sacando sobre la etiqueta 'src'. Bueno pues selecciono logo principal que es el que realmente quiero que esté y aquí podemos verlo. Otro atributo que permite rellenar y que también es muy importante es el atributo 'alt'. El atributo 'alt' sirve para añadir información sobre la imagen que he añadido. "Logotipo del sitio", por ejemplo. En realidad esto sirve por un lado para dar información a los lectores de pantalla para que por ejemplo invidentes puedan irse moviendo por la página sabiendo qué contienen las imágenes aunque no puedan verlas, y aquí debería poner una buena descripción de esa imagen. Y por otro lado sirve para ayudar a los buscadores a tener más información aún sobre lo que tengo en la página porque los buscadores no son capaces de interpretar las imágenes, pero sí son capaces de interpretar estos atributos 'alt'. Luego puedo cambiar el tamaño de esa imagen por ejemplo puedo decirle que tenga 500 pixels de ancho. Pero esto tiene una pega. Y es que realmente estoy editando el tamaño desde el HTML y todo lo que tiene que ver con tamaño de elementos con colocaciones y demás deberían estar controlados desde los estilos 'css'. Así que en principio, mala idea utilizarlo. En cualquier caso, si queremos usarlo siempre tenemos el botón 'Alternar restricción de tamaño' para hacer que no se puedan modificar las proporciones o que sí se pueda. Por último 'link' te serviría para hacer enlaces. Esto que estoy haciendo con la vista 'En vivo' también podría hacerlo con la vista de diseño. En ese caso tengo que seleccionar esa imagen irme a 'Ventana', 'Propiedades' y aquí tengo las propiedades de esa imagen. Hay algunas opciones más aparte de las que hemos visto. Claro que está el 'src' y también el ancho y el alto. Pero veremos más adelante cómo hacer mapas de imagen y también podemos trabajar sobre esa imagen, hacer modificaciones sobre ella. Esto también lo veremos en otro momento. Para poder añadir imágenes de manera automática la forma ideal es volverme a pasar a la vista 'En vivo' y dentro de esta vista 'En vivo' desde el panel de insertar añadir la etiqueta imagen. Tendré primero que seleccionar dónde quiero que vaya en concreto, utilizando el DOM pues quiero que sea en este artículo justo antes de la descripción. Para hacerlo puedo seleccionar la descripción pulsar en la etiqueta imagen y pedir que la coloque antes. Ahora seleccionaría la imagen que quiero que añada y aquí tengo efectivamente esta imagen. Por otro lado, puedo hacerlo de otra manera distinta si me voy a la vista 'Diseño' también podría querer colocar lo mismo en este punto concreto de inserción. Para ello tengo también la posibilidad de utilizar la etiqueta y añadirla desde 'Insertar', o puedo pinchar y arrastrar una imagen y colocarla donde yo quiera. Aquí es un poco más difícil acertar exactamente en el sitio; muchas veces no se acierta. Lo suyo es una vez hecho comprobar en el DOM que efectivamente lo haya hecho bien que no es el caso. No es problema porque modificar su posición dentro de la estructura HTML es tan fácil como pinchar en la imagen arrastrarla donde queremos que vaya y soltarla en ella. Y aquí tenemos ya esa imagen colocada en su sitio Estas imágenes que por cierto tienen un tamaño muy extraño, y por qué salen ese tamaño si me muevo hasta aquí vemos que en realidad lo que ha hecho ha sido aplicarle un tamaño por defecto. Bueno, pues se lo voy a quitar Y ahora la imagen va a salir correctamente. Hay que tener cuidado con esto En realidad el que haya añadido este tamaño es un poco extraño, que no debería haber hecho pues lo normal es que cuando añadamos imágenes, las ponga al mismo tamaño que tenga esa imagen. Pero bueno, en cualquier caso simplemente comprobándolo y abriendo el panel, ya estaría. Y cómo podemos entonces modificar los estilos de la imagen. En principio si yo lo pongo en la vista de diseño tengo aquí unos manejadores que permiten cambiar su tamaño, pero tampoco es buena idea usarlo porque esto es hacer modificaciones de nuevo sobre el HTML. La forma buena de verdad es irme al diseñador CSS y aquí en las propiedades modificar su tamaño. De hecho ya hay un estilo, un selector aplicado sobre las imágenes que están metidas dentro de todo el listado de eventos y en ella hemos definido que tengan un ancho del 30%, pero podría cambiarlo, podría ser por ejemplo del 40 del 50, del que quiera. Es bueno utilizar tamaños tanto por ciento porque sirve para que así cambie el tamaño de la imagen dependiendo del tamaño de la pantalla y también es bueno utilizar tamaños máximos, el 'max width' y el 'max height'. Y para ello lo ideal es saber cuál es el tamaño máximo de imagen que puedo utilizar. O sea, recuperar información sobre esta imagen y saber cuál es el tamaño máximo en el que puede aparecer. Voy a ponerme en la vista de diseño. Si yo a esta imagen como digo, la arrastro a cualquier parte de la pantalla, puedo ver realmente cuál es el tamaño máximo en el que aparece yéndome solo a la vista de código o lo puedo hacer con cualquiera de las imágenes que hay, no hubiera sido problema, me pongo en 'evento_2' me muestra una previsualización y me dice el tamaño 300 x 200 pixels. Bueno, pues entonces es fácil. Selecciono dentro del diseñador CSS y le voy a pedir que tenga un ancho máximo en cualquier caso de esos 300 pixels y con eso conseguiré que se estire y se encoja, pero siempre hasta el límite en el cual a partir de él la imagen no quedaría bien.

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.