Imagenes

-

Imagenes

7.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. Esta información puedes consultarla en el avanzado Formatos de imagen para web Avanzado.

7.2. Insertar una imagen

Ver el videotutorial
Para insertar una imagen hay que dirigirse al menú Insertar, después a la opción Imagen y dentro de ésta, Imagen otra vez.

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 relativa a la carpeta raíz del sitio o relativa al documento.
Por ejemplo, imagina que dentro de la carpeta raíz del sitio (la carpeta del sitio) se encuentran la carpeta imagenes y el documento en el que deseamos insertar la imagen. Dicha imagen, llamada aulaclic.jpg, se encuentra dentro de la carpeta imagenes.
En el caso de insertar la imagen como relativa al Documento la ruta sería:
imagenes/aulaclic.jpg
Mientras que en el caso de ser insertada como relativa a la Raíz del sitio la ruta sería:
/imagenes/aulaclic.jpg
Ocurre lo mismo que cuando se crea un hipervínculo a un documento relativo al documento o a la carpeta raíz del sitio.

Otra forma de insertar una imagen, es arrastrarla directamente desde el panel Archivos sobre el documento y soltarla en la posición deseada.

Una tercera opción es utilizar el panel Insertar, la categoría Común y luego la opción Imagen, lo que abre el cuadro de diálogo para seleccionar el archivo de imagen.

Si insertamos una imagen y luego la borramos, la movemos, o escribimos mal su nombre, en Dreamweaver aparecerá así  indicando que el enlace al archivo está roto.

Comentarios

Publicar un comentario

Entradas populares de este blog

DISEÑO DE PAGINA. MAQUETACION WEB

-
Imagen
Maquetar una página web La maquetación es la distribución de los elementos en nuestra página. Piensa en una página web cualquiera. Seguro que distingues algunos elementos claramente diferenciados, como un encabezado, columnas, y un pie de página. Hace unos años, la maquetación de las páginas web se realizaba utilizando tablas ( < table > ). Una vez entendido este proceso podía resultar sencillo, aunque si no se dominaban las tablas, podía convertirse en algo tedioso. El problema de las tablas es que generaban un página muy encorsetada, y el código se volvía complejo de entender. Además, algunos buscadores encontraban problemas al analizar la estructura de la página. Actualmente, la maquetación con tablas ha caído en desuso, y se realiza utilizando  capas  ( < div > ), también llamadas divisiones o contenedores. La colocación de las capas en la página se realiza a través de  CSS . Esto permite, por ejemplo, que podamos pasar de un diseño con un menú la...
Leer más

EL TEXTO: PROPÌEDADES Y FORMATOS

-
Imagen
EL TEXTO: PROPÌEDADES Y FORMATOS 4.1. Características del texto Las características del  texto seleccionado  pueden ser definidas a través del menú  Formato , y a través del  inspector de propiedades . Vamos a ver las posibilidades que se nos ofrecen a través del  inspector de propiedades , que están clasificadas en dos categorías  HTML  y  CSS .  Comenzamos viendo las propiedades  HTML Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en el navegador. Pero al final, podremos personalizarlas con CSS para que se vean exactamente como queramos. Formato:   Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o formato predeterminado. Los encabezados se utilizan para establecer títulos dentro de un documento. El formato predeterminado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen vari...
Leer más

EL ENTORNO DW CS6

-
Imagen
ENTORNO DW CS6 2.1. La pantalla inicial Al arrancar Dreamweaver aparece una  pantalla inicial  como ésta, vamos a ver sus componentes fundamentales. Así conoceremos los  nombres de los diferentes elementos  y será más fácil entender el resto del curso. La pantalla que se muestra a continuación (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento y dónde, como veremos más adelante. En el resto de esta unidad vamos a ir describiendo los puntos más importantes señalados en esta imagen por los números en azul del 1 al 9. 1.- Las barras. 2.- Las pestañas de documentos. 3.- La barra de estado. 4.- El panel de propiedades. 5.- Área de paneles. 6.- Paneles y ventanas. 7.- Línea inferior de pestañas. 8.- Vista diseño del documento. 9.- Vista código del documento. 2.2. Las barras 1.- La barra de la aplicación...
Leer más