Manual para crear una página web
-
Upload
essmonster -
Category
Education
-
view
67 -
download
4
Transcript of Manual para crear una página web
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