SlideShare una empresa de Scribd logo
Integrantes:
I ls e Ale jan d ra P é re z Vá z q u e z
Maria Guadalupe Tellez Alcantar
Tellez alcantar y perez vazquez 6ºf
6.1. Introducción
Las imágenes son un aspecto muy importante
de la web. Ya sea como complementos a la
información o parte del diseño, la hacen
mucho más atractiva a ojos del visitante. No
obstante, no conviene abusar, ya que
aumentarán mucho el tamaño final de la web.
Existen una serie de formatos de imagen más
recomendables que otros para ser introducidos
en una página web.
                 Tipos de formatos
 Formato gif
 Utilizan un máximo de 256 colores, y son recomendable
  para
 Dibujos con grandes áreas de un mismo color o de tonos
 no
   continuos.
 Formatos jng:
 Estas imágenes pueden contener millones de colores, e
 un
  archivo comprimido, de tamaño razonable.
 Formato png:
 Se trata de un formato de compresión sin perdida.
 también
 resulta especialmente indicado para imágenes con
6.2. Insertar una imagen

Para insertar una imagen hay que dirigirse al menú Insertar,
a la opción Imagen. Después de esto, ya es posible
seleccionar una imagen a través de la nueva ventana.
Cuando te acostumbres, te será más cómodo acceder con la
combinación de teclas Ctrl + Alt + I .
En Relativa a es posible especificar si la imagen será
relativa al documento o a la carpeta raíz del sitio. Es
preferible que sea relativa al Documento, ya que si
cambiamos la página de carpeta, lo habitual es cambiar
también sus imágenes.

Lo mismo ocurre cuando se selecciona un documento
para crear un vínculo.
La ruta en la que se encuentra la imagen aparecerá
representada de una u otra forma en el campo URL de la
ventana y en el campo Origen del inspector de
propiedades, dependiendo de si ha sido insertada como
Si insertamos una imagendelluego o relativa al la
relativa a la carpeta raíz y sitio la borramos,
documento.
movemos, o escribimos mal su nombre, en Dreamweaver
aparecerá así           indicando que el enlace al archivo
está roto.

En ese caso, la imagen que aparecerá en el navegador
será
Similar a ésta: .

Aparece un recuadro blanco con una X roja, junto con el
nombre
de la imagen o el contenido del campo Alt del inspector d
propiedades, que explicaremos a continuación.
  Para practicar
6.3. Propiedades de una imagen
Cuando seleccionamos una imagen el Inspector de
propiedades muestra esta apariencia:




Desde aquí podremos establecer distintos atributos a la
imagen:
•Ancho y Alto son las dimensiones de la imagen.
Dreamweaver las pondrá directamente.
•Como pasaba con el texto, podemos crear un
hiperenlace en la imagen escribiendo la dirección en el
campo Vínculo, y decidir en qué ventana se abre con el
campo Destino.
•En el campo ALT escribimos el texto que remplazara a
la imagen si estas no puede mostrarse.
•En clase podrás asignarle un estilo que hayas creado
anteriormente.
6.4. Cambiar el tamaño de una imagen
Dentro de Dreamweaver puede modificarse el tamaño
de las imágenes.
  Por un lado, podemos cambiar el tamaño con el que se
ve una imagen, pero dicho cambio de tamaño no se
aplica directamente sobre el archivo de imagen, que
conservará el tamaño original.
Es muy probable que la imagen resultante no sea de
buena calidad, en comparación de cómo podría quedar
modificándola desde un editor externo, como Fireworks,
Photoshop, etc..
Por ejemplo, vamos a ver lo que ocurre si insertamos
una imagen que representa el icono de Dreamweaver y
modificamos su tamaño de varias formas diferentes:




 El resultado mas o menos satisfactorio, dependiendo
 del navegador que es el que aplica realmente el
 recalado aunque en ocasiones es imposible rescatar
 la calidad de la imagen.
Existen dos formas de modificar el tamaño.
Existen dos formas de modificar el tamaño.



Una de ellas es, una vez seleccionada la imagen,
arrastrar con el puntero alguno de los recuadros
negros que aparecen alrededor de la imagen.



La otra es a través de inspector de propiedades,
cambiando los campos Ancho o Alto. Estos campos
aparecerán en el inspector cuando esté
seleccionada alguna imagen.
Si estos campos no contienen el tamaño original de
la imagen, el valor aparecerá resaltado en negrita y
aparecerá a la derecha una flecha circular que
permite volver al tamaño original haciendo clic sobre
ella.            
D r e a m w e a v e r t a m b ié n n o s p e r m it e c a m b ia r e l
t a m a ñ o r e a l d e l a r c h iv o d e im a g e n .
P a r a h a c e r lo , s e le c c io n a m o s la im a g e n , y p u ls a m o s
e n e l ic o n o       d e l I n s p e c t o r d e p r o p ie d a d e s . S e
a b r ir á la v e n t a n a P r e s e n t a c ió n p r e lim in a r d e la
im a g e n . N o s fij a m o s e n la p e s t a ñ a A r c h iv o .
En la sección escala, podemos establecer un
porcentaje del tamaño original.
El nuevo tamaño se mostrará en An (ancho) y Al
(alto). También podemos introducir directamente el
nuevo tamaño.

6.5. IMAGEN DE SUSTITUCIÓN. ROLLOVER
Un rollover es una imagen que cambia por otra
cuando el puntero se sitúa sobre ella.
Para insertar un rollover hay que dirigirse al menú
Insertar, Objetos de Imagen, a la opción Imagen de
sustitución. En la nueva ventana hay que especificar
la imagen original y la de sustitución.
El Texto alternativo es el texto que aparece al situar
el puntero sobre una imagen, o el que aparecerá en
lugar de la imagen en el caso de que por algún
motivo ésta no pueda ser mostrada en el navegador.


El texto alternativo puede asignarse a todas las
imágenes, no sólo a los rollovers. Puede hacerse a
través del campo Alt del inspector de propiedades de
la imagen seleccionada.


*Existe una forma parecida de crear estos efectos
utilizando CSS, y de hecho son más utilizados.
Básicamente consiste en cambiar la imagen de fondo
de un elemento.
6.6. OBJETOS INTELIGENTES
Los objetos inteligentes son imágenes que obtenemos
directamente desde un archivo de Photoshop (.psd).
Al insertarlo, lo hacemos igual que con cualquier
imagen, eligiendo el archivo de Photoshop.




* Tras abrirlo, Dreamweaver nos pedirá que elijamos
uno de los formatos gif, png o jpg y lo guardemos, con
las mismas opciones que encontrábamos al pulsar el
botón    del Inspector de propiedades.
Puede que en cualquier momento queramos
modificar la imagen. Podemos hacerlo abriendo el
archivo .psd, o pulsando el icono          del
Inspector de propiedades, que abrirá el archivo
fuente de Photoshop.
Tras guardar los cambios, vemos que el icono de la
imagen en Dreamweaver ha cambiado, mostrando
ahora una flecha roja:     Esto indica que la imagen
que estamos viendo en Dreamweaver (jpg, psd, png)
no es la misma que el original (psd) ya que se ha
modificado.

Más contenido relacionado

La actualidad más candente

Trabajo practico 5
Trabajo practico 5Trabajo practico 5
Trabajo practico 5
Santiago Gallo
 
Trabajo practico n5
Trabajo practico n5Trabajo practico n5
Trabajo practico n5
Camlaisas
 
Tp 5
Tp 5Tp 5
Tpn5...2012
Tpn5...2012Tpn5...2012
Tpn5...2012
mariamontaldi
 
Trabajo practico 5 verdadero
Trabajo practico 5 verdaderoTrabajo practico 5 verdadero
Trabajo practico 5 verdadero
Bauti Aragon
 
Tp5 las pi
Tp5 las piTp5 las pi
Tp5 las pi
salazarvaleria
 
Elaboración de presentaciones con power point
Elaboración de presentaciones con power pointElaboración de presentaciones con power point
Elaboración de presentaciones con power point
cindybarron
 
Manual
ManualManual
Cuestionario De Point
Cuestionario De PointCuestionario De Point
Cuestionario De Point
k.l.j
 
Como se hacen los gif animados
Como se hacen los gif animadosComo se hacen los gif animados
Como se hacen los gif animados
carlosfernandochalamurcia
 
Power point..jp
Power point..jpPower point..jp
Power point..jp
lokapemu
 
trabajo7
trabajo7trabajo7
trabajo7
anitayjime
 
Trabajo práctico n° 5
Trabajo práctico n° 5Trabajo práctico n° 5
Trabajo práctico n° 5
kikimz
 
Tp5 121015161824-phpapp02
Tp5 121015161824-phpapp02Tp5 121015161824-phpapp02
Tp5 121015161824-phpapp02
facundogordillo
 
Presentacion de power poin
Presentacion de power poinPresentacion de power poin
Presentacion de power poin
XDennisse
 
Presentación Power Point
Presentación Power PointPresentación Power Point
Presentación Power Point
vinett
 

La actualidad más candente (16)

Trabajo practico 5
Trabajo practico 5Trabajo practico 5
Trabajo practico 5
 
Trabajo practico n5
Trabajo practico n5Trabajo practico n5
Trabajo practico n5
 
Tp 5
Tp 5Tp 5
Tp 5
 
Tpn5...2012
Tpn5...2012Tpn5...2012
Tpn5...2012
 
Trabajo practico 5 verdadero
Trabajo practico 5 verdaderoTrabajo practico 5 verdadero
Trabajo practico 5 verdadero
 
Tp5 las pi
Tp5 las piTp5 las pi
Tp5 las pi
 
Elaboración de presentaciones con power point
Elaboración de presentaciones con power pointElaboración de presentaciones con power point
Elaboración de presentaciones con power point
 
Manual
ManualManual
Manual
 
Cuestionario De Point
Cuestionario De PointCuestionario De Point
Cuestionario De Point
 
Como se hacen los gif animados
Como se hacen los gif animadosComo se hacen los gif animados
Como se hacen los gif animados
 
Power point..jp
Power point..jpPower point..jp
Power point..jp
 
trabajo7
trabajo7trabajo7
trabajo7
 
Trabajo práctico n° 5
Trabajo práctico n° 5Trabajo práctico n° 5
Trabajo práctico n° 5
 
Tp5 121015161824-phpapp02
Tp5 121015161824-phpapp02Tp5 121015161824-phpapp02
Tp5 121015161824-phpapp02
 
Presentacion de power poin
Presentacion de power poinPresentacion de power poin
Presentacion de power poin
 
Presentación Power Point
Presentación Power PointPresentación Power Point
Presentación Power Point
 

Destacado

La nueva nutrición
La nueva nutriciónLa nueva nutrición
La nueva nutrición
Adriana Rios Salazar
 
Jonathan pineda presentacion jj
Jonathan pineda presentacion jjJonathan pineda presentacion jj
Jonathan pineda presentacion jj
jonatjpn20
 
Presentacion ·2
Presentacion ·2Presentacion ·2
Presentacion ·2
Nico Ospina
 
Das problem mit der lösung von windows 8
Das problem mit der lösung von windows 8Das problem mit der lösung von windows 8
Das problem mit der lösung von windows 8
winema gaven
 
El internet
El internetEl internet
Michelita
MichelitaMichelita
Michelita
Evelyn Ruiz
 
Convenio hydrofisio escuela de futbol cd toledo
Convenio hydrofisio   escuela de futbol cd toledoConvenio hydrofisio   escuela de futbol cd toledo
Convenio hydrofisio escuela de futbol cd toledo
Carlos Ignacio Calzada Ruiz
 
Portafolio profesional
Portafolio profesionalPortafolio profesional
Portafolio profesional
Ana Gutierrez
 
Ejercicio produc
Ejercicio producEjercicio produc
Ejercicio produc
Stefy Villa
 
Wirksames Projektmanagement
Wirksames ProjektmanagementWirksames Projektmanagement
Wirksames Projektmanagement
Michael Laussegger
 
Trabajo final
Trabajo finalTrabajo final
Trabajo final
lauragutierrezdd
 
Leyes de gestalt
Leyes de gestaltLeyes de gestalt
Leyes de gestalt
alekogan
 
SuperHero Gifts
SuperHero GiftsSuperHero Gifts
SuperHero Gifts
iamrye
 
So funktionieren libertello Portale - Am Beispiel von urlaub-mit-der-familie.de
So funktionieren libertello Portale - Am Beispiel von urlaub-mit-der-familie.deSo funktionieren libertello Portale - Am Beispiel von urlaub-mit-der-familie.de
So funktionieren libertello Portale - Am Beispiel von urlaub-mit-der-familie.de
libertello GmbH
 
Portafolio de evaluación
Portafolio de evaluaciónPortafolio de evaluación
Portafolio de evaluación
Noranappa-1
 
Atemwegsinfekte in der Praxis
Atemwegsinfekte in der PraxisAtemwegsinfekte in der Praxis
Atemwegsinfekte in der Praxis
Eberhard Scheuer
 
Google +
Google +Google +
Google +
Evelyn Ruiz
 
Tics
TicsTics

Destacado (20)

Presentacio confidencialitat 2012
Presentacio confidencialitat 2012Presentacio confidencialitat 2012
Presentacio confidencialitat 2012
 
La nueva nutrición
La nueva nutriciónLa nueva nutrición
La nueva nutrición
 
Jonathan pineda presentacion jj
Jonathan pineda presentacion jjJonathan pineda presentacion jj
Jonathan pineda presentacion jj
 
Presentacion ·2
Presentacion ·2Presentacion ·2
Presentacion ·2
 
Das problem mit der lösung von windows 8
Das problem mit der lösung von windows 8Das problem mit der lösung von windows 8
Das problem mit der lösung von windows 8
 
El internet
El internetEl internet
El internet
 
Michelita
MichelitaMichelita
Michelita
 
Convenio hydrofisio escuela de futbol cd toledo
Convenio hydrofisio   escuela de futbol cd toledoConvenio hydrofisio   escuela de futbol cd toledo
Convenio hydrofisio escuela de futbol cd toledo
 
Portafolio profesional
Portafolio profesionalPortafolio profesional
Portafolio profesional
 
Ejercicio produc
Ejercicio producEjercicio produc
Ejercicio produc
 
Wirksames Projektmanagement
Wirksames ProjektmanagementWirksames Projektmanagement
Wirksames Projektmanagement
 
Trabajo final
Trabajo finalTrabajo final
Trabajo final
 
Leyes de gestalt
Leyes de gestaltLeyes de gestalt
Leyes de gestalt
 
SuperHero Gifts
SuperHero GiftsSuperHero Gifts
SuperHero Gifts
 
So funktionieren libertello Portale - Am Beispiel von urlaub-mit-der-familie.de
So funktionieren libertello Portale - Am Beispiel von urlaub-mit-der-familie.deSo funktionieren libertello Portale - Am Beispiel von urlaub-mit-der-familie.de
So funktionieren libertello Portale - Am Beispiel von urlaub-mit-der-familie.de
 
Portafolio de evaluación
Portafolio de evaluaciónPortafolio de evaluación
Portafolio de evaluación
 
Schloss braunfels
Schloss braunfelsSchloss braunfels
Schloss braunfels
 
Atemwegsinfekte in der Praxis
Atemwegsinfekte in der PraxisAtemwegsinfekte in der Praxis
Atemwegsinfekte in der Praxis
 
Google +
Google +Google +
Google +
 
Tics
TicsTics
Tics
 

Similar a Tellez alcantar y perez vazquez 6ºf

Imagen
ImagenImagen
Imagen
pedrin_irre
 
DREAMWEVER_IMAGENES
DREAMWEVER_IMAGENESDREAMWEVER_IMAGENES
DREAMWEVER_IMAGENES
Jesz14
 
Presentacion M4
Presentacion M4Presentacion M4
Presentacion M4
elorri
 
Curso writer3
Curso writer3Curso writer3
Curso writer3
saul frias
 
Creacion Pagina Web Unidad 5
Creacion Pagina Web Unidad 5Creacion Pagina Web Unidad 5
Creacion Pagina Web Unidad 5
morchito03
 
3.InsercióN De Objetos En Documentos
3.InsercióN De Objetos En Documentos3.InsercióN De Objetos En Documentos
3.InsercióN De Objetos En Documentos
CANDIDO RUIZ
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
Rafael Rios R
 
Unidad 2
Unidad 2Unidad 2
6) ImáGenes [Autoguardado]
6) ImáGenes [Autoguardado]6) ImáGenes [Autoguardado]
6) ImáGenes [Autoguardado]
Luis Garces
 
Illustrator cs6 tutorial Compilación
Illustrator cs6 tutorial CompilaciónIllustrator cs6 tutorial Compilación
Illustrator cs6 tutorial Compilación
Myriam Noury Punina
 
Unidad 2
Unidad 2Unidad 2
00 apunte photoshop - www.estudioelli.com.ar
00   apunte photoshop - www.estudioelli.com.ar00   apunte photoshop - www.estudioelli.com.ar
00 apunte photoshop - www.estudioelli.com.ar
Josefina Elli
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
Unidad 2Unidad 2
Gimp apoyo a la sesión 1 del curso del cep
Gimp apoyo a la sesión 1 del curso del cepGimp apoyo a la sesión 1 del curso del cep
Gimp apoyo a la sesión 1 del curso del cep
Daniel Cantero Montiel
 
Optimizar imágenes para web con Fireworks
Optimizar imágenes para web con FireworksOptimizar imágenes para web con Fireworks
Optimizar imágenes para web con Fireworks
Colectivo Arista
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
Rafael Rios R
 
Unidad 2 gaem
Unidad 2 gaemUnidad 2 gaem
Unidad 2 gaem
Crx Irre
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
Unidad 2Unidad 2

Similar a Tellez alcantar y perez vazquez 6ºf (20)

Imagen
ImagenImagen
Imagen
 
DREAMWEVER_IMAGENES
DREAMWEVER_IMAGENESDREAMWEVER_IMAGENES
DREAMWEVER_IMAGENES
 
Presentacion M4
Presentacion M4Presentacion M4
Presentacion M4
 
Curso writer3
Curso writer3Curso writer3
Curso writer3
 
Creacion Pagina Web Unidad 5
Creacion Pagina Web Unidad 5Creacion Pagina Web Unidad 5
Creacion Pagina Web Unidad 5
 
3.InsercióN De Objetos En Documentos
3.InsercióN De Objetos En Documentos3.InsercióN De Objetos En Documentos
3.InsercióN De Objetos En Documentos
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
 
6) ImáGenes [Autoguardado]
6) ImáGenes [Autoguardado]6) ImáGenes [Autoguardado]
6) ImáGenes [Autoguardado]
 
Illustrator cs6 tutorial Compilación
Illustrator cs6 tutorial CompilaciónIllustrator cs6 tutorial Compilación
Illustrator cs6 tutorial Compilación
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
 
00 apunte photoshop - www.estudioelli.com.ar
00   apunte photoshop - www.estudioelli.com.ar00   apunte photoshop - www.estudioelli.com.ar
00 apunte photoshop - www.estudioelli.com.ar
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
 
Gimp apoyo a la sesión 1 del curso del cep
Gimp apoyo a la sesión 1 del curso del cepGimp apoyo a la sesión 1 del curso del cep
Gimp apoyo a la sesión 1 del curso del cep
 
Optimizar imágenes para web con Fireworks
Optimizar imágenes para web con FireworksOptimizar imágenes para web con Fireworks
Optimizar imágenes para web con Fireworks
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
 
Unidad 2 gaem
Unidad 2 gaemUnidad 2 gaem
Unidad 2 gaem
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
 

Último

Transformando la Evaluacion con Inteligencia Artificial Ccesa007.pdf
Transformando la Evaluacion con Inteligencia Artificial  Ccesa007.pdfTransformando la Evaluacion con Inteligencia Artificial  Ccesa007.pdf
Transformando la Evaluacion con Inteligencia Artificial Ccesa007.pdf
Demetrio Ccesa Rayme
 
Tu, Tu Hijo y la Escuela Ken Robinson Ccesa007.pdf
Tu,  Tu Hijo y la  Escuela  Ken Robinson  Ccesa007.pdfTu,  Tu Hijo y la  Escuela  Ken Robinson  Ccesa007.pdf
Tu, Tu Hijo y la Escuela Ken Robinson Ccesa007.pdf
Demetrio Ccesa Rayme
 
FEEDBACK DE LA ESTRUCTURA CURRICULAR- 2024. Completo - Jose Luis Jimenez Rodr...
FEEDBACK DE LA ESTRUCTURA CURRICULAR- 2024. Completo - Jose Luis Jimenez Rodr...FEEDBACK DE LA ESTRUCTURA CURRICULAR- 2024. Completo - Jose Luis Jimenez Rodr...
FEEDBACK DE LA ESTRUCTURA CURRICULAR- 2024. Completo - Jose Luis Jimenez Rodr...
Jose Luis Jimenez Rodriguez
 
Los Formularios de Google: creación, gestión y administración de respuestas (...
Los Formularios de Google: creación, gestión y administración de respuestas (...Los Formularios de Google: creación, gestión y administración de respuestas (...
Los Formularios de Google: creación, gestión y administración de respuestas (...
Cátedra Banco Santander
 
Cultura Organizacional con Responsabilidad Social Empresarial.pdf
Cultura Organizacional con Responsabilidad Social Empresarial.pdfCultura Organizacional con Responsabilidad Social Empresarial.pdf
Cultura Organizacional con Responsabilidad Social Empresarial.pdf
JonathanCovena1
 
EXPERIENCIA DE APRENDIZAJE N° 09 01 AL 19 DE JULIO.docx
EXPERIENCIA DE APRENDIZAJE N° 09 01 AL 19 DE JULIO.docxEXPERIENCIA DE APRENDIZAJE N° 09 01 AL 19 DE JULIO.docx
EXPERIENCIA DE APRENDIZAJE N° 09 01 AL 19 DE JULIO.docx
d33673240a
 
Licencias de contenidos y propiedad intelectual (1 de julio de 2024)
Licencias de contenidos y propiedad intelectual (1 de julio de 2024)Licencias de contenidos y propiedad intelectual (1 de julio de 2024)
Licencias de contenidos y propiedad intelectual (1 de julio de 2024)
Cátedra Banco Santander
 
Imagenes-en-la-Comunicacion-Didactica.pdf
Imagenes-en-la-Comunicacion-Didactica.pdfImagenes-en-la-Comunicacion-Didactica.pdf
Imagenes-en-la-Comunicacion-Didactica.pdf
ShimmyKoKoBop
 
Plataformas de vídeo online (2 de julio de 2024)
Plataformas de vídeo online (2 de julio de 2024)Plataformas de vídeo online (2 de julio de 2024)
Plataformas de vídeo online (2 de julio de 2024)
Cátedra Banco Santander
 
Curación de contenidos (1 de julio de 2024)
Curación de contenidos (1 de julio de 2024)Curación de contenidos (1 de julio de 2024)
Curación de contenidos (1 de julio de 2024)
Cátedra Banco Santander
 
PPT: Un día en el ministerio de Jesús.pptx
PPT: Un día en el ministerio de Jesús.pptxPPT: Un día en el ministerio de Jesús.pptx
PPT: Un día en el ministerio de Jesús.pptx
https://gramadal.wordpress.com/
 
UT 3 LA PLANIFICACIÓN CURRICULAR DESDE LOS ELEMENTOS CURRICULARES.pptx
UT 3 LA PLANIFICACIÓN CURRICULAR DESDE LOS ELEMENTOS CURRICULARES.pptxUT 3 LA PLANIFICACIÓN CURRICULAR DESDE LOS ELEMENTOS CURRICULARES.pptx
UT 3 LA PLANIFICACIÓN CURRICULAR DESDE LOS ELEMENTOS CURRICULARES.pptx
Leonardo Salvatierra
 
La Gatera de la Villa nº 52. Historia y patrimonio de Madrid.
La Gatera de la Villa nº 52. Historia y patrimonio de Madrid.La Gatera de la Villa nº 52. Historia y patrimonio de Madrid.
La Gatera de la Villa nº 52. Historia y patrimonio de Madrid.
La Gatera de la Villa
 
Taller Intensivo de Formación Continua 2024
Taller Intensivo de Formación Continua 2024Taller Intensivo de Formación Continua 2024
Taller Intensivo de Formación Continua 2024
maria larios
 
Semana 1 Derecho a interponer recursos y reparación.
Semana 1 Derecho a interponer recursos y reparación.Semana 1 Derecho a interponer recursos y reparación.
Semana 1 Derecho a interponer recursos y reparación.
SergioAlfrediMontoya
 
Evaluacion Formativa en el Aula ECH1 Ccesa007.pdf
Evaluacion Formativa en el Aula   ECH1  Ccesa007.pdfEvaluacion Formativa en el Aula   ECH1  Ccesa007.pdf
Evaluacion Formativa en el Aula ECH1 Ccesa007.pdf
Demetrio Ccesa Rayme
 
Aplicaciones móviles de grabación (2 de julio de 2024)
Aplicaciones móviles de grabación (2 de julio de 2024)Aplicaciones móviles de grabación (2 de julio de 2024)
Aplicaciones móviles de grabación (2 de julio de 2024)
Cátedra Banco Santander
 
DIBUJANDO CON MATEMÁTICA LA GIMNASIA OLÍMPICA. Por JAVIER SOLIS NOYOLA
DIBUJANDO CON MATEMÁTICA LA GIMNASIA OLÍMPICA. Por JAVIER SOLIS NOYOLADIBUJANDO CON MATEMÁTICA LA GIMNASIA OLÍMPICA. Por JAVIER SOLIS NOYOLA
DIBUJANDO CON MATEMÁTICA LA GIMNASIA OLÍMPICA. Por JAVIER SOLIS NOYOLA
JAVIER SOLIS NOYOLA
 
Escuelas Creativas Ken Robinson Ccesa007.pdf
Escuelas Creativas Ken Robinson   Ccesa007.pdfEscuelas Creativas Ken Robinson   Ccesa007.pdf
Escuelas Creativas Ken Robinson Ccesa007.pdf
Demetrio Ccesa Rayme
 
PLAN DE TRABAJO DIA DEL LOGRO 2024 URP.docx
PLAN DE TRABAJO DIA DEL LOGRO 2024 URP.docxPLAN DE TRABAJO DIA DEL LOGRO 2024 URP.docx
PLAN DE TRABAJO DIA DEL LOGRO 2024 URP.docx
william antonio Chacon Robles
 

Último (20)

Transformando la Evaluacion con Inteligencia Artificial Ccesa007.pdf
Transformando la Evaluacion con Inteligencia Artificial  Ccesa007.pdfTransformando la Evaluacion con Inteligencia Artificial  Ccesa007.pdf
Transformando la Evaluacion con Inteligencia Artificial Ccesa007.pdf
 
Tu, Tu Hijo y la Escuela Ken Robinson Ccesa007.pdf
Tu,  Tu Hijo y la  Escuela  Ken Robinson  Ccesa007.pdfTu,  Tu Hijo y la  Escuela  Ken Robinson  Ccesa007.pdf
Tu, Tu Hijo y la Escuela Ken Robinson Ccesa007.pdf
 
FEEDBACK DE LA ESTRUCTURA CURRICULAR- 2024. Completo - Jose Luis Jimenez Rodr...
FEEDBACK DE LA ESTRUCTURA CURRICULAR- 2024. Completo - Jose Luis Jimenez Rodr...FEEDBACK DE LA ESTRUCTURA CURRICULAR- 2024. Completo - Jose Luis Jimenez Rodr...
FEEDBACK DE LA ESTRUCTURA CURRICULAR- 2024. Completo - Jose Luis Jimenez Rodr...
 
Los Formularios de Google: creación, gestión y administración de respuestas (...
Los Formularios de Google: creación, gestión y administración de respuestas (...Los Formularios de Google: creación, gestión y administración de respuestas (...
Los Formularios de Google: creación, gestión y administración de respuestas (...
 
Cultura Organizacional con Responsabilidad Social Empresarial.pdf
Cultura Organizacional con Responsabilidad Social Empresarial.pdfCultura Organizacional con Responsabilidad Social Empresarial.pdf
Cultura Organizacional con Responsabilidad Social Empresarial.pdf
 
EXPERIENCIA DE APRENDIZAJE N° 09 01 AL 19 DE JULIO.docx
EXPERIENCIA DE APRENDIZAJE N° 09 01 AL 19 DE JULIO.docxEXPERIENCIA DE APRENDIZAJE N° 09 01 AL 19 DE JULIO.docx
EXPERIENCIA DE APRENDIZAJE N° 09 01 AL 19 DE JULIO.docx
 
Licencias de contenidos y propiedad intelectual (1 de julio de 2024)
Licencias de contenidos y propiedad intelectual (1 de julio de 2024)Licencias de contenidos y propiedad intelectual (1 de julio de 2024)
Licencias de contenidos y propiedad intelectual (1 de julio de 2024)
 
Imagenes-en-la-Comunicacion-Didactica.pdf
Imagenes-en-la-Comunicacion-Didactica.pdfImagenes-en-la-Comunicacion-Didactica.pdf
Imagenes-en-la-Comunicacion-Didactica.pdf
 
Plataformas de vídeo online (2 de julio de 2024)
Plataformas de vídeo online (2 de julio de 2024)Plataformas de vídeo online (2 de julio de 2024)
Plataformas de vídeo online (2 de julio de 2024)
 
Curación de contenidos (1 de julio de 2024)
Curación de contenidos (1 de julio de 2024)Curación de contenidos (1 de julio de 2024)
Curación de contenidos (1 de julio de 2024)
 
PPT: Un día en el ministerio de Jesús.pptx
PPT: Un día en el ministerio de Jesús.pptxPPT: Un día en el ministerio de Jesús.pptx
PPT: Un día en el ministerio de Jesús.pptx
 
UT 3 LA PLANIFICACIÓN CURRICULAR DESDE LOS ELEMENTOS CURRICULARES.pptx
UT 3 LA PLANIFICACIÓN CURRICULAR DESDE LOS ELEMENTOS CURRICULARES.pptxUT 3 LA PLANIFICACIÓN CURRICULAR DESDE LOS ELEMENTOS CURRICULARES.pptx
UT 3 LA PLANIFICACIÓN CURRICULAR DESDE LOS ELEMENTOS CURRICULARES.pptx
 
La Gatera de la Villa nº 52. Historia y patrimonio de Madrid.
La Gatera de la Villa nº 52. Historia y patrimonio de Madrid.La Gatera de la Villa nº 52. Historia y patrimonio de Madrid.
La Gatera de la Villa nº 52. Historia y patrimonio de Madrid.
 
Taller Intensivo de Formación Continua 2024
Taller Intensivo de Formación Continua 2024Taller Intensivo de Formación Continua 2024
Taller Intensivo de Formación Continua 2024
 
Semana 1 Derecho a interponer recursos y reparación.
Semana 1 Derecho a interponer recursos y reparación.Semana 1 Derecho a interponer recursos y reparación.
Semana 1 Derecho a interponer recursos y reparación.
 
Evaluacion Formativa en el Aula ECH1 Ccesa007.pdf
Evaluacion Formativa en el Aula   ECH1  Ccesa007.pdfEvaluacion Formativa en el Aula   ECH1  Ccesa007.pdf
Evaluacion Formativa en el Aula ECH1 Ccesa007.pdf
 
Aplicaciones móviles de grabación (2 de julio de 2024)
Aplicaciones móviles de grabación (2 de julio de 2024)Aplicaciones móviles de grabación (2 de julio de 2024)
Aplicaciones móviles de grabación (2 de julio de 2024)
 
DIBUJANDO CON MATEMÁTICA LA GIMNASIA OLÍMPICA. Por JAVIER SOLIS NOYOLA
DIBUJANDO CON MATEMÁTICA LA GIMNASIA OLÍMPICA. Por JAVIER SOLIS NOYOLADIBUJANDO CON MATEMÁTICA LA GIMNASIA OLÍMPICA. Por JAVIER SOLIS NOYOLA
DIBUJANDO CON MATEMÁTICA LA GIMNASIA OLÍMPICA. Por JAVIER SOLIS NOYOLA
 
Escuelas Creativas Ken Robinson Ccesa007.pdf
Escuelas Creativas Ken Robinson   Ccesa007.pdfEscuelas Creativas Ken Robinson   Ccesa007.pdf
Escuelas Creativas Ken Robinson Ccesa007.pdf
 
PLAN DE TRABAJO DIA DEL LOGRO 2024 URP.docx
PLAN DE TRABAJO DIA DEL LOGRO 2024 URP.docxPLAN DE TRABAJO DIA DEL LOGRO 2024 URP.docx
PLAN DE TRABAJO DIA DEL LOGRO 2024 URP.docx
 

Tellez alcantar y perez vazquez 6ºf

  • 1. Integrantes: I ls e Ale jan d ra P é re z Vá z q u e z Maria Guadalupe Tellez Alcantar
  • 3. 6.1. Introducción Las imágenes son un aspecto muy importante de la web. Ya sea como complementos a la información o parte del diseño, la hacen mucho más atractiva a ojos del visitante. No obstante, no conviene abusar, ya que aumentarán mucho el tamaño final de la web. Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web. Tipos de formatos Formato gif Utilizan un máximo de 256 colores, y son recomendable para Dibujos con grandes áreas de un mismo color o de tonos no continuos. Formatos jng: Estas imágenes pueden contener millones de colores, e un archivo comprimido, de tamaño razonable. Formato png: Se trata de un formato de compresión sin perdida. también resulta especialmente indicado para imágenes con
  • 4. 6.2. Insertar una imagen Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después de esto, ya es posible seleccionar una imagen a través de la nueva ventana. Cuando te acostumbres, te será más cómodo acceder con la combinación de teclas Ctrl + Alt + I .
  • 5. En Relativa a es posible especificar si la imagen será relativa al documento o a la carpeta raíz del sitio. Es preferible que sea relativa al Documento, ya que si cambiamos la página de carpeta, lo habitual es cambiar también sus imágenes. Lo mismo ocurre cuando se selecciona un documento para crear un vínculo. La ruta en la que se encuentra la imagen aparecerá representada de una u otra forma en el campo URL de la ventana y en el campo Origen del inspector de propiedades, dependiendo de si ha sido insertada como Si insertamos una imagendelluego o relativa al la relativa a la carpeta raíz y sitio la borramos, documento. movemos, o escribimos mal su nombre, en Dreamweaver aparecerá así indicando que el enlace al archivo está roto. En ese caso, la imagen que aparecerá en el navegador será Similar a ésta: . Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o el contenido del campo Alt del inspector d propiedades, que explicaremos a continuación. Para practicar
  • 6. 6.3. Propiedades de una imagen Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia: Desde aquí podremos establecer distintos atributos a la imagen: •Ancho y Alto son las dimensiones de la imagen. Dreamweaver las pondrá directamente. •Como pasaba con el texto, podemos crear un hiperenlace en la imagen escribiendo la dirección en el campo Vínculo, y decidir en qué ventana se abre con el campo Destino. •En el campo ALT escribimos el texto que remplazara a la imagen si estas no puede mostrarse. •En clase podrás asignarle un estilo que hayas creado anteriormente.
  • 7. 6.4. Cambiar el tamaño de una imagen Dentro de Dreamweaver puede modificarse el tamaño de las imágenes. Por un lado, podemos cambiar el tamaño con el que se ve una imagen, pero dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, que conservará el tamaño original. Es muy probable que la imagen resultante no sea de buena calidad, en comparación de cómo podría quedar modificándola desde un editor externo, como Fireworks, Photoshop, etc.. Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el icono de Dreamweaver y modificamos su tamaño de varias formas diferentes: El resultado mas o menos satisfactorio, dependiendo del navegador que es el que aplica realmente el recalado aunque en ocasiones es imposible rescatar la calidad de la imagen.
  • 8. Existen dos formas de modificar el tamaño. Existen dos formas de modificar el tamaño. Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los recuadros negros que aparecen alrededor de la imagen. La otra es a través de inspector de propiedades, cambiando los campos Ancho o Alto. Estos campos aparecerán en el inspector cuando esté seleccionada alguna imagen. Si estos campos no contienen el tamaño original de la imagen, el valor aparecerá resaltado en negrita y aparecerá a la derecha una flecha circular que permite volver al tamaño original haciendo clic sobre ella.            
  • 9. D r e a m w e a v e r t a m b ié n n o s p e r m it e c a m b ia r e l t a m a ñ o r e a l d e l a r c h iv o d e im a g e n . P a r a h a c e r lo , s e le c c io n a m o s la im a g e n , y p u ls a m o s e n e l ic o n o d e l I n s p e c t o r d e p r o p ie d a d e s . S e a b r ir á la v e n t a n a P r e s e n t a c ió n p r e lim in a r d e la im a g e n . N o s fij a m o s e n la p e s t a ñ a A r c h iv o .
  • 10. En la sección escala, podemos establecer un porcentaje del tamaño original. El nuevo tamaño se mostrará en An (ancho) y Al (alto). También podemos introducir directamente el nuevo tamaño. 6.5. IMAGEN DE SUSTITUCIÓN. ROLLOVER Un rollover es una imagen que cambia por otra cuando el puntero se sitúa sobre ella. Para insertar un rollover hay que dirigirse al menú Insertar, Objetos de Imagen, a la opción Imagen de sustitución. En la nueva ventana hay que especificar la imagen original y la de sustitución.
  • 11. El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que aparecerá en lugar de la imagen en el caso de que por algún motivo ésta no pueda ser mostrada en el navegador. El texto alternativo puede asignarse a todas las imágenes, no sólo a los rollovers. Puede hacerse a través del campo Alt del inspector de propiedades de la imagen seleccionada. *Existe una forma parecida de crear estos efectos utilizando CSS, y de hecho son más utilizados. Básicamente consiste en cambiar la imagen de fondo de un elemento.
  • 12. 6.6. OBJETOS INTELIGENTES Los objetos inteligentes son imágenes que obtenemos directamente desde un archivo de Photoshop (.psd). Al insertarlo, lo hacemos igual que con cualquier imagen, eligiendo el archivo de Photoshop. * Tras abrirlo, Dreamweaver nos pedirá que elijamos uno de los formatos gif, png o jpg y lo guardemos, con las mismas opciones que encontrábamos al pulsar el botón del Inspector de propiedades.
  • 13. Puede que en cualquier momento queramos modificar la imagen. Podemos hacerlo abriendo el archivo .psd, o pulsando el icono del Inspector de propiedades, que abrirá el archivo fuente de Photoshop. Tras guardar los cambios, vemos que el icono de la imagen en Dreamweaver ha cambiado, mostrando ahora una flecha roja: Esto indica que la imagen que estamos viendo en Dreamweaver (jpg, psd, png) no es la misma que el original (psd) ya que se ha modificado.