Manual

Manual para hacer una Página Web

J o r g e I v á n C a m p o s y

L ó p e z N . L . 6

E d g a r A l d a h i r J i m é n e z

H e r n á n d e z N . L . 2 1

A r m a n d o R o d r í g u e z

L ó p e z N . L . 3 7

4 ° S eme s t r e G r u p o “ D ”

Creación de una Página Web

1

Í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


2

Antes de empezar… 1.-Accedemos al dispositivo en el que almacenaremos toda la

información.

Captura 1. Dispositivo de

Almacenamiento


3

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


4

3.-La carpeta debe llevar por nombre “INDEX”.

Captura 3. Carpeta INDEX


5

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


6

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


7

3.-Desplegamos el menú de la Barra de Herramientas de Acceso Rápido

Captura 6. Más Comandos


8

4.-Se despliega la siguiente ventana

Captura 7. Selección de Comandos


9

Captura 8. Todos los Comandos


10

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


11

Captura 10. Anexo de Comando


12

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


13

7.-Se insertan los marcos con los botones previamente seleccionados.

Captura 12. Inserción de botones

Manual.docx#botones


14

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


15

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


16

10.- Seleccionamos la forma que nos parezca de mayor agrado

Captura 15. Selección de formas


17

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


18

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


19

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


20

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


21

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


22

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

Manual.docx#pagina

Manual.docx#archivos


23

2.- Nos aparecera una ventana en la cual deberemos elegir la opcion

Captura 23. Selección de archivo


24

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


25

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


26

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


27

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


28

2.-Damos clic con el botón derecho del mouse sobre el archivo de

nombre INDEX.

Captura 28. Elección de programa


29

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


30

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


31

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


32

¿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


33

2.-Damos clic con el botón derecho del mouse sobre el archivo INDEX.

Captura 33. Edición de Página Web


34

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


35

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

Manual

Design

Transcript of Manual