MANUAL PARA CREAR

PÁGINAS WEB EN WORD 2010

ESMERALDA COLORADO MÉNDEZ #10
EMMA SARAUZ SALINAS #46
ESTEFANY YESCAS CERÓN #52
Contenido
Crear carpeta

1

Abrir Word

7

Convertir formato a página web

8

Agregar marcos

11

Insertar títulos a marcos

21
22

Guardar por primera vez

23

Abrir INDEX por primera vez

30

Modificar colores.

33

Insertar Fromas.

35
36

Agregar texto a las figuras.

39

Agregar Titulo a la pagina web

40

Agregar contenido.

42

Creación de hipervínculos.

44

Insertar marquee.

53

Incrustar video de youtube.

59
Antes que nada, debes abrir
“Mis documentos”

Ilustración 1. Mis documentosCrear carpeta
Crear carpeta

1
Ilustración 2. Menu contextual 1

Se da un click derecho en
cualquier parte de la pantalla
para que aparezca el siguiente
menú contextual.

2
Se da click en “nuevo”

Ilustración 3. Nuevo

3
A continuación se debe dar
click en “carpeta”

Ilustración 4. Carpeta

4
Se cambia el nombre de

carpeta a elección propia

Ilustración 5. Nombre de carpeta

Nota: la carpeta debe ser

SOLAMENTE para la página
web

5
Ahora se debe abrir Microsoft
Word, en nuestro caso
usaremos el 2010, pero no
tiene muchas variaciones con
la versión anterior o siguiente.

Ilustración 6. Abrir office Word

6
Abrir Word

Ahora que se abrió, este es el
formato que debe aparecer en
su pantalla.

Ilustración 7. Formato

7
Convertir formato a página web

Ilustración 8. Menu Inferior

En la parte inferior derecha se
localiza un menú igual a esté.

8
Se da click en “diseño web”
Ilustración 9. Diseño web

para cambiar el diseño de la
página.

9
Después su pantalla será esta.

Ilustración 10. Pantalla

10
Agregar marcos

Ilustración 11. parte superior derecha

En la parte superior derecha
de su pantalla, aparece una
flecha hacia abajo donde
daremos click

11
Se desplegará el siguiente
menú donde daremos click en
“M{s comandos…”

Ilustración 12. Mas comandos

12
Nos va a aparecer la siguiente

pantalla donde cambiaremos
la opción de “comandos m{s
utilizados” por la de “Todos
los comandos”

Ilustración 13. Todos los comandos

13
Agregaremos desde “Marco
nuevo a la derecha” hasta
“Marco nuevo arriba”

Ilustración 14.Marcos nuevos

14
También agregaremos la
opción de “Eliminar marco”,
no olvidemos dar click en
“Aceptar”

Ilustración 15. Eliminar marco

15
Podrán notar que su menú en la
esquina superior izquierda se ha
modificado:

Ilustración 16. Iconos

Daremos click en los iconos de agregar
marco dependiendo de la posición que

queremos que aparezca.

16

Nota: te recomendamos no agregar más
del dos para que el resultado sea de tres
marcos y tu página no se vea tan cargada.
Hemos insertado un marco arriba y nos ha
quedado así:

Ilustración 17. Ejemplo 1

17
Posicionamos el cursor en el marco donde queremos agregar el siguiente marco,
en este caso, el marco de abajo.

Ilustración 18.Marco de abajo

18
Posicionamos el cursor en cualquiera de las líneas del marco
para cambiar su tamaño:

Ilustración 19. Cambiar tamaño

19
Ilustración 20. Modificacion de marcos

Modificamos el tamaño de ambos marcos según nuestras
comodidades.
20
Insertar títulos a marcos

Ahora escribiremos en los marcos

su titulo.

Ilustración 21. Titulos de marcos

21
Después de eso, vamos a dar
click en el menú de archivo
para después clickear
“Guardar como”

Ilustración 22. Guardar como

22
Guardar por primera vez

Ilustración 23. Click a la carpeta

A continuación se les abrirá algo como esto, donde daremos click
en la carpeta que creamos para la página web
23
Ilustración 24. Cambiar nombre

Ya que la tenemos abierta, le cambiaremos el nombre a INDEX.
24
Cambiaremos el formato a
“P{gina web”

Ilustración 25. Pagina web

25
También podemos cambiar el
título de nuestra página:

Ilustración 26. Titulo de archivo

26
Nuestra página será sobre
perros o mascotas perdidas.

Ilustración 27. titulo de la pagina

27
Daremos click en “guardar” y
después cerraremos el

archivo.

Ilustración 28. Guardar y cerrar

28
Ilustración 29. INDEX

Nos podemos dar cuenta que tenemos 4 archivos de Word con el
nombre de nuestros marcos:

29
Abrir INDEX por primera vez

Abrimos nuestra carpeta de la página web

Para continuar modificando nuestra página
daremos click derecho sobre el archivo que se
llama “INDEX”

Ilustración 30. 4 Archivos

30
Vamos a abrir nuestro archivo
con Microsoft Word

Ilustración 31. Abrir con word

31
Ahora podemos borrar lo que
escribimos en los marcos y así
podemos comenzar con el
diseño de nuestra página.

Ilustración 32. Borrar nombres

32
Cambiaremos nuestro menú a “Diseño de p{gina”
Modificar colores.

para modificar el color de cada marco.

Ilustración 33. Diseño

33
Ya que tienes el diseño de tu preferencia, puede quedar algo así:

Ilustración 34. Tu preferencia

34
Insertar Fromas.

Ilustración 35. Insertar formas

Vamos a movernos al menú de “Insertar” para agregar

formas y poder crear el menú de nuestra página.

35
Agrega las figuras que necesites para tu menú, en este caso solo
ocuparemos cuatro.

Ilustración 36. Ejemplo de figuras

36
Puedes cambiar el diseño de tus figuras seleccionando una de ellas y
dando click en “Herramientas de dibujo”

Ilustración 37. Herramientas de dibujo

37
Ahora que tenemos nuestro diseño, vamos a darle click derecho
sobre alguna figura.

Ilustración 38. click sobre la figura

38
Vamos a clicklear en “Agregar
texto” para poder escribir sobre
nuestras figuras.

Ilustración 39. Texto

Agregar texto a las figuras.

39
Ya que hemos establecido los botones de nuestro menú, agregaremos un titulo a
nuestra página mediante un cuatro de texto.

Agregar Titulo a la pagina web
40
Ilustración 40. Diseño de nuestro men

Listo, ahora ya tenemos el diseño de nuestro menú
principal.
41
A continuación vamos a agregar el contenido a nuestra página. Para poder agregar

este mismo necesitamos tener todos los archivos que vayamos a ponerle en nuestra
carpeta.

Ilustración 41. Agregar contenido

Agregar contenido

42
Para crear nuestro hipervínculo, vamos a seleccionar la
palabra o forma de donde queremos que provenga.

Ilustración 42. Crear hipervínculo

43
Pulsamos click derecho para que salga el siguiente menú contextual:
Creación de hipervínculos.

Procederemos a pulsar sobre
“Hipervínculo”

Ilustración 43. Menu contextual hipervinculo

44
Esta es la venta que nos saldrá justo después del click.

Ilustración 44. Hipervincular

Debemos de fijarnos que estemos buscando
nuestros archivos próximos a hipervincular en
la carpeta de nuestra página web.
45
Ilustración 45. Marco de destino

Seleccionamos el documento y luego clickeamos
en “Marco de destino”
46
Después nos aparecerá otra ventana donde
seleccionaremos el marco de destino presionándolo en la
representación de pantalla que nos aparece.

Ilustración 46. Establecer marco

47
Revisamos que se haya modificado nuestro marco
de destino

Ilustración 47. Aceptar y finalizar

Damos click en “Aceptar” para finalizar

48
Ilustración 48. Hipervinculo azul

Podemos observar que nuestra opción donde
insertamos el hipervínculo se ha cambiado a un
tono azul
49
Ilustración 49. Cursor sobre la palabra

Para seguir nuestro hipervínculo, vamos a
poner nuestro cursor sobre la palabra y en
seguida apretamos la tecla CTRL más un
CLICK

50
Podemos observar que nuestro hipervínculo

funciona correctamente.

Ilustración 50. Hipervinculo de hipervinculo

Podemos crear un hipervínculo dentro del mismo hipervínculo.
51
Podemos observar que si aplicamos el mismo procedimiento el resultado estará
correcto.

Ilustración 51. Resultado correcto

52
A continuación vamos a hacer que un texto se desplace
por nuestra pantalla, a esto se le llama marquesina o
marquee.

Ilustración 52. Marquee

Este será el texto al que le
Insertar marquee.

aplicaremos nuestro marquee.
53
Abriremos nuestra carpeta de
la página web y le daremos un
click derecho a nuestro
archivo con el nombre del
marco donde esta nuestro
texto

Ilustración 53. click derecho al archivo

54
Vamos a abrir nuestro
archivo con el bloc de notas
Ilustración 54. Abrir con bloc de notas

55
Ilustración 55. Localizar texto

Vamos a localizar el texto donde queremos aplicar
nuestro marquee
56
Ilustración 56. Insertar Marquee

Ahora insertaremos antes de este un <MARQUEE> y al final del texto un
</MARQUEE> Justo como lo mostramos en la imagen
57
Ahora clickeamos en archivo y después guardar.

Ilustración 57. cerrar bloc
Después podemos cerrar el bloc.

58
Vamos a localizar nuestro video en youtube

Vamos a darle click en
compartir y a
continuación en insertar
vinculo para copiar su
código html

Ilustración 58. Localizar video

Podemos cambiar el tamaño del video según
nuestras comodidades para nuestra página web.
Incrustar video de youtube.
59
Volveremos a abrir el archivo
con el bloc de notas del marco

donde queremos que se
Ilustración 59. Abrir archivo con bloc de notas

encuentre nuestro video.

60
Ahora nos trasladamos al final de nuestro bloc y
pegaremos el código del video como se muestra a
continuación:

Ilustración 60. Pegar codigo

61
A continuación guardaremos el cambio y
cerramos nuestro bloc.

Ilustración 61. Guardar cambio

62
¡FELICIDADES! AHORA
SABES COMO CREAR
TU PROPIA PÁGINA

WEB EN MICROSOFT

WORD 2010.
63

Manual para crear páginas web en word 2010

  • 1.
    MANUAL PARA CREAR PÁGINASWEB EN WORD 2010 ESMERALDA COLORADO MÉNDEZ #10 EMMA SARAUZ SALINAS #46 ESTEFANY YESCAS CERÓN #52
  • 2.
    Contenido Crear carpeta 1 Abrir Word 7 Convertirformato a página web 8 Agregar marcos 11 Insertar títulos a marcos 21 22 Guardar por primera vez 23 Abrir INDEX por primera vez 30 Modificar colores. 33 Insertar Fromas. 35 36 Agregar texto a las figuras. 39 Agregar Titulo a la pagina web 40 Agregar contenido. 42 Creación de hipervínculos. 44 Insertar marquee. 53 Incrustar video de youtube. 59
  • 3.
    Antes que nada,debes abrir “Mis documentos” Ilustración 1. Mis documentosCrear carpeta Crear carpeta 1
  • 4.
    Ilustración 2. Menucontextual 1 Se da un click derecho en cualquier parte de la pantalla para que aparezca el siguiente menú contextual. 2
  • 5.
    Se da clicken “nuevo” Ilustración 3. Nuevo 3
  • 6.
    A continuación sedebe dar click en “carpeta” Ilustración 4. Carpeta 4
  • 7.
    Se cambia elnombre de carpeta a elección propia Ilustración 5. Nombre de carpeta Nota: la carpeta debe ser SOLAMENTE para la página web 5
  • 8.
    Ahora se debeabrir Microsoft Word, en nuestro caso usaremos el 2010, pero no tiene muchas variaciones con la versión anterior o siguiente. Ilustración 6. Abrir office Word 6
  • 9.
    Abrir Word Ahora quese abrió, este es el formato que debe aparecer en su pantalla. Ilustración 7. Formato 7
  • 10.
    Convertir formato apágina web Ilustración 8. Menu Inferior En la parte inferior derecha se localiza un menú igual a esté. 8
  • 11.
    Se da clicken “diseño web” Ilustración 9. Diseño web para cambiar el diseño de la página. 9
  • 12.
    Después su pantallaserá esta. Ilustración 10. Pantalla 10
  • 13.
    Agregar marcos Ilustración 11.parte superior derecha En la parte superior derecha de su pantalla, aparece una flecha hacia abajo donde daremos click 11
  • 14.
    Se desplegará elsiguiente menú donde daremos click en “M{s comandos…” Ilustración 12. Mas comandos 12
  • 15.
    Nos va aaparecer la siguiente pantalla donde cambiaremos la opción de “comandos m{s utilizados” por la de “Todos los comandos” Ilustración 13. Todos los comandos 13
  • 16.
    Agregaremos desde “Marco nuevoa la derecha” hasta “Marco nuevo arriba” Ilustración 14.Marcos nuevos 14
  • 17.
    También agregaremos la opciónde “Eliminar marco”, no olvidemos dar click en “Aceptar” Ilustración 15. Eliminar marco 15
  • 18.
    Podrán notar quesu menú en la esquina superior izquierda se ha modificado: Ilustración 16. Iconos Daremos click en los iconos de agregar marco dependiendo de la posición que queremos que aparezca. 16 Nota: te recomendamos no agregar más del dos para que el resultado sea de tres marcos y tu página no se vea tan cargada.
  • 19.
    Hemos insertado unmarco arriba y nos ha quedado así: Ilustración 17. Ejemplo 1 17
  • 20.
    Posicionamos el cursoren el marco donde queremos agregar el siguiente marco, en este caso, el marco de abajo. Ilustración 18.Marco de abajo 18
  • 21.
    Posicionamos el cursoren cualquiera de las líneas del marco para cambiar su tamaño: Ilustración 19. Cambiar tamaño 19
  • 22.
    Ilustración 20. Modificacionde marcos Modificamos el tamaño de ambos marcos según nuestras comodidades. 20
  • 23.
    Insertar títulos amarcos Ahora escribiremos en los marcos su titulo. Ilustración 21. Titulos de marcos 21
  • 24.
    Después de eso,vamos a dar click en el menú de archivo para después clickear “Guardar como” Ilustración 22. Guardar como 22
  • 25.
    Guardar por primeravez Ilustración 23. Click a la carpeta A continuación se les abrirá algo como esto, donde daremos click en la carpeta que creamos para la página web 23
  • 26.
    Ilustración 24. Cambiarnombre Ya que la tenemos abierta, le cambiaremos el nombre a INDEX. 24
  • 27.
    Cambiaremos el formatoa “P{gina web” Ilustración 25. Pagina web 25
  • 28.
    También podemos cambiarel título de nuestra página: Ilustración 26. Titulo de archivo 26
  • 29.
    Nuestra página serásobre perros o mascotas perdidas. Ilustración 27. titulo de la pagina 27
  • 30.
    Daremos click en“guardar” y después cerraremos el archivo. Ilustración 28. Guardar y cerrar 28
  • 31.
    Ilustración 29. INDEX Nospodemos dar cuenta que tenemos 4 archivos de Word con el nombre de nuestros marcos: 29
  • 32.
    Abrir INDEX porprimera vez Abrimos nuestra carpeta de la página web Para continuar modificando nuestra página daremos click derecho sobre el archivo que se llama “INDEX” Ilustración 30. 4 Archivos 30
  • 33.
    Vamos a abrirnuestro archivo con Microsoft Word Ilustración 31. Abrir con word 31
  • 34.
    Ahora podemos borrarlo que escribimos en los marcos y así podemos comenzar con el diseño de nuestra página. Ilustración 32. Borrar nombres 32
  • 35.
    Cambiaremos nuestro menúa “Diseño de p{gina” Modificar colores. para modificar el color de cada marco. Ilustración 33. Diseño 33
  • 36.
    Ya que tienesel diseño de tu preferencia, puede quedar algo así: Ilustración 34. Tu preferencia 34
  • 37.
    Insertar Fromas. Ilustración 35.Insertar formas Vamos a movernos al menú de “Insertar” para agregar formas y poder crear el menú de nuestra página. 35
  • 38.
    Agrega las figurasque necesites para tu menú, en este caso solo ocuparemos cuatro. Ilustración 36. Ejemplo de figuras 36
  • 39.
    Puedes cambiar eldiseño de tus figuras seleccionando una de ellas y dando click en “Herramientas de dibujo” Ilustración 37. Herramientas de dibujo 37
  • 40.
    Ahora que tenemosnuestro diseño, vamos a darle click derecho sobre alguna figura. Ilustración 38. click sobre la figura 38
  • 41.
    Vamos a clicklearen “Agregar texto” para poder escribir sobre nuestras figuras. Ilustración 39. Texto Agregar texto a las figuras. 39
  • 42.
    Ya que hemosestablecido los botones de nuestro menú, agregaremos un titulo a nuestra página mediante un cuatro de texto. Agregar Titulo a la pagina web 40
  • 43.
    Ilustración 40. Diseñode nuestro men Listo, ahora ya tenemos el diseño de nuestro menú principal. 41
  • 44.
    A continuación vamosa agregar el contenido a nuestra página. Para poder agregar este mismo necesitamos tener todos los archivos que vayamos a ponerle en nuestra carpeta. Ilustración 41. Agregar contenido Agregar contenido 42
  • 45.
    Para crear nuestrohipervínculo, vamos a seleccionar la palabra o forma de donde queremos que provenga. Ilustración 42. Crear hipervínculo 43
  • 46.
    Pulsamos click derechopara que salga el siguiente menú contextual: Creación de hipervínculos. Procederemos a pulsar sobre “Hipervínculo” Ilustración 43. Menu contextual hipervinculo 44
  • 47.
    Esta es laventa que nos saldrá justo después del click. Ilustración 44. Hipervincular Debemos de fijarnos que estemos buscando nuestros archivos próximos a hipervincular en la carpeta de nuestra página web. 45
  • 48.
    Ilustración 45. Marcode destino Seleccionamos el documento y luego clickeamos en “Marco de destino” 46
  • 49.
    Después nos apareceráotra ventana donde seleccionaremos el marco de destino presionándolo en la representación de pantalla que nos aparece. Ilustración 46. Establecer marco 47
  • 50.
    Revisamos que sehaya modificado nuestro marco de destino Ilustración 47. Aceptar y finalizar Damos click en “Aceptar” para finalizar 48
  • 51.
    Ilustración 48. Hipervinculoazul Podemos observar que nuestra opción donde insertamos el hipervínculo se ha cambiado a un tono azul 49
  • 52.
    Ilustración 49. Cursorsobre la palabra Para seguir nuestro hipervínculo, vamos a poner nuestro cursor sobre la palabra y en seguida apretamos la tecla CTRL más un CLICK 50
  • 53.
    Podemos observar quenuestro hipervínculo funciona correctamente. Ilustración 50. Hipervinculo de hipervinculo Podemos crear un hipervínculo dentro del mismo hipervínculo. 51
  • 54.
    Podemos observar quesi aplicamos el mismo procedimiento el resultado estará correcto. Ilustración 51. Resultado correcto 52
  • 55.
    A continuación vamosa hacer que un texto se desplace por nuestra pantalla, a esto se le llama marquesina o marquee. Ilustración 52. Marquee Este será el texto al que le Insertar marquee. aplicaremos nuestro marquee. 53
  • 56.
    Abriremos nuestra carpetade la página web y le daremos un click derecho a nuestro archivo con el nombre del marco donde esta nuestro texto Ilustración 53. click derecho al archivo 54
  • 57.
    Vamos a abrirnuestro archivo con el bloc de notas Ilustración 54. Abrir con bloc de notas 55
  • 58.
    Ilustración 55. Localizartexto Vamos a localizar el texto donde queremos aplicar nuestro marquee 56
  • 59.
    Ilustración 56. InsertarMarquee Ahora insertaremos antes de este un <MARQUEE> y al final del texto un </MARQUEE> Justo como lo mostramos en la imagen 57
  • 60.
    Ahora clickeamos enarchivo y después guardar. Ilustración 57. cerrar bloc Después podemos cerrar el bloc. 58
  • 61.
    Vamos a localizarnuestro video en youtube Vamos a darle click en compartir y a continuación en insertar vinculo para copiar su código html Ilustración 58. Localizar video Podemos cambiar el tamaño del video según nuestras comodidades para nuestra página web. Incrustar video de youtube. 59
  • 62.
    Volveremos a abrirel archivo con el bloc de notas del marco donde queremos que se Ilustración 59. Abrir archivo con bloc de notas encuentre nuestro video. 60
  • 63.
    Ahora nos trasladamosal final de nuestro bloc y pegaremos el código del video como se muestra a continuación: Ilustración 60. Pegar codigo 61
  • 64.
    A continuación guardaremosel cambio y cerramos nuestro bloc. Ilustración 61. Guardar cambio 62
  • 65.
    ¡FELICIDADES! AHORA SABES COMOCREAR TU PROPIA PÁGINA WEB EN MICROSOFT WORD 2010. 63