Manual para crear una página web en Word

A p l i c a c i o n e s I n f o r m á t i c a s

Cuautle González Leslie #10

Rodríguez Romero Dulce #38

Romero González Pamela Michelle #40

Suarez Peralta Karelyn #48

2014

Manual para hacer una

página web en Word Equipo

13 de Enero del 2014

Cuarto Semestre Grupo ‘’ D ’’

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

Elaboración de una página web en Word

1

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


2

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


3

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


4

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…’’


5

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’’


6

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

Y le daremos

aceptar

Una vez encontrados, los

seleccionaremos y

presionaremos ‘’Agregar’’

Y aparecerán en el recuadro

de lado derecho


7

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.


8

c) Al seleccionar los marcos la hoja de Word se dividirá en tres.

1

2

3


9

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%


10

¿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’’


11

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.


12

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


13

Presionaremos ‘’Ctrl + click’’ cuatro vez (tu puedes hacerlo las veces que desees). Y nuestro marco de

arriba quedara así:


14

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


15

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


16

d) Repetiremos el proceso hasta terminar con los cuatro rectángulos

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

Tú puedes

seleccionar

un color

distinto para

cada forma

Y nos iremos a la opción

‘’Agregar texto’’


17

3. Y así nos dejara escribir sobre nuestra forma

El resultado será este:

Insertaremos un título para

cada rectángulo, como si

creáramos un tipo menú en

nuestra página web

Nosotros elegimos estos títulos para nuestro ‘menú’’,

pero tú puedes elegir otros


18

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’’


19

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


20

Y el resultado será este:


21

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í


22

Ahora insertaremos una imagen al centro de nuestro texto. Pasos:

1. En la parte superior de Word nos iremos a la selección ‘’Insertar’’

2. Después, buscaremos nuestra imagen en nuestros documentos

Y en la clasificación de ‘’Ilustraciones’’

nos iremos a la opción ‘’Imagen’’ y

daremos click

La seleccionaremos y

le daremos ‘’Insertar’’


23

3. Y nos quedara algo así:

Quiero aclarar

que hay texto

arriba y texto

debajo de la

imagen


24

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’’


25

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’’


26

6. Y quedara así:


27

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


28

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


29

3. Y la vamos a adecuar al tamaño que queramos.


30

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


31

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

c) Y el resultado será este:

Nosotros elegimos el

color ‘’Aguamarina,

énfasis 5, claro 40%’’

ya que combina con el

color de nuestro

menú del marco de

arriba


32

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’’


33

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


34

c) El resultado será este:


35

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


36

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’’)


37

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


38

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


39

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


40

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.


41

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’’


42

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’’


43

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’’


44

9. Y presionaremos aceptar

10. Ahora en nuestra

tabla nos aparecerá el título

que seleccionamos en letra

azul y subrayada


45

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’’


46

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


47

Insertar SMART ART

Ahora insertaremos SMART ART a través de hipervínculos

Pasos:

1. Abriremos otra página de Word


48

2. Y en la parte inferior, cambiaremos nuestra barra de estado a ‘’Diseño web’’


49

3. Cambiaremos el color de nuestra pagina


50

4. Ahora nos iremos a la pestaña ‘’Insertar’’ y en la sección ‘’Ilustraciones’’ nos posicionaremos

sobre la opción ‘’SmartArt’’


51

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


52

6. Una vez que le demos aceptar directamente nos insertara automáticamente nuestro grafico


53

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.


54

8. Ahora le insertaremos a nuestro SmartArt la información (en este caso será de los éxitos de

Madonna)


55

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’’


56

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’’


57

12. Y le daremos ‘’Guardar’’


58

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


59

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’’


60

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


61

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.


62

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’’


63

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


64

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…’’


65

3. Una vez que hayamos dado click en ‘’Marco de destino…’’ seleccionaremos el marco central y le

daremos aceptar


66

4. Cuando le presionemos ‘’Ctrl + click’’ a nuestro rectángulo se abrirá nuestra grafica así:


67

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…’’


68

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’’


69

Como abrir nuestra página web

Lo primero que haremos es posicionarnos en nuestro archivo


70

Y daremos click en el botón derecho del mouse. En seguida nos aparecerá una pestaña a lado


71

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’’


72

Y nuestra página web se verá así:

Manual para crear una página web en Word

Education

Transcript of Manual para crear una página web en Word