Plano de diseño de una Planta de tratamiento de aguas PTAP
Manual Crear Página Web
1. Manual para hacer una
Página Web
Jorge Iván Campos y
López N.L.6
Edgar Aldahir Jiménez
Hernández N.L.21
Armando Rodríguez
López N.L.37
4° Semestre Grupo “D”
2. Creación de una Página Web
Índice
Tabla de contenido
Antes de empezar… .......................................................................................... 2
Elaboración del Diseño ..................................................................................... 5
Contenido de la Página .....................................................................................21
Hipervínculos ................................................................................................... 22
Anexos .............................................................................................................. 27
Visualización en el Navegador de la Página Web .................................... 27
PDF ................................................................................................................ 30
¿Cómo editar la página? ............................................................................. 32
1
3. Creación de una Página Web
Antes de empezar…
1.-Accedemos
al
dispositivo
en
el
que
información.
Captura 1. Dispositivo de
Almacenamiento
2
almacenaremos
toda
la
4. Creación de una Página Web
2.-Usando el clic, en el botón derecho del mouse sobre la pantalla del
dispositivo en el que se desea crear
Captura 2. Nueva Carpeta
3
5. Creación de una Página Web
3.-La carpeta debe llevar por nombre “INDEX”.
Captura 3. Carpeta INDEX
4
6. Creación de una Página Web
Elaboración del Diseño
1.-Ahora si procederemos a comenzar la creación de la Página Web.
Iniciamos Microsoft Word.
Captura 4. Microsoft Word
5
7. Creación de una Página Web
2.- Para hacer una página Web requerimos de algunas opciones
especiales y para hacer más cómodo el trabajo
Captura 5.Personalizar la Barra de Herramientas
6
8. Creación de una Página Web
3.-Desplegamos el menú de la Barra de Herramientas de Acceso Rápido
Captura 6. Más Comandos
7
9. Creación de una Página Web
4.-Se despliega la siguiente ventana
Captura 7. Selección de Comandos
8
11. Creación de una Página Web
5.-En la lista de comandos vamos a la letra “M” y buscamos las opciones
de marcos (derecho, izquierda, arriba, abajo).
Captura 9. Agregar Comandos
10
13. Creación de una Página Web
6.-Para continuar debemos cambiar el formato de nuestro documento a
diseño web con el botón marcado
Captura 11. Selección de Diseño Web
12
14. Creación de una Página Web
7.-Se insertan los marcos con los botones previamente seleccionados.
Captura 12. Inserción de botones
13
15. Creación de una Página Web
8.-A cada marco le agregaremos un título para que al guardar la página
se identifique el contenido de cada marco.
Captura 13. Titulación de marcos
14
16. Creación de una Página Web
9.- Para la Página Web necesitamos tener una serie de botones que nos
permitan navegar a través de ella, es por esto que agregaremos algunos
a nuestro diseño.
.
Captura 14. Formas
15
17. Creación de una Página Web
10.- Seleccionamos la forma que nos parezca de mayor agrado
Captura 15. Selección de formas
16
18. Creación de una Página Web
11.- Insertamos la imagen en el marco de su preferencia. Este marco
será el predeterminado que nos ayudará a navegar por todo el contenido
de la página web.
Captura 16. Insertando una forma
17
19. Creación de una Página Web
12.-Agregamos el número de botones necesarios de acuerdo a la
cantidad de información que incluya en su página.
Captura 17. Botones de la Página
18
20. Creación de una Página Web
13.- Cada botón tiene que llevar el nombre del contenido que mostrará.
Para agregar texto a la forma:
I.
Clic en el botón derecho del mouse
sobre la figura.
II.
Seleccionar la opción “Agregar texto”
en el menú contextual.
Captura 18. Agregar texto a la forma
Captura 19. Botones con texto
19
21. Creación de una Página Web
14.- Al tener el diseño final de nuestra página procederemos con el
Guardado provisional de esta.
Para mayor facilidad a situaciones futuras, es conveniente escribir el
título del tema que llevara el marco.
Captura 20. Guardado de archivo
20
22. Creación de una Página Web
Contenido de la Página
1.-Para la página web se necesitan archivos complementarios en los que
se encuentre el contenido que vamos a mostrar.
Procederemos a crear cada uno de los archivos, el estilo y número de
estos dependerá del gusto del usuario.
Captura 21. Contenido Anexo
21
23. Creación de una Página Web
Hipervínculos
1.-Para navegar a través de la página, se necesitan hipervínculos que nos
ayuden a desplegar la información
Estos harán que la pagina principal pueda manejar el contenido de tu
página con los archivos complementarios
.
Captura 22. Hipervínculo
22
24. Creación de una Página Web
2.- Nos aparecera una ventana en la cual deberemos elegir la opcion
Captura 23. Selección de archivo
23
25. Creación de una Página Web
3.- Antes de puntear aceptar, debemos seleccionar el “Marco de
destino” para indicar hacia dónde queremos que aparezca la información
seleccionada.
Captura 24. Elección de marco
24
26. Creación de una Página Web
4.- Nos aparecerá una segunda ventana donde señalaremos el marco en
el que queremos que aparezca nuestra información.
Captura 25. Selección de destino
25
27. Creación de una Página Web
5.- Una vez terminado todo este procedimiento podemos dar clic en
“Aceptar” y tendremos nuestro hipervínculo realizado.
Captura 26. Finalización de hipervínculos
26
28. Creación de una Página Web
Anexos
Visualización en el Navegador de la Página Web
Para poder visualizar la página web de la manera correcta, seguiremos
los siguientes pasos:
1.-Abrimos la carpeta INDEX que contiene todos los archivos de la
página.
Captura 27. Visualización de la Página Web
27
29. Creación de una Página Web
2.-Damos clic con el botón derecho del mouse sobre el archivo de
nombre INDEX.
Captura 28. Elección de programa
28
30. Creación de una Página Web
3.- Se desplegará la página web y podrás navegar a través de ella
haciendo clic en los diferentes hipervínculos que creamos para que
puedas darte cuenta como cada uno de ellos funciona a la perfección.
Captura 29. Demostración de la Página Web
29
31. Creación de una Página Web
PDF
1.- Para anexar un archivo en PDF a su página web previamente creado,
seguimos todos los pasos para el hipervínculo, sólo cambiando la
selección del archivo por nuestro documento en PDF.
Captura 30.Elección de archivo
30
32. Creación de una Página Web
2.- Procederemos a abrir la página web en el navegador y al hacer clic en
el hipervínculo al que le agregamos el PDF podremos visualizarlo en el
marco seleccionado.
Captura 31. Archivo PDF en Página Web
31
33. Creación de una Página Web
¿Cómo editar la página?
Una vez concluida la página web podemos realizar cambios en ella ya sea
por algún error, anexar información, etc.
Debemos hacer lo siguiente:
1.-Abrir la carpeta INDEX
Captura 32. Edición de Página Web
32
34. Creación de una Página Web
2.-Damos clic con el botón derecho del mouse sobre el archivo INDEX.
Captura 33. Edición de Página Web
33
35. Creación de una Página Web
Captura 1. Dispositivo de Almacenamiento.................................................... 2
Captura 2. Nueva Carpeta................................................................................ 3
Captura 3. Carpeta INDEX ............................................................................. 4
Captura 4. Microsoft Word............................................................................. 5
Captura 5.Personalizar la Barra de Herramientas ....................................... 6
Captura 6. Más Comandos ................................................................................ 7
Captura 7. Selección de Comandos ................................................................. 8
Captura 8. Todos los Comandos ...................................................................... 9
Captura 9. Agregar Comandos ........................................................................10
Captura 10. Anexo de Comando ...................................................................... 11
Captura 11. Selección de Diseño Web ...........................................................12
Captura 12. Inserción de botones .................................................................13
Captura 13. Titulación de marcos ..................................................................14
Captura 14. Formas ..........................................................................................15
Captura 15. Selección de formas ...................................................................16
Captura 16. Insertando una forma ................................................................17
Captura 17. Botones de la Página ...................................................................18
Captura 18. Agregar texto a la forma ..........................................................19
Captura 19. Botones con texto.......................................................................19
Captura 20. Guardado de archivo ................................................................. 20
Captura 21. Contenido Anexo .........................................................................21
Captura 22. Hipervínculo ............................................................................... 22
Captura 23. Selección de archivo ................................................................. 23
Captura 24. Elección de marco ..................................................................... 24
34
36. Creación de una Página Web
Captura 25. Selección de destino ................................................................. 25
Captura 26. Finalización de hipervínculos ................................................... 26
Captura 27. Visualización de la Página Web ................................................ 27
Captura 28. Elección de programa ................................................................ 28
Captura 29. Demostración de la Página Web .............................................. 29
Captura 30.Elección de archivo .................................................................... 30
Captura 31. Archivo PDF en Página Web ......................................................31
Captura 32. Edición de Página Web.............................................................. 32
Captura 33. Edición de Página Web.............................................................. 33
35