1.

IMÁGENES

Una imagen digital es una imagen que ha pasado por un proceso de conversión, para que pueda
ser almacenada en forma de bits en un computador.

Cuando el ordenador trabaja en modo gráfico (en windows) la pantalla está dividida en pixeles
que pueden tomar distintos colores formando así un dibujo o imagen digital. Cuanto más píxeles
haya y cuantos más colores distintos pueden tomar, mayor será el detalle de las imágenes o
dibujos que se pueden obtener.

Cuando se trabaja en Windows la pantalla puede, por ejemplo, tener 640 columnas por 480 filas
de píxeles y cada píxel puede tomar 16 colores. A esto se le llama resolución de pantalla.
Cuanto mayor sea la resolución de una pantalla las imágenes se podrán ver con más calidad pero
se debe tener en cuenta que una imagen con muchos píxeles aumentará el espacio que ocupa en
disco.

Los formatos más usados:

JPEG (Joint Phothografic Experts Group)

Es un formato estandarizado que permite compresión de imágenes. JPEG se diseño con el fin de
poder comprimir imágenes a todo color o en escalas de grises que representaran fotografías o
imágenes del mundo real. Funciona muy bien en fotografías, arte de la naturaleza, pero no tan
bien en caricaturas o dibujos simples.

GIF(Graphic Interchange Format)

El formato gif fue desarrollado por CompuServe para proveer de un formato estándar que fuera
independiente del tipo de máquina que se usara. El formato gif está limitado a un máximo de 256
colores.

En general se recomienda este formato para imágenes simples. Para los fondos texturizados no
son muy útiles puesto que al tener pocos colores disponibles en el ordenador que las recibe
intenta encontrar el color más cercano, produciéndose distorsiones que impiden que el texto sea
visto de forma adecuada.

Estos son los dos formatos admitidos por la web. Esto quiere decir que si tienes una imagen o un
dibujo en otro formato habrá que cambiarlo. Para ello se utilizará cualquier programa de diseño.
Inserción de una imagen

 Colocar el cursor donde se quiere insertar la imagen

 En la barra de herramientas pulsar el botón imágenes y seleccionar imágenes

 Se selecciona la imagen a insertar y aceptar. Si no esta en la carpeta local Dreamweaver

preguntará si la se quiere copiar. Se responderá que si.

En nuestro ejemplo: insertaremos después del título románico la imagen arteromanico.jpg que
se encuentra en la carpeta imágenes.

Propiedades de la imagen

Una vez insertada la imagen se puede cambiar o visualizar sus características. Para ello se
selecciona la imagen y se trabaja con el Inspector de propiedades.

En esta ventana de propiedades se puede:

 Conocer el tamaño de la imagen

 Determinar exactamente el ancho y alto de la imagen.
 Alinearla a la izquierda, centro o derecha con los iconos de alineación.
 Ponerle un borde (se debe indicar el tamaño en pixeles).
 Escribir un texto alternativo en el cuadro Alt (este texto alternativo es el que se verá
en la web si pasas el ratón sobre la imagen descargada o cuando se está descargando).
Quick Tag Editor: en netscape no se puede utilizar la etiqueta alt para añadir un texto
alternativo , se deberá cambiar por la etiqueta title, una forma de cambiar es a través de
este botón que nos mostrará el código de la imagen seleccionada.
  Alinear el texto alrededor de la misma eligiendo el que se desee en el cuadro alinear

Predeterminado suele especificar una alineación con la línea de base. (El valor predeterminado puede variar
en función del navegador del visitante del sitio.)

Línea de base e Inferior alinean la línea de base del texto (u otro elemento del mismo párrafo) con la
parte inferior del objeto seleccionado.

Superior alinea la parte superior de una imagen con la parte superior del elemento más alto (imagen o
texto) de la línea actual.

Medio alinea la parte central de la imagen con la línea de base de la línea actual.

Texto superior alinea la parte superior de la imagen con la parte superior del carácter más alto de la línea
de texto.

Medio absoluta alinea la parte central de la imagen con la parte central del texto de la línea actual.

Inferior absoluta alinea la parte inferior de la imagen con la parte inferior de la línea de texto (incluidos
los trazos descendentes, como en el caso de la letra g).

Izquierda sitúa la imagen seleccionada en el margen izquierdo, ajustando a la derecha el texto que la rodea.
Si hay texto alineado a la izquierda delante del objeto, los objetos alineados a la izquierda suelen pasar a
una nueva línea.

Derecha sitúa la imagen en el margen derecho, ajustando a la izquierda el texto que la rodea. Si hay texto
alineado a la derecha delante del objeto, los objetos alineados a la derecha suelen pasar a una nueva línea

 Especificar la separación vertical y horizontal del texto alrededor de la imagen en los

cuadros espacio v y espacio H
 Ponerle un nombre a la imagen en el cuadro que aparece debajo de la imagen.

Imagen de sustitución

Se puede añadir a la página una imagen de sustitución, de manera que cuando se pase el ratón
sobre una imagen ésta queda sustituida por otra.

 Colocar el cursor donde se quiere poner la imagen original y la de sustitución.

 En la barra de herramientas pulsar el botón imágenes y seleccionar imagen de
sustitución.
  Indicamos la imagen original y la de sustitución. Es recomendable que las dos imágenes
tengan el mismo tamaño.

2. TABLAS

Dreamweaver ha sido especialmente diseñado para trabajar con tablas. Estas son importantes
si se busca un diseño exacto y con precisión de píxeles.

Cuando se inserte una tabla, en la barra de estado aparecerán todas las etiquetas
correspondientes a la misma.

<table> es la etiqueta correspondiente a toda la tabla. Si haces clic sobre ella con el cursor
situado en una celda de la misma se seleccionará toda la tabla y se abrirá su correspondiente
Inspector de propiedades.

Con ayuda del inspector se puede cambiar las propiedades generales de la tabla: añadir filas o
columnas, tamaño, la alineación, espacio celda o cellspacing (distancia que hay entre una celda y
otra), borde y su color, relleno de la celdas o cellpadding (espacio entre el borde y el contenido
de la celda)...

<tr> es la etiqueta de fila de tabla. Si se hace clic en ella, se seleccionará la fila en la que está
situado el cursor y se abrirá el Inspector de propiedades de la fila, en la que se podrá cambiar
el formato del texto de las celdas, unir o dividir las celdas de la misma , fijar el ancho y el alto
de las celdas,...

<td> es la etiqueta de la celda. Si se hace un clic sobre ella con el cursor en el interior de una
celda, ésta quedará seleccionada y se abrirá su correspondiente inspector de propiedades.
Las propiedades son las mismas que la de la fila.

Ejemplo:

Vamos a insertar una tabla en el archivo index.htm, para ello colocar el cursor debajo del título
“la arquitectura románica y gótica”.

 Insertar una tabla desde la barra de menus insertar/tabla o de la barra de

herramientas comunes pulsando el botón .

 Insertamos dos filas y dos columnas. El ancho de la tabla será de 100 en porcentaje lo
que significa el ancho de la página. El relleno de la celda 5 y el espacio 10.

Al insertar la tabla se visualiza el ancho

de la tabla tanto en porcentaje como en
píxeles. Si pulsamos los triángulos nos
permitirá insertar o borrar columnas.

 Copiar el título Románico y pegarlo en la celda de la izquierda superior. En la celda de

abajo copiar el texto correspondiente. Lo propio con el gótico. De momento no tocar las
imágenes.
 Vamos a dividir una celda en dos. Para ello situar el cursor en la celda donde pone
Románico y en el inspector de propiedades seleccionar dividir columnas . Lo propio con
el gótico.

 Copiar y pegar las imágenes en sus respectivas celdas.

Se habrá observado que las celdas han ido cambiando el tamaño en función del contenido que
tienen dentro, y es por eso que si queremos darle una presentación más proporcionada se
deben arrastrar los bordes de la tabla hasta conseguir el efecto deseado.
 Para conseguir un ajuste perfecto se debe situar el cursor en una celda y poner en el
inspector de propiedades en la casilla an, el valor de porcentaje que deseamos. Por ejemplo
el 25% aunque a veces es mejor entrar en el código html y cambiar su tamaño
<td width=”25%”>.

3. ENLACES

En internet todo está conectado con vínculos. Los exploradores usan identificadores únicos (url)
para acceder a los distintos ordenadores conectados al ordenador.

Un vínculo de texto suele aparecer en la página subrayado y de color azul. Un vínculo de imagen
suele aparecer con un borde azul alrededor de la imagen. No obstante, estos colores
predeterminados se pueden cambiar en las propiedades de la página.

URLs absolutos

Son aquellos en los que se especifica la ruta completa de la página a la que se quiere acceder,
por ejemplo se puede establecer un vínculo a la dirección:
http://www.ikasleak.com/ikasleak/portada.html. En esta ruta se ha especificado el protocolo
de internet que se usará , el dominio en el que está la página (www.ikasleak.com) , la carpeta
donde se halla (ikasleak) y el nombre del archivo que se quiere abrir (portada.html).

URLs relativos

Normalmente se usan para hacer referencia a archivos que se encuentran en el mismo sitio Web.
Por ejemplo, si en el sitio web arte de un hipotético dominio www.educación.com , en el archivo
index.html se define un vínculo de texto y se pone como referencia diferencias.html, el
explorador Web lo interpreta como una dirección relativa y entiende que el archivo está en la
misma carpeta que index.html con lo que si la dirección de entrada es
www.educación.com/index.html , al hacer clic sobre el vínculo a la pagina diferencias.html,
quitará index de la dirección y pondrá diferencias.

Tipos de enlaces

 Anclas o enlaces dentro de una misma página.

 Vínculos con otra página de nuestro sitio.
 Vínculos con una página fuera de nuestro sitio.
 Enlaces con una dirección e-mail.

Ejemplo: abrimos el archivo monumentos gotico.html

Anclas o enlaces dentro de una misma página.

Son vínculos que permiten acceder rápidamente a la información situada en cualquier parte de
la página. Se pueden usar, por ejemplo, para poner un índice al principio de modo que al hacer clic
sobre un tema del mismo la ventana se desplace automáticamente al tema correspondiente.
Ejemplo:

 Situar el cursor en el título FRANCIA de la tabla.

 Ejecutar insertar/anclaje con nombre (o bien, seleccionar el botón anclaje con nombre
que se encuentra en la barra de herramientas común)

 Escribir el nombre del punto de anclaje (ejemplo FRANCIA)

 Seleccionar el texto o imagen donde se va a proceder el vínculo y escribir en el inspector
de propiedades, en el cuadro de diálogo vínculo, el nombre del anclaje generado
anteriormente precedido de #. (ejemplo seleccionamos la palabra Francia del comienzo
de la página y en el vínculo ponemos #FRANCIA).
 O bien, seleccionar el texto o imagen donde se va a poner el vínculo y haciendo un clic en
el botón señalar archivo del inspector de propiedades arrastrarlo hasta el lugar de punto

de anclaje que se ha creado.

Repetir con el resto de los países y guardar el documento.

También se puede crear un vínculo a un punto de anclaje de otra página del sitio.
Los pasos son los mismos que los descritos arriba con la única diferencia de que en el cuadro
de vínculo se pondrá el nombre de la página seguido del punto de anclaje.

Ejemplo: monumentos goticos.html#francia.

Vínculos con otra página de nuestro sitio.

Son enlaces que permiten abrir otra página de sitio desde la que está situado el vínculo.

Ejemplo: desde el archivo index.html se va a crear un enlace a la página diferencias.html

 Abrir el archivo index.

 Escribir debajo de gótico y de románico la palabra diferencias .
 Seleccionar la palabra diferencias y en la casilla vínculo indicar la página a la que se quiere
acceder.
Vínculos con una página fuera de nuestro sitio.

Son enlaces a páginas que están fuera del sitio que se ha creado, como la página de un museo, de
un periódico digital, de un portal,, por lo que es necesario conocer la dirección de la página en
cuestión.

Los pasos son los mismos que los anteriores, pero en la casilla vínculo se debe escribir la dirección
url absoluta. http://www.terra.es

Enlaces con una dirección e-mail.

Son vínculos que permiten abrir un programa de correo para enviar un e-mail a la dirección
indicada.

Ejemplo:

 Abrir el archivo index.html

 Introducir la imagen imágenes/recursos/3demail debajo del título principal y seleccionarla.
 En el cuadro vínculo escribir: mailto:nombre@direccion.com