Manual de pagina web terminado!

Preview:

Citation preview

CREA TU PROPIA PAGINA WEB EN MICROSOFT WORD

Integrantes: No.lista Becerra Rosario David 4 Hernández Reyes Karen Dannae 19 López Martínez Ana María 24 Ramírez Ballarte Luis Ángel 32

Contenido

¿Cómo iniciar a crear una página web? ................................................................................. 1

¿Cómo guardar una página web? .......................................................................................... 4

¿Cómo empezar a diseñar una página web? ........................................................................ 5

¿Cómo agregarle fondo a nuestra página web? .................................................................... 7

¿Cómo agregar información a nuestra página web? ........................................................... 12

¿Cómo agregar un documento PDF? .................................................................................. 18

¿Cómo usar los marcadores en la página web? .................................................................. 22

¿Cómo agregamos un hipervínculo a una dirección de página web? ................................. 29

¿Cómo modificar nuestra página una vez terminada? ......................................................... 35

Índice de ilustraciones .......................................................................................................... 36

1

¿Cómo iniciar a crear una página web?

1.- Seleccionar en el menú vista para configurarlo en DISEÑO WEB.

2.-Personalizar la barra de herramientas de acceso rápido para nuestra comodidad.

Captura de pantalla 1

Captura de pantalla 2

2

3.- En la opcion de comandos disponibles en:

seleccionar todos los camandos.

Captura de pantalla 4

Captura de pantalla 3

3

4.- Buscaras en los comandos las opciones MARCO NUEVO A LA IZQUIERDA, MARCO NUEVO A LA DERECHA,

MARCO NUEVO ABAJO, MARCO NUEVO ARRIBA la seleccionaras y utilizaras la opción agregar, posteriormente

buscaras la opción ELIMINAR MARCO y agregar lo (este servirá por si tu diseño no es de tu agrado).

Captura de pantalla 5

4

4.1 Así es como deberán quedar tus opciones en la barra de herramientas para mayor accesibilidad.

¿Cómo guardar una página web? 5.- Abriremos un pequeño paréntesis para poder guardar los cambios de nuestra página web y la información salga en

nuestros marcos tenemos que crear una carpeta exclusiva para página web.

Captura de pantalla 7

En esta carpeta única

deberás guardar todos

aquellos archivos que

irán en la página web.

Captura de pantalla 6

Captura de pantalla 8

5

¿Cómo empezar a diseñar una página web? Una vez hecho esto habremos hecho lo más difícil.

6.- Para empezar con nuestro diseño iniciaremos con agregar marcos.

(Esto dependerá de tu diseño y creatividad)

Captura de pantalla 9

Te deberá quedar algo

así.

Observa que nuestra

vista ya está en

diseño web no se te

olvide es

indispensable.

Captura de pantalla 10

6

7.- El diseño será a tu gusto en nuestro caso y para explicarte claramente tomaremos el siguiente:

Captura de pantalla 11

7

¿Cómo agregarle fondo a nuestra página web? 8.- Si deseas agregar un fondo a tu página tendrás que hacer lo siguiente:

a) Te iras a la opción diseño y en la parte fondo de página en la opción color de página.

b) Seleccionaras la opción efectos de relleno.

Captura de pantalla 12

b)

8

Captura de pantalla 13

Esta es la opción que nos

mostrara Word te

posicionaras en seleccionar

imagen y posteriormente

darás clic

Seleccionaras la imagen que

quieras y posteriormente darás

clic en insertar para elegir la

imagen.

Captura de pantalla 14

9

Captura de pantalla 15

Nuestro diseño

quedara algo así

repetimos que

esto será ya a tu

gusto.

Una vez hecho esto lo último que

aras es dar en clic en aceptar para

que los cambios queden hechos.

Captura de pantalla 16

10

9.- Si tu diseño te gusta mejor sin bordes lo que aras será lo siguiente:

A) Le darás un clic derecho justo en el marco y saldrá posteriormente

Captura de pantalla 17

Seleccionaras la opción SIN

BORDES e inmediatamente

después aceptar para realizar los

cambios.

O también si te gustan los bordes

pero los necesitas más anchos o de

otro color esto te servirá.

11

Finalmente nuestro diseño quedara así.

Captura de pantalla 18

12

¿Cómo agregar información a nuestra página web? 10.- Ahora empezaremos con agregar información a nuestros marcos:

NOTA: nuestra información deberá estar con las características del paso 1 (nuestro diseño deberá ser web)

Captura de pantalla 19

13

11.- Para guardar nuestra información para posteriormente agregarla a nuestra página principal deberás hacer lo siguiente:

Captura de pantalla 20

Captura de pantalla 21

Seleccionar la opción archivo para

posteriormente guardar como y

elegir el marco de destino.

a) En la opción tipo seleccionaras en la

flecha para que nos muestre más

opciones

14

b) Una vez ahí seleccionaras la opción

de página web.

Esto será para agregar tu información a

la página web principal.

Posteriormente guardar para que

estén los cambios en tu ruta de

destino.

NOTA: Esta ruta deberá ser la que se

muestra en el paso 5.

Captura de pantalla 22

Captura de pantalla 23

15

12.- Posteriormente seleccionaras la palabra que quieras que lleve el hipervínculo (esto será para cuando al darle clic el

espectador en la página te muestre directamente la información.

Captura de pantalla 24

13.- Una vez hecho esto nos iremos a la opción insertar y posteriormente seleccionaras en la opción vínculos la parte de

hipervínculos

Captura de pantalla 25

16

14.- Posteriormente te saldrá la siguiente opción de donde deseas obtener la información

Captura de pantalla 26

17

15.- Después de hacer eso seleccionaremos el marco de destino.

Captura de pantalla 27

18

Y eso será todo.

¿Cómo agregar un documento PDF? Ahora bien si queremos agregar un PDF para mostrar nuestra información en nuestra página web debemos hacer

prácticamente lo mismo pero para que te quede completamente claro explicaremos paso por paso:

17.- Seleccionamos la palabra.

Captura de pantalla 29

16.- Nos saldrá la siguiente opción y

seleccionaremos el marco más

grande para que tenga una mejor

presentación y por ultimo aceptar.

Captura de pantalla 28

19

18.- Nos vamos a la opción INSERTAR en el cuadro vínculos seleccionamos hipervínculo.

Captura de pantalla 30

19.- Ahora seleccionamos la ruta solo que en este caso será un PDF

20

Captura de pantalla 31

20.- Establecemos marco de destino y aceptar

Captura de pantalla 32

21

Nuestro diseño terminado quedara así.

Captura de pantalla 33

22

NOTA: NO OLVIDES QUE PARA QUE LA INFORMACION SE MUESTRE EN TU PAGINA TODO ABSOLUTAMENTE

TODO DEBE ESTAR GUARDADO EN LA MISMA CARPETA COMO SE MUESTRA EN EL PASO 1

¿Cómo usar los marcadores en la página web? 21.- Abriremos nuestra información en uno de nuestros marcos para poder explicarte.

Captura de pantalla 34

23

22.- Una vez hecho esto nos iremos a la parte superior para seleccionar el título en nuestro caso sería este: MUSICA

Captura de pantalla 35

24

Captura de pantalla 35

Una vez seleccionada la

palabra nos iremos a la

parte de insertar en las

opciones superiores y

posteriormente daremos

clic en marcador.

Esto servirá para que

cundo apliquemos el

hipervínculo nos lleve a

asta esta palabra.

25

23.- Este recuadro va ser el que te salga y haremos lo siguiente:.

a) En él te pide que le asignes un

nombre al marcador de la palabra.

Una recomendación escribe una que

esté muy relacionada con la palabra

seleccionada para el marcador, en

nuestro caso y para mayor comodidad

pondremos la misma.

Este nombre alternativo no deberá

llevar ni espacios ni signos de

puntuación.

b) posteriormente dar clic

en agregar para guardar

cambios.

NOTA: fíjate que este activada la casilla

de Nombre para que esto sirva.

Captura de pantalla 36

26

24.- Una vez que hayas hecho esto aras la palabra que al darle clic nos lleve al marcador

Seleccionaremos la palabra

SUBIR y posteriormente nos

iremos a la parte superior en

la opción insertar solo que

ahora le darás clic en

hipervínculo.

Captura de pantalla 37

Captura de pantalla 38

27

25.- Nos saldrá esta ventana

Esto por el momento no nos sirve

lo que nos importa es seleccionar

nuestro marcador así que

daremos clic en la primera

columna en la opción LUGAR DE

ESTE DOCUMENTO

Una vez activada esta

opción nos saldrán los

títulos y marcadores que

tengamos en nuestro

documento.

Observemos que esta

nuestro marcador solo

seleccionamos y damos

aceptar para guardar

cambios

Captura de pantalla 39

Captura de pantalla 40

28

Captura de pantalla 41

Nuestro marcador con hipervínculo está

listo y lo podemos observar cunado

nuestra palabra seleccionada esta

subrayada comprobamos apretando

Ctrl+clic para seguir vinculo.

29

¿Cómo agregamos un hipervínculo a una dirección de página web? 26.- Tendremos que entrar a nuestro explorador para copiar nuestro URL

Captura de pantalla 42

27.- Cuando hayamos hecho esto nos iremos a insertar y posteriormente daremos clic en hipervínculo.

Una vez hecho esto agregaremos un texto

que nos indique hacia donde nos llevara la

dirección electrónica

Captura de pantalla 43

30

Captura de pantalla 44

Este será el recuadro que

nos salga y ya simplemente

tendremos que pegar la

dirección antes copiada en el

sitio señalado y aceptar para

guardar cambios.

Una vez hecho todo esto nuestra

página quedara así.

Captura de pantalla 45

31

Hemos terminado nuestra página por último la

guardaremos con un nombre único dentro de la

carpeta única que hemos creado en nuestro

paso 5.

NOTA: Fijate que este con las caracteristicas

del paso 11 indice b)

Captura de pantalla 46

32

Nuestra página la

podemos apreciar

simplemente con darle

doble clic en nuestro

archivo

Captura de pantalla 47

33

Captura de pantalla 48

Observa como

nuestra página ya

nos las muestra a

través de internet

Explorer.

34

Captura de pantalla 49

NOTA: en caso de no ser así o que no te guste tu propio diseño o simplemente quieras realizar un cambio en tu

página web te mostraremos que debes de hacer.

En esta vista puedes

verificar que toda tu

información ha sido

agregada correctamente.

Observa que nuestro PDF

ya sale en el marco

seleccionado anteriormente.

35

¿Cómo modificar nuestra página una vez terminada?

Captura de pantalla 50

Seleccionaremos

con un solo clic

nuestra página web

terminada.

(Para seleccionar

nuestro archivo)

Una vez realizado esto

simplemente seleccionaras

MICROSOFT WORD para

modificarla.

Darás clic derecho para que nos

salga el menú contextual,

seleccionaras la opción abrir con:

Captura de pantalla 51

Captura de pantalla 1 Captura de pantalla 52

36

Índice de ilustraciones

CAPTURA DE PANTALLA 1 ......................................................................................................................................................... 1

CAPTURA DE PANTALLA 2 ......................................................................................................................................................... 1

CAPTURA DE PANTALLA 4 ......................................................................................................................................................... 2

CAPTURA DE PANTALLA 3 ......................................................................................................................................................... 2

CAPTURA DE PANTALLA 5 ......................................................................................................................................................... 3

CAPTURA DE PANTALLA 6 ......................................................................................................................................................... 4

CAPTURA DE PANTALLA 7 ......................................................................................................................................................... 4

CAPTURA DE PANTALLA 8 ......................................................................................................................................................... 4

CAPTURA DE PANTALLA 9 ......................................................................................................................................................... 5

CAPTURA DE PANTALLA 10 ....................................................................................................................................................... 5

CAPTURA DE PANTALLA 11 ....................................................................................................................................................... 6

CAPTURA DE PANTALLA 12 ....................................................................................................................................................... 7

CAPTURA DE PANTALLA 14 ....................................................................................................................................................... 8

CAPTURA DE PANTALLA 13 ....................................................................................................................................................... 8