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

1

Introducción:................................................................................................................................................................................................................ 3

¿Qué es una página web?.........................................................................................................................................................................................3

Diseño de la página....................................................................................................................................................................................................... 6

Marcos...................................................................................................................................................................................................................... 6

Personalización de barra de herramientas...........................................................................................................................................................6

Distribución de marcos.......................................................................................................................................................................................10

Colores de marcos.............................................................................................................................................................................................. 13

Hipervínculos.......................................................................................................................................................................................................... 18

Formas.................................................................................................................................................................................................................... 18

Insertar Hipervínculo.......................................................................................................................................................................................... 21

Insertar un archivo PDF......................................................................................................................................................................................29

¿Cómo puedo modificar mi página web?.......................................................................................................................................................33

Como abrir nuestra página web.................................................................................................................................................................................34

Índice de imágenes.........................................................................................................................................................................................35

2

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.

3

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”.

4

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

5

Diseño de la página.

Marcos

Personalización de barra de herramientasAhora 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

6

Seleccionamos “Todos los comandos”.

Ilustración 4 Todos los Comandos

Clic

7

Buscamos la opción “Marco nuevo a la derecha” se selecciona y se da clic en “Agregar”

Ilustración 5 Marco a la Derecha

Clic

8

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á.

Ilustración 6 Resultado de Marcos

Resultado

9

Distribución de marcosSeleccionamos 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.

Ilustración 7 Distribución de Marcos

Resultado

10

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 de la página web.

Ilustración 8 Nombre de Marcos

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.

Título

11

12

Colores de marcosPara 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

13

El resultado varía por gustos pero quedaría de la siguiente manera.

Ilustración 10 Resultado

14

Como siguiente paso escribiremos los temas de los que vamos a hablar o los datos de importancia que se utilizaran

Ilustración 11 Temas

Lo guardaremos como página web con una extensión HTML

15

Ilustración 12 HTML

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.

16

Ilustración 13 Carpeta

Hipervínculos Ya con nuestros temas definidos procederemos a insertar los hipervínculos de nuestra página web

17

FormasComenzaremos 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

Seleccionamos nuestro titulo (primer botón)

18

Ilustración 15 Selección de titulo

Podemos cambiar el color de la forma y ajustar el texto dentro de ella.

19

Ilustración 16: Color de botón

Estos pasos se realizan con todos los temas.

Insertar HipervínculoDebemos tener archivos en nuestra unidad de memoria los cuales contengan los temas que vamos a tratar.

20

Ilustración 17 Temas

A continuación en nuestra página, seleccionaremos el tema.

Ilustración 18 Selección

Después nos vamos a la sección de ¨Insertar¨ y seleccionamos ¨Hipervínculo¨

Tema

21

Ilustración 19 Insertar hipervínculo

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.

22

Ilustración 20 Selección de tema

Continuaremos dando clic en la opción marco de destino.

Nos aparecerá este menú.

23

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

Cuando seleccionemos el marco que deseamos damos aceptar en ambas ventanas.

24

Ilustración 23: Seleccion de tema

Tendremos este resultado.

25

Ilustración 24 Resultado

Dando clic en el hipervínculo azul nos aparecer la información

26

Ilustración 25 Información

Se repite el mismo paso para los diferentes hipervínculos.

27

Ilustración 26 Repitiendo pasos

Insertar un archivo PDFPara crear un archivo PDF debemos tener toda nuestra información en un archivo tipo Word (.docx) y guardarlo como PDF

28

Ilustración 27 Guardar PDF

Damos clic en aceptar y quedará así:

29

Ilustración 28 PDF ejemplo

Ahora procederemos a insertar el archivo PDF en nuestra página, se realizaran los mismos pasos que cuando insertamos hipervínculos

30

Ilustración 29 Insertar PDF

Ilustración 30 Seleccionar PDF

Al dar clic al hipervínculo que contiene el PDF nos abrirá el documento en otra ventana.

Clic

31

Ilustración 31 PDF insertado

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.

32

Se da clic derecho Seleccionamos “ABRIR CON WORD”

Ilustración 32 Modificar página web

Como abrir nuestra página web

Debemos ir a ABRIR CON y seleccionar el explorador deseado

33

34

Índice de imágenes

Ilustración 1 Creación de carpeta.................................................................................................................................................................................3Ilustración 2 Diseño web..............................................................................................................................................................................................4Ilustración 3 Insertar Marcos........................................................................................................................................................................................6Ilustración 4 Todos los Comandos................................................................................................................................................................................7Ilustración 5 Marco a la Derecha..................................................................................................................................................................................8Ilustración 6 Resultado de Marcos...............................................................................................................................................................................9Ilustración 7 Distribución de Marcos..........................................................................................................................................................................10Ilustración 8 Nombre de Marcos................................................................................................................................................................................11Ilustración 9 Cambiar color.........................................................................................................................................................................................13Ilustración 10 Resultado............................................................................................................................................................................................. 14Ilustración 11 Temas................................................................................................................................................................................................... 15Ilustración 12 HTML.................................................................................................................................................................................................... 16Ilustración 13 Carpeta.................................................................................................................................................................................................17Ilustración 14 Formas................................................................................................................................................................................................. 18Ilustración 15 Selección de titulo................................................................................................................................................................................19Ilustración 16: Color de botón....................................................................................................................................................................................20Ilustración 17 Temas................................................................................................................................................................................................... 21Ilustración 18 Selección..............................................................................................................................................................................................21Ilustración 19 Insertar hipervínculo............................................................................................................................................................................22Ilustración 20 Selección de tema................................................................................................................................................................................23Ilustración 21 Menú de selección...............................................................................................................................................................................24Ilustración 22 Selección de marco..............................................................................................................................................................................24Ilustración 23: Seleccion de tema...............................................................................................................................................................................25Ilustración 24 Resultado............................................................................................................................................................................................. 26

35

Ilustración 25 Información..........................................................................................................................................................................................27Ilustración 26 Repitiendo pasos..................................................................................................................................................................................28Ilustración 27 Guardar PDF......................................................................................................................................................................................... 29Ilustración 28 PDF ejemplo.........................................................................................................................................................................................30Ilustración 29 Insertar PDF.........................................................................................................................................................................................31Ilustración 30 Seleccionar PDF....................................................................................................................................................................................31Ilustración 31 PDF insertado.......................................................................................................................................................................................32Ilustración 32 Modificar página web..........................................................................................................................................................................33