El documento explica los pasos para crear una página web básica en Microsoft Word. Primero se crea una carpeta y un archivo Word con diseño web. Luego se insertan marcos para dividir la página y se personalizan con colores y títulos. Después se agregan hipervínculos e imágenes usando formas para navegar entre secciones de la página. Finalmente, el documento se guarda en formato HTML para abrirlo como página web.
1. Manual para crear una página web
Autores:
Gómez Meza Laura Jacqueline N.L. 16
Guzmán Mendoza Luis Gerardo N.L. 18
Romero Reyes María Fernanda N.L. 41
2. Introducción: ...................................................................................................................................................................................................................2
¿Qué es una página web? ...........................................................................................................................................................................................2
Diseño de la página. ........................................................................................................................................................................................................5
Marcos .........................................................................................................................................................................................................................5
Personalización de barra de herramientas..............................................................................................................................................................5
Distribución de marcos............................................................................................................................................................................................9
Colores de marcos .................................................................................................................................................................................................12
Hipervínculos .............................................................................................................................................................................................................17
Formas .......................................................................................................................................................................................................................17
Insertar Hipervínculo .............................................................................................................................................................................................20
Insertar un archivo PDF .........................................................................................................................................................................................28
¿Cómo puedo modificar mi página web?..........................................................................................................................................................32
Como abrir nuestra página web ....................................................................................................................................................................................33
Índice de imágenes ............................................................................................................................................................................................34
1
3. Introducción:
El objetivo de este manual es que los lectores adquieran nuevos conocimientos en el campo
de informática que a su vez les facilitara crear una página web en Microsoft Word
¿Qué es una página web?
Una Página Web es un documento electrónico que forma parte de la WWW (World Wide Web)
generalmente construido en el enguaje HTML (Hyper Text Markup Language o Lenguaje de
Marcado de Hipertexto); Puede contener cualquiera de los elementos siguientes: Texto,
Imágenes, Audio, Objetos Animados Meta, Videos, Hipervínculos etc.
2
4. Para empezar, creamos una carpeta en la unidad de memoria que vallamos a utilizar.
Ilustración 1 Creación de carpeta
La carpeta que fue creada se guardará con el nombre de “INDEX”.
3
5. Abriremos un archivo tipo Word (.docx) en el cual como paso principal pondremos la visto en
tipo ¨Diseño Web¨
Ilustración 2 Diseño web
4
6. Diseño de la página.
Marcos
Personalización de barra de herramientas
Ahora procederemos a realizar el diseño de
nuestra página.
Para insertar marcos damos clic en la parte izquierda donde se desprenderá un menú.
Seleccionaremos la opción “Mas comandos”.
Clic
Ilustración 3 Insertar Marcos
5
8. Buscamos la opción “Marco nuevo a la derecha” se selecciona y se da clic en “Agregar”
Clic
Ilustración 5 Marco a la Derecha
7
9. Posteriormente hacemos lo mismo con la opción “Marco nuevo a la izquierda, Marco nuevo
arriba, Marco nuevo abajo y Eliminar marco”, damos clic en aceptar.
Nuestro resultado será.
Resultado
Ilustración 6 Resultado de Marcos
8
10. Distribución de marcos
Seleccionamos la opción que se adapte más a nuestras necesidades ya sea “Marco nuevo
arriba” ”Marco nuevo a la derecha” depende de cómo queremos que sea el diseño de
nuestra página.
Resultado
Ilustración 7 Distribución de Marcos
9
11. Al presionar el primer marco se escribe el título con el que se trabajara y se guarda en la
carpeta.
En nuestro caso el marco que seleccionamos lo utilizaremos para ahí colocar nuestros botones
Título
de la página web.
Ilustración 8 Nombre de Marcos
10
12. Se ejecuta el mismo procedimiento en este caso para los dos marcos restantes, cabe
mencionar que una vez guardado en la carpeta creada se borrara el título.
11
13. Colores de marcos
Para modificar el color de los diferentes marcos se selecciona el marco que se desea cambiar
de color (dando clic en su superficie blanca) damos clic en la opción “Color de página” y
seleccionamos el color que más nos agrade.
Ilustración 9 Cambiar color
12
14. El resultado varía por gustos pero quedaría de la siguiente manera.
Ilustración 10 Resultado
13
15. Como siguiente paso escribiremos los temas de los que vamos a hablar o los datos de
importancia que se utilizaran
Ilustración 11 Temas
14
16. Lo guardaremos como página web con una extensión HTML
Ilustración 12 HTML
15
17. Una vez guardado el archivo, al abrir la carpeta que lo contiene aparecerá así, cada uno de
esos archivos son el contenido de cada cuadro que creamos con los marcos.
Ilustración 13 Carpeta
16
18. Hipervínculos
Ya con nuestros temas definidos procederemos a insertar los hipervínculos de nuestra página
web
Formas
Comenzaremos por establecer los lugares donde el usuario va dar clic para ver el tema, esto lo
haremos insertando formas que simularan botones.
En Insertar, seleccionamos ¨formas¨ y elegimos a gusto, en este caso un rectángulo.
Ilustración 14 Formas
17
20. Podemos cambiar el color de la forma y ajustar el texto dentro de ella.
Ilustración 16: Color de botón
Estos pasos se realizan con todos los temas.
19
21. Insertar Hipervínculo
Debemos tener archivos en nuestra unidad de memoria los cuales contengan los temas que
vamos a tratar.
Ilustración 17 Temas
A continuación en nuestra página, seleccionaremos el tema.
Tema
Ilustración 18 Selección
20
22. Después nos vamos a la sección de ¨Insertar¨ y seleccionamos ¨Hipervínculo¨
Ilustración 19 Insertar hipervínculo
21
23. Al haber seleccionado Hipervínculo nos aparecerá un menú como este, en el cual tenemos
que seleccionar nuestro archivo prefabricado en el cual tenemos la información del tema.
Ilustración 20 Selección de tema
Continuaremos dando clic en la opción marco de destino.
22
24. Nos aparecerá este menú.
Ilustración 21 Menú de selección
En este menú vamos a elegir donde queremos que la información aparezca.
Ilustración 22 Selección de marco
23
25. Cuando seleccionemos el marco que deseamos damos aceptar en ambas ventanas.
Ilustración 23: Seleccion de tema
24
27. Dando clic en el hipervínculo azul nos aparecer la información
Ilustración 25 Información
26
28. Se repite el mismo paso para los diferentes hipervínculos.
Ilustración 26 Repitiendo pasos
27
29. Insertar un archivo PDF
Para crear un archivo PDF debemos tener toda nuestra información en un archivo tipo Word
(.docx) y guardarlo como PDF
Ilustración 27 Guardar PDF
28
30. Damos clic en aceptar y quedará así:
Ilustración 28 PDF ejemplo
29
31. Ahora procederemos a insertar el archivo PDF en nuestra página, se realizaran los mismos
pasos que cuando insertamos hipervínculos
Ilustración 29 Insertar PDF
Clic
Ilustración 30 Seleccionar PDF
30
32. Al dar clic al hipervínculo que contiene el PDF nos abrirá el documento en otra ventana.
Ilustración 31 PDF insertado
31
33. Así damos por concluido la elaboración de la página web.
¿Cómo puedo modificar mi página web?
Si se quiere volver a modificar se hace lo siguiente:
Se selecciona el archivo original (HTML) que se guardó en la carpeta.
Se da clic derecho
Seleccionamos “ABRIR CON WORD”
Ilustración 32 Modificar página web
32
34. Como abrir nuestra página web
Debemos ir a ABRIR CON y seleccionar el explorador deseado
33
35. Índice de imágenes
Ilustración 1 Creación de carpeta....................................................................................................................................................................................3
Ilustración 2 Diseño web .................................................................................................................................................................................................4
Ilustración 3 Insertar Marcos ..........................................................................................................................................................................................5
Ilustración 4 Todos los Comandos ...................................................................................................................................................................................6
Ilustración 5 Marco a la Derecha.....................................................................................................................................................................................7
Ilustración 6 Resultado de Marcos ..................................................................................................................................................................................8
Ilustración 7 Distribución de Marcos...............................................................................................................................................................................9
Ilustración 8 Nombre de Marcos ...................................................................................................................................................................................10
Ilustración 9 Cambiar color ...........................................................................................................................................................................................12
Ilustración 10 Resultado ................................................................................................................................................................................................13
Ilustración 11 Temas .....................................................................................................................................................................................................14
Ilustración 12 HTML.......................................................................................................................................................................................................15
Ilustración 13 Carpeta ...................................................................................................................................................................................................16
Ilustración 14 Formas ....................................................................................................................................................................................................17
Ilustración 15 Selección de titulo ..................................................................................................................................................................................18
Ilustración 16: Color de botón .......................................................................................................................................................................................19
Ilustración 17 Temas .....................................................................................................................................................................................................20
Ilustración 18 Selección .................................................................................................................................................................................................20
Ilustración 19 Insertar hipervínculo ..............................................................................................................................................................................21
Ilustración 20 Selección de tema...................................................................................................................................................................................22
Ilustración 21 Menú de selección..................................................................................................................................................................................23
Ilustración 22 Selección de marco .................................................................................................................................................................................23
Ilustración 23: Seleccion de tema .................................................................................................................................................................................24
34
36. Ilustración 24 Resultado ................................................................................................................................................................................................25
Ilustración 25 Información ............................................................................................................................................................................................26
Ilustración 26 Repitiendo pasos ....................................................................................................................................................................................27
Ilustración 27 Guardar PDF ...........................................................................................................................................................................................28
Ilustración 28 PDF ejemplo............................................................................................................................................................................................29
Ilustración 29 Insertar PDF ............................................................................................................................................................................................30
Ilustración 30 Seleccionar PDF ......................................................................................................................................................................................30
Ilustración 31 PDF insertado .........................................................................................................................................................................................31
Ilustración 32 Modificar página web .............................................................................................................................................................................32
35