2.9. INSERTAR SONIDO Y VIDEO EN UNA PAGINA WEB.

La inserción de sonido y video funciona de una forma muy parecida. Los archivos de video que se

admiten en las web tienen las extensiones.avi las que son de Microsoft Vídeo para Windows y .movo .qt los de Apple.

Los archivos de sonido son de muchas más clases porque se han utilizado desde hace mucho más

tiempo. Los más habituales son los siguientes:

 

.wav de Microsoft.

 

.sndy .mac de sonido Macintosh.

 

.au de audio de Sun.

 

.mido . midi que sólo se utilizan para música.

 

Sonido

 

Para insertar un archivo de audio en un documento tienes que dirigirte al menúInsertar,Medía, opciónPlug- in. A la derecha tienes un ejemplo de un archivo de sonido, para el que se muestran los controles de audio.

 

Video

 

Los formatos de vídeo que suelen

utilizarse

en Internet son elA VI, elM PEG y el

MOV.

Para insertar un archivo de vídeo en

un

documento tienes que dirigirte al

menú

Insertar, Medía, opción Plug-in.

 

Los videos también se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Estos valores pueden cambiarse a través del código, del mismo modo que en el caso de los archivos de audio, añadiendoa ut o sta r t= " fa lse" ylo o p= " tr ue".

 

Todos los objetos insertados a través de la opciónPlug-in precisan que el usuario tenga instalado

un reproductor o un plug-in apropiado para reproducirlos. En el campoOr igen del inspector de

propiedades se establece el archivo vinculado (el archivo de audio o de vídeo) que ha de

reproducirse.

2.8. DEFINIR SECCIONES DE MAPEO DE IMÁGENES EN UNA PAGINA WEB.

Puede hacer que parte de la imagen sea un enlace a otra página, es decir, puede hacer un mapa sobre la imagen de manera que secciones de la imagen sean enlaces.

 

Debe saber que para que una imagen sea tratada como un mapa, además de el código, debe incluir en la etiqueta de imagen correspondiente a la imagen a mapear el atributo usemap="#nombre del mapa".

2.7. MANIPULAR IMÁGENES Y ANIMACIONES EN UNA PAGINA WEB.

Las imágenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc. Pero no todos estos formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos navegadores.

Los formatos más utilizados son el GIF y el JPG, que a pesar de ser imágenes de menor calidad que las imágenes BMP, son más recomendables debido a que ocupan menos memoria. Vamos a ver un poco más sobre estos formatos:

 

Formato GIF:

 

Utilizan un máximo de 256 colores, y son recomendables para imágenes con grandes áreas de un mismo color o de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permiten contener transparencias y animación.

 

Formato JPG:

 

Las imágenes son de mayor calidad que las GIF, al poder contener millones de colores, pero el

tamaño de la imagen es mayor y tarda más en descargarse.

Puedes incluir imágenes en otros formatos a través de Dreamweaver, que podrán ser

visualizadas en algunos navegadores. Este es el caso de las imágenes BMP y PNG.

 

Para insertar una imagen, debe utilizar la siguiente sintaxis:

<img src="imagen.jpg">

En ésta instrucción se da por defecto que la imagen que se inserta tiene la extensión JPG. Para insertar otro tipo de imagen sólo deberá especificar la extensión correspondiente. Las imágenes pueden ser adquiridas de la galería de imágenes de Microsoft, o de cualquier otra imagen digitalizada. Incluso se pueden crear iconos animados desde algún programa de animación, y usarlos en una página Web.

Selección del formato

Uno de los grandes dilemas a la hora de incluir gráficos en sus páginas Web es elegir el formato adecuado para cada tipo de imagen, vamos a intentar guiarle en la selección de cada formato.

2.6. MANIPULAR TABLAS EN UNA PAGINA WEB.

Una tabla está formada por filas y columnas y a la intersección de estas le llamamos celdas, en las que se puede insertar texto y gráficos. Las tablas son una buena herramienta para organizar los datos en una página web, además nos permiten estructurar las páginas de nuestro sitio separando la cabecera, el menú, el contenido. 

Creación de una tabla

 

Para crear una tabla se debe usar la instrucción Table, seguida de parámetros que indican la

anchura, el color o imagen de fondo, etc.

Ejemplo:

<table>

</table>

Estas dos instrucciones indican al explorador de Internet que en este lugar de la página se va a

crear una tabla.

 

Uso de encabezados de tabla

 

Después de que se haya indicado al explorador de Internet que se va a crear una tabla, es necesario definir cuántas columnas de tabla se desean utilizar. Para ello se deben utilizar las instrucciones <TH>, las cuales indican los encabezados de tabla.

Ejemplo:

<Table>
<TH>Columna 1</th><TH>Columna 2<TH>Columna 3</TH>
</table>

2.5. MANIPULAR OBJETOS Y FORMULARIOS EN UNA PAGINA WEB.

Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, hacer suscripciones a un boletín o revista que editemos, etc.

Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús

desplegables, y botones.

 

Elementos de formulario

 

Los elementos de formulario pueden insertarse en una página a través del menú Insertar, opción Objetos de formulario. A través de esta opción se puede acceder a la lista de todos los objetos de formulario que pueden ser insertados en la página. Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un formulario, así como algunas de sus propiedades.

 

Crear formularios

 

Puedes crear formularios a través del menúI nsert ar, opciónFo rmulario. Una vez creado un formulario, este aparecerá en la ventana de Dreamweaver como un recuadro formado por líneas rojas discontinuas, similar al de la imagen de siguiente.

 

 

2.4. ESTABLECER VINCULOS E HIPERVINCULOS.

Normalmente se les llama enlaces.- Consisten en líneas de texto o imágenes que se encuentran dentro de ciertos documentos, generalmente en páginas web, y que permiten acceder a otros documentos. Estos enlaces establecen conexiones con otras páginas en Internet para que el navegador pueda visualizarlas. Cuando se hace click sobre un enlace, el navegador abrirá automáticamente la página de información a la que hace referencia.

Para definir un enlace es necesario marcar con la etiqueta <a> el objeto del cual va a partir dicho enlace. Dicha directiva debe incluir el parámetro href="url" para especificar el destino del enlace. Es decir, que antes del objeto elegido debemos abrir con <a href="url">, y después cerrar con

</a>. Por ejemplo, si queremos que el texto "pulse aquí para visitar la NASA" nos conduzca a la

"home page" de la NASA, debemos escribir en nuestro texto HTML:

2.3. UTILIZAR ETIQUETAS EN UNA PAGINA WEB.

Un documento HTML ha de estar delimitado por la etiqueta< ht ml> y</ht ml>. Dentro de este

documento, podemos asimismo distinguir dos partes principales:

 

El encabezado, delimitado por<head> y</head> donde colocaremos etiquetas de índole

informativo como por ejemplo el titulo de nuestra página.

 

El cuerpo, flanqueado por las etiquetas<body> y</body>, que será donde colocaremos

nuestro texto e imágenes delimitados a su vez por otras etiquetas como las que hemos visto.

 

El resultado es un documento con la siguiente estructura:

<html>

<head>

Etiquetas y contenidos del encabezado

Datos que no aparecen en nuestra página pero que son importantes para catalogarla: Titulo,

palabras clave,...

</head>

<body>

Etiquetas y contenidos del cuerpo

Parte del documento que será mostrada por el navegador: Texto e imágenes

</body>

</html>

 

Estas son algunas de las etiquetas más utilizadas:

< html>marcan el inicio y el final de una pagina web< /html>
< title>establece un titulo para la pagina< /title>
< body bgcolor="">establece un color de fondo para la pagina

< body background="">establece una imagen de fondo para la pagina < body

text="">establece el color de letra en la pagina

< h1>establece un encabezado en la pagina< /h1> < hr>agrega una línea separadora

Etiquetas de texto
< b>pone el texto en negrita< i>pone el texto en cursiva< /i>< font color="">cambia el color de texto< font size="">cambia el tamaño del texto

< font face=""> cambia el tipo de letra < font color=""size=""face=""> cambia el color el

tamaño y el tipo de letra< /font>

Etiquetas de enlace
< aref0"">texto< /a>añade un enlace utilizado la palabra texto< ahref="">< img src="">< /a>añade un enlace utilizando una imagen

Para alinear un párrafo se utiliza el comando< align> y</a lign>, utilizado dentro de la etiqueta

<p>. Se puede alinear de tres formas diferentes:

<p align="left">Pár r afo ... </p> Alinea a la izquierda.<p align="center">Pár r afo ... </p> Realiza un centrado.<p align="right">Pár r afo ... </p> Alinea a la derecha.< p> indica el inicio de un párrafo nuevo< br>cambia el texto a otra línea< pre>añade un texto preformateado < /pre>
< li>sirve para listar objetos< ul>añade numeración a los objetos listados< ul>añade viñetas a los objetos listados< /ul>
< blockquote>resalta una línea ubicada en un párrafo< /blockquote> indica el inicio de una definición