LABORATORIO DESARROLLO DE APLICACIONES EN

INTERNET

TEXTO, IMGENES Y HOJAS DE ESTILO

Tema:

Objetivo:

Edicin de textos en documentos HTML

Insertar imgenes en un documento HTML
Crear hojas de estilo
Insertar hiperenlaces en un documento HTML

Requisitos:
Una estacin Windows XP con TCP/IP.
Software Dreamweaver

Procedimiento:
IDENTIFICACIN DE LA HERRAMIENTA DE DESARROLLO
1. Ejecute el programa Macromedia Dreamweaver

2. Identifique las partes principales de la herramienta:

Nro. DD-106
Pgina
1/21
Cdigo:
Semestre:
Grupo:

R66316
III
G-H

DESARROLLO DE APLICACIONES EN INTERNET

CREACIN DE SITIOS WEB
3. Clic en la opcin del men Sitio Administrar Sitios. Clic en el botn Nuevo

4. Complete los datos solicitados por el asistente:

Nro. DD-106
Pgina
2/21

DESARROLLO DE APLICACIONES EN INTERNET

Nro. DD-106
Pgina
3/21

DESARROLLO DE APLICACIONES EN INTERNET

Nro. DD-106
Pgina
4/21

5. Verifique la existencia del nuevo sitio

6. Verifique en el panel de Archivos la existencia del nuevo Sitio

7. Crear una nueva carpeta denominada img en el nuevo sitio: (Clic Derecho en el Nuevo Sitio)

DESARROLLO DE APLICACIONES EN INTERNET

8.

Nro. DD-106
Pgina
5/21

Aplicando el procedimiento anterior crear una carpeta denominada css

9. Cuando usted termine de crear sus archivos, estos estarn almacenados localmente en el disco
duro de la mquina que est utilizando, para que pueda tenerlos siempre disponibles deber
colocarlos en su servidor remoto:

10. Crearemos un nuevo documento. Archivo Nuevo

DESARROLLO DE APLICACIONES EN INTERNET

11. Grabe el documento con el nombre index.html Archivo Guardar Como:

12. Establecer el documento index.html como documento principal:

Nro. DD-106
Pgina
6/21

DESARROLLO DE APLICACIONES EN INTERNET

INSERTAR TEXTOS EN UN DOCUMENTO HTML

13. A continuacin se muestra la estructura del documento generado:

14. Reemplace el Encabezado con el texto que se muestra a continuacin:

Nro. DD-106
Pgina
7/21

DESARROLLO DE APLICACIONES EN INTERNET

Nro. DD-106
Pgina
8/21

15. Modifique el contenido de la parte central del documento con el texto que se muestra a continuacin:

16. Modifique el contenido del pie de pgina del documento creado como se muestra a contiunuacin:

17. Grabe el documento empleando la opcin: Archivo Guardar

18. Active la vista previa del documento en el navegador con la herramienta que se indica:

DESARROLLO DE APLICACIONES EN INTERNET

Nro. DD-106
Pgina
9/21

INSERTAR IMAGENES EN UN DOCUMENTO HTML

19.
20.
21.
22.

Desde el explorador de Windows copie algunas imgenes (*.jpg) a la carpeta: E:\Sitios\SiteTexto\img

Presione la tecla Enter justo antes del subttulo: Actividades complementarias
Seleccione la opcin: Insertar Imagen
Seleccione una de las imgenes creadas la sesin anterior:

DESARROLLO DE APLICACIONES EN INTERNET

Nro. DD-106
Pgina
10/21

23. Complete los datos correspondientes a los atributos de accesibilidad de la imagen a insertar

24. Verifique el lugar donde se insert la imagen anterior:

25. Aplicando el procedimiento anterior adicione algunas imgenes en la zona del encabezado y en el pie de
pgina del documento
26. Es posible modificar las propiedades de la pgina que se est desarrollando. Seleccione la opcin:
Modificar Propiedades de la pgina o sino clic derecho en el documento Propiedades de la pgina

HOJAS DE ESTILO - CSS

Un estilo CSS es un conjunto de reglas de formato que controlan el aspecto del contenido de una
Pgina Web
Los estilos CSS aportan gran flexibilidad y control al aspecto exacto que se busca en una pgina, desde
la posicin precisa de elementos hasta el diseo de fuentes y estilos concretos
27. Para crear un nuevo estilo de encabezado seleccione la opcin del men: Texto Estilos CSS Nuevo
28. Complete los datos en la siguiente ventana:

DESARROLLO DE APLICACIONES EN INTERNET

29. Complete los valores asociados al nuevo estilo creado:

Nro. DD-106
Pgina
11/21

DESARROLLO DE APLICACIONES EN INTERNET

30. Verifique el cambio que ha sufrido los ttulos de su documento:

31. A continuacin crearemos un nuevo estilo clase: Texto Estilos CSS Nuevo

32. Configure algunas propiedades para el nuevo estilo:

Nro. DD-106
Pgina
12/21

DESARROLLO DE APLICACIONES EN INTERNET

Nro. DD-106
Pgina
13/21

33. Seleccione del texto la palabra HTML y aplique el estilo clase1 como se muestra en la siguiente figura:

34. Listas numeradas. Adicione el siguiente texto al final del documento pero antes del pie de pgina

35. Seleccione la lista y elija la opcin Lista ordenada

DESARROLLO DE APLICACIONES EN INTERNET

36. Seleccione los servicios de Windows 2003 y aplique sangra

37. Observe el resultado obtenido:

38. Aplique el procedimiento anterior, para la lista de servicios Linux:

Nro. DD-106
Pgina
14/21

DESARROLLO DE APLICACIONES EN INTERNET

Nro. DD-106
Pgina
15/21

39. Listas no numeradas: Adicione una lista de sistemas operativos. Seleccione dicho texto y elija la opcin:

40. Observe el resultado obtenido:

HIPERENLACES
41. Crear un nuevo sitio denominado SiteLab02
42. Crear una carpeta img en el site anterior
43. Crear una carpeta css en el site anterior

44. Crear un documento nuevo denominado index.html

45. Establecer el documento anterior como pgina principal del sitio
46. Doble clic en el documento anterior para abrir y editar dicho documento

DESARROLLO DE APLICACIONES EN INTERNET

Nro. DD-106
Pgina
16/21

47. Asigne como ttulo del documento el texto: Empleo de Enlaces, Tablas y Marcos
48. Adicione el siguiente contenido al documento creado:

49. Adicionaremos enlaces que nos llevan a cada uno de los prrafos incluidos en el documento
50. Ubique el cursor al inicio del subttulo Enlaces. Adicionaremos un ANCLA en dicho punto

51. Seleccione la opcin del men Insertar Anclaje con nombre, complete los datos solicitados:

DESARROLLO DE APLICACIONES EN INTERNET

Nro. DD-106
Pgina
17/21

52. Aplicando el procedimiento anterior adicione Anclas en los prrafos Tablas (anclaje: tablas) y Marcos
(anclaje: marcos). Observe el cono de ANCLA que se insertan al inicio de cada prrafo:

53. Definiremos ahora los enlaces, para ello regresamos al inicio del documento a la seccin denominada
Contenido
54. Seleccione, el texto Enlaces

55. Seleccione la opcin del men: Insertar Hipervnculo

56. Complete los siguientes datos:

57. Aplicando el procedimiento anterior, crear enlaces en los contenidos Tablas y Marcos
58. A continuacin se muestran los enlaces terminados. Presione la tecla F12 para visualizar su documento en el
navegador Web. Verifique la operacin de cada uno de los enlaces

DESARROLLO DE APLICACIONES EN INTERNET

Nro. DD-106
Pgina
18/21

59. Ubquese al final del documento y seleccione el texto Google,

60. Seleccione la opcin Insertar Hipervnculo

61. Complete los datos solicitados:

62. De manera similar genere un enlace a travs de la palabra Yahoo, a la direccin http://www.yahoo.com

DESARROLLO DE APLICACIONES EN INTERNET

Nro. DD-106
Pgina
19/21

63. Genere un enlace a travs de la palabra Altavista, a la direccin http://www.altavista.com

64. Adicione un texto que haga referencia a una cuenta de correo electrnico de contacto:

65. Seleccione el texto: Administrador del sistema

66. Seleccione la opcin Insertar Vnculo de correo electrnico
67. Complete los datos con su direccin de correo electrnico:

68. Verifique el funcionamiento de los enlaces:

DESARROLLO DE APLICACIONES EN INTERNET

Nro. DD-106
Pgina
20/21

69. Observe como al hacer clic en el enlace de contacto, se abre el cliente de correo electrnico.
70. Visualice el cdigo fuente del documento HTML para identificar los comandos HTML incluidos en cada
enlace generado

EJERCICIOS
1. Implementar un documento empleando imgenes, texto y hojas de estilos que muestre los principales pasajes
de alguna pelcula de la cartelera actual. Incluya descripciones en cada figura que describa brevemente la
escena a la cual pertenece la imagen referenciada
2. Usted acaba de ser contratado por la empresa El zapato veloz ubicado en la ciudad de Arequipa para que
pueda elaborarle su pgina Web la cual ser publicada en Internet para promocionar a dicha empresa. Esta
empresa est dedicada a la fabricacin de calzado artesanal. La empresa actualmente no cuenta con un
logotipo, por lo cual tambin solicita que usted disee un logotipo el cual ser incluido en la pgina Web que
debe implementar. A continuacin se dan algunos requerimientos para el contenido de la pgina Web.
El documento debe mostrar informacin que cautive a cada lector que acceda al sitio web
Se debe promocionar los diferentes modelos de zapatos que se producen en la fbrica
El contenido debe estar incluido en una sola pgina para no cansar ni abrumar a los usuarios
Debe contener referencias de contacto para comunicarse con los encargados de la empresa
(Proponga usted datos ficticios para completar esta informacin)
Debe incluir algunas imgenes y texto que describa brevemente pero en forma clara los diversos
modelos de zapatos que se promocionan por la empresa
Para mayor informacin la pgina debe contener botones (con efectos RollOver) que permitan
acceder a los principales enlaces como: Google, Yahoo, Altavista, Youtube

DESARROLLO DE APLICACIONES EN INTERNET

Nro. DD-106
Pgina
21/21

Observaciones y Conclusiones: (Mnimo 5 observaciones y 5 conclusiones)

________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________