19/10/2016

TutorialesdiversosProf.CarlosMontielVocacional6,I.P.N.:Sesin#9DeWord2013apginaWeb...
1

Ms Siguienteblog

Crearunblog Acceder

TutorialesdiversosProf.Carlos
MontielVocacional6,I.P.N.
Prof.CarlosMontiel

lunes,17deoctubrede2016

CarlosMontiel
Seguir

Vermiperfilcompleto

Sesin#9DeWord2013apginaWeb...
Sesin#9Word2013IVDedocumentoaPginaWeb
Atravsdelapresenteprcticaserealizarnvariasacciones:

ArchivodelBlog

2016(29)
octubre(3)
Sesin#9DeWord2013
apginaWeb...
Poesaparajvenespor
AndrVlezMontiel
Sesin#8Creacinde
TabladeContenidos
enWord...
septiembre(9)

CreacindeunaanimacinFlash,lacualrepresentarunBanner
(consonidomusicaladherido)
Creacindeldocumentobase(*.doc),conTabladeContenidos
Establecermarcaspararealizarhipervnculosdentrodelmismo
documento
ConvertireldocumentobaseaunaPginaWeb
ProtegerlapginaWebconcontraseadeescritura

Paso 1. Creacin de la animacin Flash. Para ello emplearemos el programa

KoolMoves, el cual podrs hallarlo en la nube (Internet), basta con que teclees en
Google:KoolMovesportableDownload,ylisto.

agosto(5)
julio(1)

AlejecutarelprogramaKoolMovessemostrarelsiguienteambiente:

mayo(2)
marzo(8)
febrero(1)
2014(1)

Elreaenblancosetratadelescenario,enelcualcolocaremosunaimagen(logoIPN.jpg)
e insertaremos dos textos (1 INSTITUTO POLITCNICO NACIONAL, 2 Prof. Carlos
Montiel R.). Trata hasta donde sea posible darle ms o menos las mismas dimensiones,
ya que se tratara de crear un Banner (anuncio publicitario que la mayora de las pginas
Webquevisitasdiariamenteloposeen).

Parareduciroagrandarlasdimensionesdelescenario,bastarquecoloqueselpunterodel
mouseenlasorillasdelmismo,yenelmomentoenquelaaparienciadelmousecambie
(dos puntas de flecha) arrastra con clic sostenido el mouse y as podrs modificar las
dimensionesdelescenario.

http://profmontielv6.blogspot.mx/2016/10/sesion9deword2013paginaweb.html

1/14

19/10/2016

TutorialesdiversosProf.CarlosMontielVocacional6,I.P.N.:Sesin#9DeWord2013apginaWeb...

El cono encuadrar la vista te permite mover todo el escenario y colocarlo donde t lo

desees.

Para insertar una imagen en el escenario, elige la subopcin: image (.bmp, .gif, .jpg,
.png,.tif,.pcx),delaopcinImportardelmenFile,talcomosemuestra:

Enseguidadefinimoslaimagenainsertar,enestecasoser:logoIPN.jpg,mostrndose
comosigue:

Con la herramienta Select/move shapes (Seleccionar/mover imgenes) mueve la

imagenycolcalaenlaparteizquierdadelescenario,talcomosemostrarriba.
Ahora, procedemos a reducir la imagen. Hacemos clic en la herramienta: Transforms:
Scale, Rotate, Flip, Slant, Squish, Perspective (Transformar: Escala, Rotar, Dar la
vuelta, Inclinar, Chapotear, Perspectiva), debiendo aparecer pequeos cuadros en el
permetrodelaimagen,loscualespermitirnreduciroagrandarlaimagen:

Ahora, le asociamos a esta imagen un efecto de animacin, para ello elige la opcin
Motion Script (Guion de movimiento) del Men Effects (Efectos), y enseguida
localiza el efecto Motion Path 1 (Trayectoria de movimiento 1), y del men de arriba
(panel derecho), cambia el valor de Speed por very slow y el de Loop por yes, y
despusoprimeelbotnOK,observalasiguienteimagen:

http://profmontielv6.blogspot.mx/2016/10/sesion9deword2013paginaweb.html

2/14

19/10/2016

TutorialesdiversosProf.CarlosMontielVocacional6,I.P.N.:Sesin#9DeWord2013apginaWeb...

Ahoraprocedemosalmanejodeltexto.HacemosclicenlaherramientaAdd regular or
dynamic text (Agregar texto regular o dinmico), cambiando la apariencia del apuntador
delmouse,yenseguidahacemosclicencualquierlugardelescenario,debiendoaparecer
la ventana de Text and Font (Texto y Font), donde tecleamos: Instituto Politcnico
Nacional,contamaodeletrade50pixeles,tipodeletraCenturyGothic y color Rojo:
48,Verde:0yAzul:0, con la herramienta Fill with solid color, gradient, or image en
laventanaShapeFillyalfinaloprimelateclaOK:

Ahora,leasociamosaestetextounefectodeanimacin,paraelloeligelaopcinMotion
Script (Guion de movimiento) del Men Effects (Efectos), y enseguida localiza el
efecto Spiral in (Espiral en), y del men de arriba (panel derecho), cambia el valor de
SpeedporveryslowyeldeLoopporyes,ydespusoprimeelbotnOK, observa
lasiguienteimagen:

http://profmontielv6.blogspot.mx/2016/10/sesion9deword2013paginaweb.html

3/14

19/10/2016

TutorialesdiversosProf.CarlosMontielVocacional6,I.P.N.:Sesin#9DeWord2013apginaWeb...

Seguimosaadiendotexto,ahoratecleamosnuestronombre,enmicasoes:prof. Carlos
montiel rentera, con tamao de letra de 20 pixeles, tipo de letra Century Gothic y
colorRojo:48,Verde:0yAzul:0,conlaherramientaFillwithsolidcolor,gradient,or
imageenlaventanaShapeFillyalfinaloprimelateclaOK.
Asimismo, le asociamos un efecto de animacin, para ello elige la opcin Motion
Script (Guion de movimiento) del Men Effects (Efectos), y enseguida localiza el
efecto Shapes (sombras), y del men de arriba (panel derecho), cambia el valor de
SpeedporveryslowyeldeLoopporyes,ydespusoprimeelbotnOK, observa
lasiguienteimagen:

Para continuar, ahora agregaremos dos botones preestablecidos, para ello escoge la
opcin:InsertfromAnimationLibraries(InsertardesdelaBibliotecadeAnimacin)del
men: File (Archivo) y elige Buttons (Botones), enseguida en el panel de la izquierda
seleccionaNavigation2(Navegacin2)yfinalmenteeligeelprimerbotndela2.Fila
yhazclicenelbotnAdd(aadir)yrepiteestasaccionesperoeligiendoel3erbotnde
la1.FiladeOdds&Ends1(retazos1).
AambosbotonescolcalosenlaparteinferiorderechadelBanner:

Finalmente, a estos botones les asociaremos acciones a ejecutar, al botn verde le

asociaremosqueactiveelsonidodeunarchivoMP3, y al botn rojo le asociaremos la
accindedetenerelsonidoMP3,algomuyparecidoalplayystop de un reproductor
desonido.

Botnverde.Loseleccionamos,damosclicderechoydelmencontextualqueaparece
elegimos la opcin: Edit button Actions/Sound, debiendo de aparecer la ventana:
ButtonActionsandSounds(botonesdeaccinysonidos),enlacualelegimoslaltima
pestaa: Down Sound (sonidos abajo) y hacemos clic sobre el cono: Select sound
(seleccionasonido)queesunapequeacarpetaamarilla,yespecificaelarchivoMP3,en
micasoempleoelarchivo:MagicStick.mp3:
http://profmontielv6.blogspot.mx/2016/10/sesion9deword2013paginaweb.html

4/14

19/10/2016

TutorialesdiversosProf.CarlosMontielVocacional6,I.P.N.:Sesin#9DeWord2013apginaWeb...

Ycerramoslaventana.
Botnrojo.Igual,loseleccionamos,damosclicderechoydelmencontextualelegimos
la opcin: Edit button Actions/Sound, debiendo de aparecer la ventana: Button
Actions and Sounds (botones de accin y sonidos), en la cual elegimos la primera
pestaa: Actions (acciones) en la cual hacemos clic sobre la cruz verde, debiendo de
aparecer un men, donde elegimos la opcin: Stop Sounds (Detener Sonidos) y
finalmenteenlaltimaventanasoloactivalaopcinPress(prensauoprimir)yhacemos
clicenelbotnOK:

Hemos terminado, ahora para poder revisar que lo que se ha hecho esta correcto,
empleamos la opcin: Play in Web Browser (ejecutar en un navegador Web) del men
Play(Ejecutar),estaopcinnospermiteevaluarlaanimacinflashenambienteWeb:

Paraterminarestepaso#1,solobastaexportarnuestrodiseoenunaAnimacinFlashy
paraelloelegimoslasubopcin:AsSWF(FlashMovie)(ComoSWF,pelculaFlash)de
laopcin:Export/PublishMovie(Exportar/PublicarPelcula)delmenFile(Archivo):

http://profmontielv6.blogspot.mx/2016/10/sesion9deword2013paginaweb.html

5/14

19/10/2016

TutorialesdiversosProf.CarlosMontielVocacional6,I.P.N.:Sesin#9DeWord2013apginaWeb...

Yhemosterminadoelpaso#1.
Paso 2. Creacin del Documento Base. A manera de agilizar este menjurje, teclea la
siguienteinformacinenundocumentonuevo,apartirdelsegundorengln:
TemaWordcomoherramientavaliosaparalassecretarias(os)
TemaI
=rand
[ndice]
TemaII
=rand
[ndice]
TemaIII
=rand
[ndice]
TemaIV
=rand
[ndice]
Conclusiones
=rand
[ndice]

Ahora,insertaremoslaanimacinFlashquehemoscreado.Paraellohazclicen
el primer rengln (te ped que dejaras este rengln en blanco) y de la Ficha
Desarrollador emplearemos del grupo Controles el ltimo cono llamado:
Herramientasheredadas,alhacerclicdeberdeaparecerunpequeomen,
delcualelegimoselltimocono:Mscontrolesdebiendoaparecerlaventana:
Ms controles, enseguida oprime la tecla S y deber de posicionarse en la
opcin: ShockWave Flash Object, y precisamente sta es la opcin a elegir,
entonces simplemente haz clic en el botn Aceptar, tal como se aprecia
enseguida:

http://profmontielv6.blogspot.mx/2016/10/sesion9deword2013paginaweb.html

6/14

19/10/2016

TutorialesdiversosProf.CarlosMontielVocacional6,I.P.N.:Sesin#9DeWord2013apginaWeb...

Despus,observamosqueWordinsertaunrectngulo,precisamenteparaalojara
laanimacinFlash:

Enseguida,ledamoslasproporcionesrequeridasparacolocarlaanimacinFlash:

Ahora, debemos especificar el nombre de la animacin Flash en la ventana de

Propiedades en la opcin: Movie, de la Ficha Desarrollador, tal como se
muestraenseguida:

http://profmontielv6.blogspot.mx/2016/10/sesion9deword2013paginaweb.html

7/14

19/10/2016

TutorialesdiversosProf.CarlosMontielVocacional6,I.P.N.:Sesin#9DeWord2013apginaWeb...

Ycerramoslaventana.Parapoderobservarlaanimacin,debemosguardarel
presentedocumentoenlamismacarpetadondeseencuentralaanimacin
Flash, cerrar el documento y volver a abrirlo, entonces ya podremos observar la
animacin:

A manera de verificacin, haz clic al botn verde el cual habilita la msica, y ya

sabes,sideseasdetenerlamsica,entonceshazclicalbotnrojo.

Paso 3. Establecer marcas para realizar hipervnculos dentro del mismo

documento.LasiguienteaccinesaadirHipervnculosyMarcas,mediante
loscomandosdelgrupoVnculosdelaFichaInsertar,asquecolcateenel
siguienterenglndelTtulo.TemaWordcomoherramienta.(Debajodeste)y
eligeelcomandoMarcadordelgrupoVnculosdelaFichaInsertar"yenla
ventanaqueaparecertecleaelnombredelmarcador,queenestecasoesM1y
darclicalbotnAgregarylisto,talcomosemuestraenseguida:

http://profmontielv6.blogspot.mx/2016/10/sesion9deword2013paginaweb.html

8/14

19/10/2016

TutorialesdiversosProf.CarlosMontielVocacional6,I.P.N.:Sesin#9DeWord2013apginaWeb...

Ahora, estableceremos los Hipervnculos. A todos los textos: [ndice] les

asociaremoselHipervnculo,elcualpermitirquenostraslademosalmarcadorM1 (que
se encuentra dentro del mismo documento), as que selecciona el primer texto [ndice] y
ya seleccionado, elige el comando Hipervnculo del grupo Vnculos de la Ficha
Insertar:

Como estars observando, se debe elegir del panel de la izquierda la opcin Lugar de
estedocumentoyenseguida,elegirelmarcadorM1 y listo, solo basta hacer clic en el
botnAceptar.Eldocumentosevercomosigue:

Repite estas mismas acciones para todos los textos: [ndice] restantes. Debers de
tenerlosiguiente:

http://profmontielv6.blogspot.mx/2016/10/sesion9deword2013paginaweb.html

9/14

19/10/2016

TutorialesdiversosProf.CarlosMontielVocacional6,I.P.N.:Sesin#9DeWord2013apginaWeb...

Ahora,comosiguienteaccin,vamosaasociarelestiloTtulo1delgrupoEstilosdela
Ficha Inicio a todos los subttulos de nuestro documento (Tema I, Tema II,
Conclusiones).Paraellobastaconseleccionaracadaunodestos(obvioconlatecla
Ctrloprimida)yelegirelestiloTtulo1,debiendoaparecercomosigue:

Creando la Tabla de Contenidos. En estas condiciones podemos crear la tabla de

contenidos, primero asegrate colocar el puntero del mouse haciendo clic abajo del ttulo
principal, y enseguida haz clic en el comando Tabla de contenido de la Ficha
Referencias,eligiendolaopcin:Tablaautomtica1,dndonoselsiguienteresultado:

Comopodrsobservar,latabladecontenidosgenerada,nospresentaenlapginanmero
1 todos los subttulos mencionados, y pues es el momento de agregar el texto que
correspondeacadasubtitulo,peroparafinesprcticosemplearemoslafuncin=rand(n)
http://profmontielv6.blogspot.mx/2016/10/sesion9deword2013paginaweb.html

10/14

19/10/2016

TutorialesdiversosProf.CarlosMontielVocacional6,I.P.N.:Sesin#9DeWord2013apginaWeb...

para crear de manera automtica n prrafos para dicho fin, as que para el primer
subttulo: Tema I, a su siguiente rengln lo a completamos de la siguiente manera:
=rand(12), es decir solo agrgale: (12) y NO DES ENTER, y as a los dems de igual
manera, excepto el subttulo Conclusiones solo 4 prrafos, tal como se muestra
enseguida:

Ahora, colcate al final de cada uno de los renglones que contiene la funcin RAND y
oprime la tecla Enter y automticamente generar los prrafos definidos, tal como se
apreciaenseguida:

Debemos actualizar la tabla de contenidos para que refleje correctamente la posicin de

los subttulos, para ello selecciona la Tabla de contenidos y en la parte superior
izquierdadelamismaapareceunacejilla:Actualizartablahazclicenella:

http://profmontielv6.blogspot.mx/2016/10/sesion9deword2013paginaweb.html

11/14

19/10/2016

TutorialesdiversosProf.CarlosMontielVocacional6,I.P.N.:Sesin#9DeWord2013apginaWeb...

Para completar el documento insertamos el nmero de pgina, empleando el comando

NmerodepginadelaFichaInsertaralfinaldepgina.

Paso 4. Convertir el documento base a una Pgina Web. Procedemos a guardar

nuestrodocumentoconelnombredeDocumentoBase,enseguidavolvemosaguardarlo
con la opcin Guardar como y en este paso empleamos el tipo del archivo como:
Pgina Web (*.htm, *.html), definiendo otro nombre al archivo: pagWeb Word.html,
ascomotambindefinimoslacontraseacontraescritura,talcomoseparecaenseguida:

Finalmente,WordnospresentaeldocumentoyaconvertidoenpginaWeb,comosigue:

Sin embargo, si quisiramos revisar la pgina Web recin creada (pagWeb w2013.htm)
fuera de Word, la animacin no se presenta, es decir est ausente, entonces para obligar
alnavegadorapresentardichaanimacinflash,empleamoslasiguienteetiqueta:
<EMBEDSRC=BANNER.FLASHWIDTH=1000HEIGHT=70>
http://profmontielv6.blogspot.mx/2016/10/sesion9deword2013paginaweb.html

12/14

19/10/2016

TutorialesdiversosProf.CarlosMontielVocacional6,I.P.N.:Sesin#9DeWord2013apginaWeb...

ParaelloeditamoselarchivopagWebW2013.htmconlaherramientaBlocdeNotas y
hacemoslabsquedadeltexto:herramienta,quenospermitesituarnosantesdestee
insertarlaetiquetamencionada,talcomoseobservaenseguida:
Antes:

Despus:

Ahoras,elnavegadornospresentalaanimacin:

Hemosterminado,esperoquetodoestemenjurjelesseadeutilidad,hastapronto

PublicadasporCarlosMontielala/s05:43
+1 Recomendar esto en Google

Nohaycomentarios.:
http://profmontielv6.blogspot.mx/2016/10/sesion9deword2013paginaweb.html

13/14

19/10/2016

TutorialesdiversosProf.CarlosMontielVocacional6,I.P.N.:Sesin#9DeWord2013apginaWeb...

Publicaruncomentario
Escribeuncomentario...

Comentarcomo:

Publicar

Seleccionarperfil...

Vistaprevia

PginaPrincipal

Entradaantigua

Suscribirsea:Comentariosdelaentrada(Atom)

PlantillaEthereal.TecnologadeBlogger.

http://profmontielv6.blogspot.mx/2016/10/sesion9deword2013paginaweb.html

14/14