Este manual te ayudara a hacer una página web en Word

1. Cuarto Semestre
Grupo ‘’ D ’’
Manual para hacer una
página web en Word
Equipo
13 de Enero del 2014
2014
Cuautle González Leslie
#10
Rodríguez Romero Dulce
#38
Romero González Pamela Michelle #40
Suarez Peralta Karelyn #48
Aplicaciones Informáticas

2. Indice
Conceptos básicos......................................................................................................................................................................................................... 1
¿Qué es una página web? .......................................................................................................................................................................................... 1
¿Qué es el código HTML? ....................................................................................................................................................................................... 2
Elaborando una página web en Word ........................................................................................................................................................................... 3
¿Cómo insertar marcos? ........................................................................................................................................................................................... 3
¿Cómo insertar formas? .......................................................................................................................................................................................... 10
Cambiar color de Fondo a nuestra página web ........................................................................................................................................................ 18
Dándole forma a nuestra página.............................................................................................................................................................................. 21
Hacer tablas con hipervínculos ................................................................................................................................................................................... 27
Tablas ..................................................................................................................................................................................................................... 27
Hipervínculos .......................................................................................................................................................................................................... 36
Insertar SMART ART ............................................................................................................................................................................................ 47
Insertar PDF por medio de hipervínculos ............................................................................................................................................................... 62
Insertar grafica por medio de hipervínculos ............................................................................................................................................................ 64
Como guardar tú página web ...................................................................................................................................................................................... 67
Como abrir nuestra página web ................................................................................................................................................................................... 69

3. Elaboración de una página web en Word
Conceptos básicos
¿Qué es una página web?
Una página web es el nombre de un documento o información electrónica capaz de contener texto,
sonido, vídeo, programas, enlaces, imágenes y muchas otras cosas, adaptada para la llamada ‘’World
Wide Web’’, y que puede ser accedida mediante un navegador. Esta información se encuentra
generalmente en formato HTML o XHTML, y puede proporcionar navegación o acceso a otras
páginas web mediante enlaces de hipertexto.
Las páginas web frecuentemente también incluyen otros recursos como ser hijas de estilo en cascada,
guiones (scripts), imágenes digitales, entre otros.
Las páginas web pueden estar almacenadas en un equipo local o en un servidor web remoto. El
servidor web puede restringir el acceso únicamente a redes privadas. El acceso a las páginas web es
realizado mediante una transferencia desde servidores, utilizando el protocolo de transferencia de
hipertexto (HTTP).
1

4. Elaboración de una página web en Word
¿Qué es el código HTML?
Es un lenguaje de programación que se utiliza para el desarrollo de páginas de Internet.
Se trata de la sigla que corresponde a HyperText Markup Language, es decir, Lenguaje de Marcas de
Hipertexto.
El código HTML se encarga de desarrollar una descripción sobre los contenidos que aparecen como
textos y sobre su estructura, complementando dicho texto con diversos objetos (como fotografías o
animaciones).
Es un lenguaje muy simple y general que sirve para definir otros lenguajes que tienen que ver con el
formato de los documentos.
2

5. Elaboración de una página web en Word
Elaborando una página web en Word
¿Cómo insertar marcos?
Para comenzar a elaborar nuestra página web en Word, es necesario tener en la barra de herramientas
de acceso rápido (que se encuentra en la parte superior izquierda de Word) 5 comandos.
Pasos:
1. Dirigirnos a la barra de herramientas de acceso rápido y presionaremos la flecha en forma de
triángulo que se encuentra a lado de la flecha azul con la función de rehacer
3

6. Elaboración de una página web en Word
2. Aparecerá una ventana con el título ‘’Personalizar barra de herramientas de acceso rápido’’
Y nos iremos a la
opción de ‘’Más
comandos…’’
4

7. Elaboración de una página web en Word
3. Ahora tendremos una pestaña con el título ‘’Opciones de Word’’ y nos iremos a la pestañita
donde dice ‘’Comandos disponibles en:’’ y seleccionaremos la opción ‘’Todos los comandos’’
5

8. Elaboración de una página web en Word
4. En el recuadro de abajo buscaremos los siguientes comandos:
a) Marco nuevo a la derecha
b) Marco nuevo a la izquierda
c) Marco nuevo arriba
d) Marco nuevo abajo
e) Eliminar marco
Una vez encontrados, los
seleccionaremos y
presionaremos ‘’Agregar’’
Y aparecerán en el recuadro
de lado derecho
Y le daremos
aceptar
6

9. Elaboración de una página web en Word
5. En este caso insertaremos un ‘’Marco nuevo arriba’’ y un ‘’Marco nuevo abajo’’ (tu puedes
hacerlo a tu gusto).
a) Nos iremos a la parte superior izquierda de Word y seleccionaremos los marcos.
b) Debes asegurarte que en la barra de estado de Word (que se encuentra en la parte inferior
derecha) nuestra hoja este en diseño Web.
7

10. Elaboración de una página web en Word
c) Al seleccionar los marcos la hoja de Word se dividirá en tres.
1
2
3
8

11. Elaboración de una página web en Word
6. Acomodaremos los marcos a nuestro gusto (en este caso tomaremos nuestra pantalla como en
un 100%, el marco de arriba será un 30%, el de abajo un 15%, y el centro un 55%. Te repito que
tú lo puedes hacer a tu gusto).
Marco de arriba
30%
Marco del centro
55%
Marco de abajo
15%
9

12. Elaboración de una página web en Word
¿Cómo insertar formas?
Insertar formas
Ya teniendo nuestros tres marcos, en el marco de arriba insertaremos 4 formas.
Pasos:
1. Nos iremos a la parte superior de Word y en la barra de herramientas nos posicionaremos en
‘’Insertar’’
2. De ahí nos iremos al apartado de ‘’Ilustraciones’’ y seleccionaremos la opción ‘’Formas’’
10

13. Elaboración de una página web en Word
3. En la opción de ‘’Formas’’ seleccionaremos un rectángulo con puntas redondeadas (tu puedes
hacerlo a tu gusto).
Notaras que en la pestaña de
‘’Formas’’ hay distintas secciones
clasificando las formas, cada una con
un respectivo nombre. Nosotros nos
iremos a la sección de ‘’Rectángulos’’ y
seleccionaremos el rectángulo con
puntas redondeadas ya antes
mencionado.
11

14. Elaboración de una página web en Word
4. Daremos ‘’click’’ sobre el rectángulo con puntas redondeadas y lo posicionaremos en el
marco de arriba.
Una vez estando posicionados sobre el
rectángulo, en el teclado presionaremos ‘’Ctrl +
click’’. Esto hará que se forme un clon de mi
rectángulo
A la hora de presionar ‘’Ctrl + click’’
deslizaremos con el mouse nuestro
rectángulo, hasta colocarlo en donde
deseamos
12

15. Elaboración de una página web en Word
Presionaremos ‘’Ctrl + click’’ cuatro vez (tu puedes hacerlo las veces que desees). Y nuestro marco de
arriba quedara así:
13

16. Elaboración de una página web en Word
5. Ahora le cambiaremos el color a nuestra cuatro formas
a) Primero nos posicionaremos sobre nuestro primer rectángulo.
Y en la parte
superior de Word
nos aparecerá una
sección llamada
‘’Herramientas de
dibujo Formato ´´
en color naranja
14

17. Elaboración de una página web en Word
b) En la sección de ‘’herramientas de dibujo’’ ‘’Formato’’, nos iremos a ‘’Relleno de forma’’
c) Daremos click en ‘’Relleno de forma’’ y nos aparecerá una ventana llamada ‘’Colores de
tema’’.
En este caso, nosotros
elegimos un tono de la
gama de los azules, pero
tú puedes elegir el que
sea de tu agrado
15

18. Elaboración de una página web en Word
d) Repetiremos el proceso hasta terminar con los cuatro rectángulos
Tú puedes
seleccionar
un color
distinto para
cada forma
6. Ahora insertaremos texto en cada rectángulo. Pasos:
1. Nos posicionaremos sobre un rectángulo y daremos click en el botón derecho del mouse
2. Inmediatamente nos aparecerá una ventanita
Y nos iremos a la opción
‘’Agregar texto’’
16

19. Elaboración de una página web en Word
3. Y así nos dejara escribir sobre nuestra forma
Insertaremos un título para
cada rectángulo, como si
creáramos un tipo menú en
nuestra página web
El resultado será este:
Nosotros elegimos estos títulos para nuestro ‘menú’’,
pero tú puedes elegir otros
17

20. Elaboración de una página web en Word
Cambiar color de Fondo a nuestra página web
Ahora nos posicionaremos sobre nuestro marco del centro y en la parte superior de Word, nos iremos
a ‘’Diseño de página’’.
Y en la sección ‘’Fondo de
página’’ nos iremos a
‘’Color de página’’
18

21. Elaboración de una página web en Word
Daremos click en ‘’Color de página’’ y nos aparecerá una ventana con el título ‘’Colores de tema’’
Nosotros elegimos un
color ‘’Azul, énfasis 1’’
Tú puedes hacerlo a tu
gusto
19

22. Elaboración de una página web en Word
Y el resultado será este:
20

23. Elaboración de una página web en Word
Dándole forma a nuestra página
Ahora le agregaremos todo el contenido a nuestra página web. (En nuestro caso, nuestra página trata
sobre ‘’Madonna’’)
Lo primero que aremos es agregar el texto sobre lo que va a tratar (En este caso será su biografía e
información sobre ella)
Nos
quedara
algo así
21

24. Elaboración de una página web en Word
Ahora insertaremos una imagen al centro de nuestro texto. Pasos:
1. En la parte superior de Word nos iremos a la selección ‘’Insertar’’
Y en la clasificación de ‘’Ilustraciones’’
nos iremos a la opción ‘’Imagen’’ y
daremos click
2. Después, buscaremos nuestra imagen en nuestros documentos
La seleccionaremos y
le daremos ‘’Insertar’’
22

25. Elaboración de una página web en Word
3. Y nos quedara algo así:
Quiero aclarar
que hay texto
arriba y texto
debajo de la
imagen
23

26. Elaboración de una página web en Word
4. Estando posicionados en nuestra imagen, en la parte superior de Word, nos aparecerá una
pestaña con el nombre ‘’Herramientas de imagen’’ ‘’Formato’’ y en la sección ‘’Organizar’’
nos iremos a la opción ‘’Posición’’
24

27. Elaboración de una página web en Word
5. Presionamos click sobre la opción ‘’ Posición’’ y nos aparecerá una pestañita con varias
opciones
Y de todas la
opciones,
nosotros
seleccionaremos
la opción ‘’
Posición en el
medio de la parte
izquierda con
ajuste de texto
cuadrado’’
25

28. Elaboración de una página web en Word
6. Y quedara así:
26

29. Elaboración de una página web en Word
Hacer tablas con hipervínculos
Tablas
Ahora en nuestra página web insertaremos una tabla con distintos temas sobre (en este caso) la
biografía del artista, con intención de hacer un tipo índice
Pasos:
1. Posicionarnos en la parte donde deseamos insertar nuestra tabla
27

30. Elaboración de una página web en Word
2. En la parte superior de Word, nos iremos a la opción ‘’Insertar’’ y nos posicionaremos sobre la
opción ‘’Tabla’’
E insertaremos una tabla de 1 x 1
con motivo de hacer un ‘’tipo’’
índice con hipervínculos.
Tú puedes hacer la tabla de la
proporción que quieras
28

31. Elaboración de una página web en Word
3. Y la vamos a adecuar al tamaño que queramos.
29

32. Elaboración de una página web en Word
4. Ahora le cambiaremos el color:
a) En la parte superior de Word nos iremos a la pestaña ‘’Herramientas de tabla’’ ‘’ Diseño’’
Y seleccionaremos la
opción ‘’Sombreado’’
para así poder
cambiarle el color
30

33. Elaboración de una página web en Word
b) Una vez que le hallamos dado click a la opción de ‘’sombreado’’ nos aparecerá una pestaña con
el título ‘’ color de tema’’ y seleccionaremos el color que deseemos
Nosotros elegimos el
color ‘’Aguamarina,
énfasis 5, claro 40%’’
ya que combina con el
color de nuestro
menú del marco de
arriba
c) Y el resultado será este:
31

34. Elaboración de una página web en Word
5. Ahora le modificaremos los bordes a nuestra tabla. Pasos:
a) Estando posicionados sobre la tabla, nos iremos a la parte superior de Word y en la pestaña
‘’herramientas de tabla’’ ‘’dibujo’’ señalaremos la opción ‘’ Bordes’’
Daremos click en la opción ‘’Bordes’’ y
nos iremos a la opción ‘’Bordes y
sombreado’’
32

35. Elaboración de una página web en Word
b) Y nos aparecerá una ventana con el título ‘’Bordes y sombreado’’
Y en el recuadro
con el título
‘’Ancho’’
elegiremos la
medida ‘’6 pto’’
para que tenga
mejor presencia
Y le daremos
aceptar
33

36. Elaboración de una página web en Word
c) El resultado será este:
34

37. Elaboración de una página web en Word
6. Ahora escribiremos en nuestra tabla los títulos de los temas (en este caso de la biografía del
artista)
7.
Y después, debajo de la tabla (y dejando un buen espacio
entre sí) comenzaremos a escribir los temas, cada uno, obviamente,
con su título que lo distinga
35

38. Elaboración de una página web en Word
Hipervínculos
Comenzaremos ahora a insertar hipervínculos en nuestra tabla
Pasos:
1. Seleccionaremos todo nuestro texto de un solo tema (En este caso seleccionaremos todo el
texto del tema ‘’Vida y carrera’’)
36

39. Elaboración de una página web en Word
2. En la parte superior de Word, nos iremos a la sección ‘’Insertar’’ y en la clasificación
‘’Vínculos’’ nos posicionaremos sobre la opción ‘’Marcador’’
Importante: Solo seleccione todo el texto que corresponde al tema del titulo
37

40. Elaboración de una página web en Word
3. Haremos click sobre la opción ‘’Marcador’’ y enseguida nos aparecerá esta ventana:
4.
Le pondremos un nombre a nuestro
marcador. Por ejemplo: ‘’Vidaycarrera’’.
Y presionaremos agregar
38

41. Elaboración de una página web en Word
NOTA: Escribiremos las palabras de nuestro título sin dejar espacios ya que si no lo hacemos
este no podrá ser agregado.
En la frase ‘’Vida y
carrera’’ tenemos dos
espacios:
Vida_y_carrera
Si lo escribimos con
espacios, Word no nos
deja agregar como
marcador
39

42. Elaboración de una página web en Word
Lo mismo haremos con los otros temas
Y agregamos de igual manera los
hipervínculos de cada tema
Trata que el nombre de cada marcador sea
un nombre distintivo para que se te facilite
reconocerlo, de preferencia que sea el
título de cada texto.
40

43. Elaboración de una página web en Word
5. Una vez que terminemos con todos los temas, nos iremos de regreso a nuestra tabla y
seleccionaremos el primer título que se encuentra ahí
6.
Y en la parte superior de Word, nuevamente nos iremos a la
pestaña ‘’Insertar’’ y en la sección ‘’vínculos’’ seleccionaremos la opción
‘’Hipervínculo’’
41

44. Elaboración de una página web en Word
7. Haremos click en la opción ‘’Hipervínculo’’ y nos aparecerá una ventana con el título de
‘’Insertar hipervínculo’’
En la parte superior notaras que el título que seleccionaste en la
tabla, aparece
Nos iremos a la parte extrema izquierda, en la sección que
lleva por nombre ‘’Vincular a: ‘’ y seleccionaremos la opción
‘’Lugar de este documento’’
42

45. Elaboración de una página web en Word
8. Una vez posicionados en la opción ‘’Lugar de este documento’’
Nos
aparecerán los
marcadores
que
insertamos
anteriormente
Y elegiremos el que le corresponde
En este caso ‘’Vidaycarrera’’
43

46. Elaboración de una página web en Word
9. Y presionaremos aceptar
10.
Ahora en nuestra
tabla nos aparecerá el título
que seleccionamos en letra
azul y subrayada
44

47. Elaboración de una página web en Word
Si presionamos ‘’Ctrl + click’’ la tabla nos llevara directamente al texto que seleccionamos como
marcador
Si queremos podemos cambiar el color del vínculo
(el titulo subrayado en la tabla’’
45

48. Elaboración de una página web en Word
Repetiremos el procedimiento con todos los títulos de la tabla
En este caso, en el titulo número 6 que lleva por nombre
‘’Video’’ esperaremos ya que insertaremos un hipervínculo
de forma diferente a los ya antes insertados
46

49. Elaboración de una página web en Word
Insertar SMART ART
Ahora insertaremos SMART ART a través de hipervínculos
Pasos:
1. Abriremos otra página de Word
47

50. Elaboración de una página web en Word
2. Y en la parte inferior, cambiaremos nuestra barra de estado a ‘’Diseño web’’
48

51. Elaboración de una página web en Word
3. Cambiaremos el color de nuestra pagina
49

52. Elaboración de una página web en Word
4. Ahora nos iremos a la pestaña ‘’Insertar’’ y en la sección ‘’Ilustraciones’’ nos posicionaremos
sobre la opción ‘’SmartArt’’
50

53. Elaboración de una página web en Word
5. En seguida nos aparecerá una ventana con el nombre de ’’Insertar un gráfico SmartArt’’
Y elegiremos el grafico que más nos agrade
Y daremos aceptar
51

54. Elaboración de una página web en Word
6. Una vez que le demos aceptar directamente nos insertara automáticamente nuestro grafico
52

55. Elaboración de una página web en Word
7.
En la parte superior de Word, encontraremos una pestaña con el nombre de ‘’Herramientas de
SmartArt’’ ‘’Diseño’’ y en la sección ‘’Estilos de SmartArt’’ nos posicionaremos en la opción
‘’cambiar colores’’
Y nos aparecerá una gama de colores.
53

56. Elaboración de una página web en Word
8. Ahora le insertaremos a nuestro SmartArt la información (en este caso será de los éxitos de
Madonna)
54

57. Elaboración de una página web en Word
9. Luego, en la parte superior de Word, nos iremos a la pestaña ‘’Archivo’’ y nos posicionaremos
en la opción ‘’Guardar como’’
10.
Daremos click sobre la opción ‘’Guardar como’’ y nos
aparecerá una ventana con el título ‘’Guardar como’’
55

58. Elaboración de una página web en Word
11.
Lo guardaremos con el nombre que deseemos y en la parte media inferior, dice ‘’Tipo:
Documento de Word’’ lo cambiaremos a ‘’Página Web’’
56

59. Elaboración de una página web en Word
12.
Y le daremos ‘’Guardar’’
57

60. Elaboración de una página web en Word
13.
Ahora nos dirigiremos a nuestra página web principal
Y en nuestro menú principal (que se
encuentra en el marco de arriba) nos
posicionaremos en el rectángulo que dice
‘’SmartArt’’ y lo seleccionaremos
58

61. Elaboración de una página web en Word
11.
Y en la parte superior de Word, nos iremos a la pestaña ‘’Insertar’’, en la sección
‘’Vínculos’’ nos posicionaremos en la opción ‘’Hipervínculo’’
Y nos aparecerá la ventana ‘’Insertar hipervínculo’’. Lo vincularemos a la opción ‘’Archivos o
página web existente’’ y buscaremos nuestro archivo con el símbolo de ‘’Google Chrome’’
59

62. Elaboración de una página web en Word
Luego daremos click en la opción ‘’Marco de destino… ‘
Y nos aparecerá una pequeña ventana llamada ‘’ Establecer marco de destino’’
Y seleccionaremos el marco del centro y le daremos aceptar
60

63. Elaboración de una página web en Word
12.
Nos quedara algo así:
13.
Presionaremos ‘’Ctrl + Click’’
sobre el texto subrayado dentro del rectángulo
y nos aparecerá el ‘’SmartArt’’ en el marco
del centro de nuestra página web.
61

64. Elaboración de una página web en Word
Insertar PDF por medio de hipervínculos
Pasos:
1. Guardaremos nuestro archivo PDF en nuestra carpeta de la pagina web
2. En el menú (que se encuentra en el marco de arriba de nuestra pagina web) nos posicionaremos
en el rectángulo con el nombre de ‘’PDF’’ y lo seleccionaremos, y nos iremos a la parte
superior de Word y en la pestaña ‘’Insertar’’, en la sección ‘’Vínculos’’ nos posicionaremos en la
opción ‘’Hipervínculo’’
62

65. Elaboración de una página web en Word
3. Daremos Click en la opción ‘’Hipervínculo’’ y nos aparecerá una ventana llamada ‘’Insertar
hipervínculo’’ y lo vincularemos a ‘’Archivo o página web existente’’ y buscaremos nuestro
archivo PDF y le daremos aceptar
63

66. Elaboración de una página web en Word
Insertar grafica por medio de hipervínculos
Pasos:
1. En nuestro menú (que se encuentra en el marco de arriba) nos posicionaremos en el rectángulo
que dice ‘’Grafica’’
2. Nos iremos a la parte superior de Word y en la pestaña ‘’Insertar’’, en la sección ‘’Vínculos’’ y en
la opción ‘’ hipervínculo’’ daremos click y nos aparecerá una ventana con el nombre ‘’Insertar
hipervínculo’’
Lo vincularemos a ‘’Archivo
o página web en existente’’ y
buscaremos nuestro archivo
con el símbolo de ‘’Google
Chrome’’
Y daremos click en ‘’Marco
de destino…’’
64

67. Elaboración de una página web en Word
3. Una vez que hayamos dado click en ‘’Marco de destino…’’ seleccionaremos el marco central y le
daremos aceptar
65

68. Elaboración de una página web en Word
4. Cuando le presionemos ‘’Ctrl + click’’ a nuestro rectángulo se abrirá nuestra grafica así:
66

69. Elaboración de una página web en Word
Como guardar tú página web
En la parte superior de Word, nos iremos a la pestaña ‘’Archivo’’
Y le daremos click en la opción ‘’Guardar como…’’
67

70. Elaboración de una página web en Word
Lo guardaremos con el nombre ‘’Página web en Word’’ y en lugar de que sea ‘’Tipo:
Documento de Word’’ lo cambiaremos a ‘’Tipo: página web’’
Y le daremos
‘’Guardar’’
68

71. Elaboración de una página web en Word
Como abrir nuestra página web
Lo primero que haremos es posicionarnos en nuestro archivo
69

72. Elaboración de una página web en Word
Y daremos click en el botón derecho del mouse. En seguida nos aparecerá una pestaña a lado
70

73. Elaboración de una página web en Word
En esa pestaña nos posicionaremos en la opción ‘’Abrir con…’’ y nos aparecerá otra pestaña. En
la segunda pestaña nos posicionaremos en la opción ‘’ Internet Explorer’’
71

74. Elaboración de una página web en Word
Y nuestra página web se verá así:
72