Este documento proporciona instrucciones paso a paso para crear una página web básica en Microsoft Word 2010, incluyendo cómo agregar marcos, modificar colores, insertar formas, agregar texto e imágenes, crear hipervínculos, agregar una marquesina y videos de YouTube. El proceso implica crear una carpeta para almacenar los archivos de la página web, convertir el formato a página web en Word, agregar y personalizar marcos, guardar e indexar los archivos, y agregar contenido como texto, imágenes e hip
1. MANUAL PARA CREAR
PÁGINAS WEB 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
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
3. Antes que nada, debes abrir
“Mis documentos”
Ilustración 1. Mis documentosCrear carpeta
Crear carpeta
1
4. 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
6. A continuación se debe dar
click en “carpeta”
Ilustración 4. Carpeta
4
7. 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
8. 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
9. Abrir Word
Ahora que se abrió, este es el
formato que debe aparecer en
su pantalla.
Ilustración 7. Formato
7
10. Convertir formato a página web
Ilustración 8. Menu Inferior
En la parte inferior derecha se
localiza un menú igual a esté.
8
11. Se da click en “diseño web”
Ilustración 9. Diseño web
para cambiar el diseño de la
página.
9
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á el siguiente
menú donde daremos click en
“M{s comandos…”
Ilustración 12. Mas comandos
12
15. 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
17. También agregaremos la
opción de “Eliminar marco”,
no olvidemos dar click en
“Aceptar”
Ilustración 15. Eliminar marco
15
18. 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.
19. Hemos insertado un marco arriba y nos ha
quedado así:
Ilustración 17. Ejemplo 1
17
20. 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
21. Posicionamos el cursor en cualquiera de las líneas del marco
para cambiar su tamaño:
Ilustración 19. Cambiar tamaño
19
23. Insertar títulos a marcos
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 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
26. Ilustración 24. Cambiar nombre
Ya que la tenemos abierta, le cambiaremos el nombre a INDEX.
24
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
Nos podemos dar cuenta que tenemos 4 archivos de Word con el
nombre de nuestros marcos:
29
32. 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
33. Vamos a abrir nuestro archivo
con Microsoft Word
Ilustración 31. Abrir con word
31
34. 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
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 tienes el 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 figuras que necesites para tu menú, en este caso solo
ocuparemos cuatro.
Ilustración 36. Ejemplo de figuras
36
39. 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
40. Ahora que tenemos nuestro diseño, vamos a darle click derecho
sobre alguna figura.
Ilustración 38. click sobre la figura
38
41. Vamos a clicklear en “Agregar
texto” para poder escribir sobre
nuestras figuras.
Ilustración 39. Texto
Agregar texto a las figuras.
39
42. 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
43. Ilustración 40. Diseño de nuestro men
Listo, ahora ya tenemos el diseño de nuestro menú
principal.
41
44. 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
45. Para crear nuestro hipervínculo, vamos a seleccionar la
palabra o forma de donde queremos que provenga.
Ilustración 42. Crear hipervínculo
43
46. 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
47. 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
48. Ilustración 45. Marco de 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 se haya modificado nuestro marco
de destino
Ilustración 47. Aceptar y finalizar
Damos click en “Aceptar” para finalizar
48
51. Ilustración 48. Hipervinculo azul
Podemos observar que nuestra opción donde
insertamos el hipervínculo se ha cambiado a un
tono azul
49
52. 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
53. 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
54. Podemos observar que si aplicamos el mismo procedimiento el resultado estará
correcto.
Ilustración 51. Resultado correcto
52
55. 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
56. 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
57. Vamos a abrir nuestro
archivo con el bloc de notas
Ilustración 54. Abrir con bloc de notas
55
58. Ilustración 55. Localizar texto
Vamos a localizar el texto donde queremos aplicar
nuestro marquee
56
59. 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
60. Ahora clickeamos en archivo y después guardar.
Ilustración 57. cerrar bloc
Después podemos cerrar el bloc.
58
61. 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
62. 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
63. 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
