Tutorial para la Creación de Páginas Web con el uso de MS Word (cont)

Transcripción

1 UNIVERSIDAD INTERAMERICANA DE PR CENTRO DE ESTUDIOS GRADUADOS PROGRAMA GRADUADO DE ADMINISTRACIÓN COMERCIAL RECINTO DE SAN GERMÁN Regresar a la Página Principal Tutorial para la Creación de Páginas Web con el uso de MS Word (cont) Contenido Parte II - Construcción Cargar Word Creación Web Site Creación Título y Localización Creación Navegación Agregar Páginas Organizar Páginas Incluir Visual Theme Cambio Nombres de los Enlaces o "Links" Creación Página Principal (pag-01) HTML Creación Página Datos Personales (pag-02) Creación Página Experiencia (pag-03) Creación Página Aficiones (pag-04) Creación Página Foto Personal (pag-05) Página Principal - Diseño Final Prueba y Terminación Recursos Electrónicos (URLs) Regresar a Contenido ( Parte I) Page 1

2 Cargar Word El primer paso es cargar el programa Word. Esto se hace oprimiendo el "mouse" en el icono en la pantalla principal de Windows o "desktop". Otra forma es activándolo a través de la barra de tareas o "task bar". La Figura 7 muestra la pantalla principal de Word. Si no aparece directamente selecciona en el Menú: File/New. Fig. 7. Pantalla Principal Word Page 2

3 Esta pantalla resulta cuando se usa la versión de Microsoft Word 2002 SP-2. Si estás usando una diferente, deberás buscar el Wizard o intentar hacer la página definiendo páginas individuales y sin uso de un "template" y de un "frame". Regresar a Contenido Parte II Creación Web Site Estando en la pantalla principal como se muestra en la Figura 7 arriba, seleccionas en el panel de la derecha "Web Page Wizard" en la sección de "New from template". La Figura 8 muestra esta pantalla. Page 3

4 Fig. 8. Wizard El flujograma de la derecha indica los pasos a seguir. Para esto se va oprimiendo el botón de "Next >" una vez se incluya la información solicitada. Regresar a Contenido Parte II Creación Título y Localización Page 4

5 Como se muestra en la Figura 9, estás en la Sección de Título y Localización (Flecha 1). Allí deberás entrar el Título de la Página el cual será el mismo que aparecerá en el Menú o Contenido, al lado izquierdo de la página web. Escribe entonces "Mi Página Personal" como se indica en (2). Figura 9. Título y Localización A continuación debes entrar la localización donde va a quedar el folder con la página, o "Web Site", junto con el nombre de éste. Si no te acuerdas del nombre exacto y del "path", puedes usar el botón de "Browse..." (3) para localizarlo. Page 5

6 Para este ejemplo se definió lo indicado en (4). Tu entrarás allí la dirección y nombre que corresponda. Puedes inclusive, dentro de la 'ventana de "Browse...", crear primero el folder si aún no lo haz hecho. Para continuar, oprimes "Next >" (5). Regresar a Contenido Parte II Creación Navegación Como se inndica en la Figura 10, el siguiente paso es decidir la estrategia de navegación, ver (1), para la página web. Para esto seleccionamos un "Vertical Frame" (2). Page 6

7 Para continuar, oprimes "Next >" (3). Regresar a Contenido Parte II Figura 10. Navegación Agregar Páginas El siguiente paso es agregar las páginas restantes a las ya creadas automáticamente como Page 7

8 se indica en (1) de la Figura 9. Según nuestro diseño, o "storyboard", son en total 5 secciones o páginas y por tanto archivos, así que creamos las que faltan oprimiendo el botón de "Add New Blank Page" (2). Verifica que quede como se muestra en (3). Para continuar, oprimes "Next >" (4). Regresar a Contenido Parte II Figura 11. Agregar Páginas Page 8

9 Organizar Páginas En el siguiente paso, Organizar Páginas, ver (1) en Figura 12, puedes cambiar el orden de las páginas con los botones de "Move Up" y "Move Down" (2) y cambiar los nombres con "Rename" (3). Al hacer esto último se abre una ventana como se muestra en (4), Figura 12. Figura 12. Organizar Páginas Cambia los nombres para que queden según nuestro diseño, o sea: Page 9

10 Personal Web Page a pag-01 (corresponde a Página Personal Luis M. Zornosa) Blank Page 1 a pag-02 (Datos Personales LMZ) Blank Page 2 a pag-03 (Experiencia LMZ) Blank Page 3 a pag-04 (Aficiones LMZ) Blank Page 4 a pag-05 (Foto LMZ) Al finalizar te debe quedar como se muestra en la Figura 13. Para continuar, oprimes "Next >" (3). Figura 13. Nombres Páginas Page 10

11 Regresar a Contenido Parte II Incluir Visual Theme Esta parte puede ser opcional y permite incluir un "background" como se muestra en la Figura 14. Figura 14. Visual Theme Page 11

12 En este caso seleccionamos "Straight Edge". A continuación oprimes "Next >" o "Finish" para terminar y se crea todo el esquema o estructura de la página web. La pantalla que aparece es similar a la que se muestra en la Figura 15 a continuación. Obseva que los nombres de los enlaces en el Menú del lado izquierdo tienen los nombres de los archivos físicos, de acuerdo con nuestro "storyboard". Regresar a Contenido Parte II Figura 15. Esquema de Mi Página Personal Page 12

13 Cambio Nombres de los Enlaces o "Links" Como se muestra en la Figura 16 se cambian a los nombres que aparecen allí y que corresponden a: pag-01 a Página Principal pag-02 a Datos Personales pag-03 a Experiencia pag-04 a Aficiones pag-05 a Foto Page 13

14 Figura 16. Cambio Nombres de los Enlacez ("Links") Para terminar debes salvar o guardar los últimos cambios con la opción de File/Save u oprimiendo el botón respectivo (ícono de diskette). A partir de este momento deberás guardar tu trabajo periodiamente para evitar que se pierdan los últimos cambios si hay alguna falla o interrupción anormal del programa. Un último paso es cerrar el archivo (File/Close). Regresar a Contenido Parte II Page 14

15 Creación Página Principal (pag-01) Para comenzar abrimos el archivo pag-01 con File/Open o el ícono de "Folder Abierto". Estamos entonces listos para su diseño. Es muy fácil y si usted antes ha trabajado con un procesador de palabra como Word es lo mismo que trabajar un documento. La diferencia aquí es que está en formato de Web Page y no de documento de Word. Familiarísese primero un poco con las funciones del menú y/o los botones del toolbar. Use como guía la Figura 2 de la Parte I y diseñe esa página de forma igual. Borre primero todo el texto inicial que el Wizard incluye como guía y nos dejamos llevar mejor por nuestro diseño o "storyboard". Seleccione los diferentes tamaños de letras (fonts) y colores que sean necesarios. Para crear las líneas, ver (4) por ejemplo, use el "Toolbar" de "Drawing" que usualmente aparece en la parte inferior de la pantalla. Use la opción en el Menú de "Format/Bullets and Numbering..." la lista de elementos. Si es el caso, modifica las indentaciones para los "bullets". Los enlaces, como se indican en (2), los construyes marcando el texto y oprimiendo el ícono de "Hyperlinks" (Mundo con un eslabón de cadena). Lo mismo aplica también para la dirección de correo (3). Cuando se oprime ese ícono, se abre una ventana y allí hacemos click en pag-02, 03, etc., según corresponda. Asegúrese que esté activo el primer botón de la parte superior izquierda y que se denomina "Existing File or Web Page". Al regresar a la página observarás un cambio de color en el texto marcado y además, aparece subrayado. Esto indica que es un enlace o "link". Salva o guarda (Save) el documento. La apariencia final debe ser como se muestra en la Figura 17 a continuación. Page 15

16 Figura 17. pag-01 / Página Principal Recuerda que un punto importante es que se debe guardar el trabajo periódicamente y evitar perderlo si ocurre cualquier falla o problema. Esto se hace con la opción de File/Save u oprimiendo el botón correspondiente en el toolbar (tercero a la izquierda y representado por un diskette). En cualquier momento podemos ver la apariencia final de nuestra página usando en el menú principal las opción de File/Web Page Preview. Házlo para que observes cómo está quedando tu trabajo. En este caso, Word usa Explorer para el "preview". Page 16

17 Regresar a Contenido Parte II HTML Otra parte interesante ocurre cuando seleccionas en el menú la opción de View/ HTML Source. Al hacerlo, podemos ver el archivo base de nuestra página con todos los códigos de HTML y los textos, referencias a las gráficas y demás definiciones. Vea la Figura 18 a continuación. Se sorprende? Sin usted notarlo se ha usted convertido en un programador de HTML. Page 17

18 Figura 18. HTML Source Program HTML o HyperText Markup Language es el lenguaje de programación usado para las páginas del Web. Este lenguaje funciona de la misma forma como hace el trabajo un editor de texto de una revista cuando está preparando algún artículo para ser publicado. Dicho editor, a medida que lee el texto, va insertando una serie de marcas que indican cómo debe ser la apariencia final. HTML funciona igual. Son códigos que se van insertando al documento para que el programa que lo accede, sepa exactamente como se debe desplegar en la pantalla. Estos programas se llaman "browsers" o navegadores. Ejemplos de ellos son Explorer y Netscape. Los códigos en un principio había que insertarlos manualmente. Con programas tan avanzados como ForntPage esto ya no es necesario puesto que usan lo que se denomina una interface gráfica en donde todo se hace de manera gráfica, como usted está diseñando su página, y el programa automaticamente inserta los códigos en la parte posterior de la computadora o "background". Los códigos de HTML usualmente van en parejas y dentro de los símbolos < > y </ >. Por ejemplo para indicar que el texto a continuación es un párrafo se usa <p>... y </p> para indicar donde termina. Siempre el primer códico es <html> para indicar al navegador que es un documento del web. El último es </html>. Los dos siguientes dentro del anterior son <header>... </header> y <body>... </body>. Trate de identificarlos en la página que está construyendo. Abra uno de sus archivos o páginas y observe los códigos de HTML. Identifique algunos de ellos. Por ejemplo texto subrayado o underlined, sombreado o bold, linea horizontal, lista de elementos no numerados (bulleted), lista numerada, insertar grafica, título con su font, tamaño, color, centrado, etc. Identíficó algunos de ellos? Sorprendentemente, usted fué el que los codificó! Para terminar, cierra el archivo (File/Close). Regresar a Contenido Parte II Creación Página Datos Personales (pag-02) Ahora abrimos pag-02 y lo diseñamos según aparece en las Figura 3. Aquí tenemos que insertar una tabla de 2 columnas y 4 filas. Identifique el botón de tablas e indique el número de filas y columnas o use la opción de Table/Insert/Table. Si coloca el cursor en el lado izquierdo podrá "anclar"o agarrar el borde de la tabla oprimiendo el Page 18

19 mouse, y mateniéndolo oprimido. De esta manera puede reducir su ancho para que se vea mejor. Para centrar la tabla y darle un color de background observe como se indica en la Figura 20. Debe colocar el cursor sobre cualquier sitio de la tabla y seleccionar en el menú Table/Select/Table y luego Table/Properties/Tables. Con esta acción se abre una ventana donde se puede cambiar el Alignment a Center (primera ventana) y el color del background a amarillo (última ventana). Otra forma de hacer lo mismo es oprimiendo el botón derecho del mouse y seleccionando Page Properties. Para insertar en Teléfonos otra Tabla, coloque allí el cursor e insértela de la misma forma que la tabla mayor anterior. Defina dos filas, dos columnas y background azul claro.vea las Figuras 19 y 20 para mejor ilustración. Page 19

20 Figura 19. pag-02 / Datos Personales. Propiedades Tabla. Page 20

21 Figura 20. pag-02 / Datos Personales. Propiedades Tabla, color. Debes crear además un enlace o "link" para regresar a la página principal, o pag-01. Primero marcamos la palabra Regresar y oprimimos el botón de enlaces (icono de un Mundo con un clip, parte superior hacia la izquierda). Procedes de igual manera como se explicó para la Página Principal. En este casos seleccionas pag-01 para el enlace. Asegúrate que esté activo el botón de "Existing File or Web Page". La apariencia final de esta página es como se muestra a continuación en la Figura 21. Verifica que luzca igual. Page 21

22 Regresar a Contenido Parte II Figura 21. pag-02 / Datos Personales. Diseño Final Creación Página Experiencia (pag-03) Esta página es muy similar a pag-02 y con lo que has aprendido ya puedes hacerla facilmente incluyendo las tablas y enlaces. Recuerda de salvarla (Save) constantemente. Asegúrate que quede como se muestra en la Figura 22. Page 22

23 Figura 22. pag-03 / Experiencia Regresar a Contenido Parte II Creación Página Aficiones (pag-04) Esta página es muy similar a pag-2 y pag-03. Procede a hacerla y asegúrate que su apariencia sea similar a la mostrada en la Figura 23. Page 23

24 Figura 23. pag-04 / Aficiones Regresar a Contenido Parte II Creación Página Foto Personal (pag-05) Para la creación de esta página debes de antemano tener la foto en formato compatible con el web (.jpg o.gif) y colocarla en el archivo "graficas" de este web site. La foto tu puedes "escanearla" y con un programa de edición como Adobe Photoshop pasarla al Page 24

25 formato indicado. Otra manera es bajarla de la red. En general para bajar cualquier foto, gráfica, icono, etc. del web debes simplemente oprimir el "mouse" sobre esta. Allí se abre una ventana y seleccionas la opción de "Save Picture as... " como se indica en la Figura 24. De inmediato se abre una ventana para indicar donde deseas guardarla. En este caso es: C:/badm5060-Webpage-Tut-Word/graficas. Figura 24. pag-05 / Captura Foto La apariencia final de esta página es como se muestra en la Figura 25. Page 25

26 Figura 25. pag-05 / Foto Regresar a Contenido Parte II Página Principal - Diseño Final La apariencia final de esta página es como se muestra en la Figura 26 a continuación. Page 26

27 Regresar a Contenido Parte II Figura 26. pag-01 / Página Principal - Diseño Final Prueba y Terminación Para finalizar es conveniente que verifiques la apariencia final de tu página web. Para esto haces un "Preview" de la misma. Navega a través de toda la página y asegúrate que todo está completo. Si hay necesidad de correcciones o modificaciones, procede con ellas como Page 27

28 se mostró en este tutorial. Se supone que ya aprendiste todo lo básico al respecto. La páginas finales son como se muestra a continuación en las Figuras 27 a 31: Figura 27. pag-01 / Página Principal - Diseño Final Page 28

29 Figura 28. pag-02 / Datos Personales - Diseño Final Page 29

30 Figura 29. pag-03 / Experiencia - Diseño Final Page 30

31 Figura 30. pag-04 / Aficiones - Diseño Final Page 31

32 Figura 31. pag-05 / Foto - Diseño Final Si todo está completo y perfecto, y estás satisfecho con el trabajo, FELICITACIONES!!! por el excelente trabajo. Te acabas de graduar de Diseñador, Creador y Constructor de páginas del web. Ya con esto tienes las bases para hacer tu proyecto. Obviamente solo cubrimos los conceptos y operaciones básicas pero con los conocimientos, destrezas y habilidades adquiridas estás en condiciones de seguir aprendiendo, explorando e investigando para hacer operaciones mas complejas, lograr efectos mas elaborados e incluir elementos más sofisticados que harán que tu página tenga un aspecto más profesional. Page 32

33 Te invito a que sigas descubriendo y dominando nuevas habilidades y destrezas en esta área de tanto desarrollo y oportunidades. Recuerda, el cielo es tu límite y las únicas barreras y obstáculos son las que tu mismo te impones y que te impiden progresar y alcanzar el éxito! Luis M. Zornosa, Profesor. PD. Como un último pedido agradezco me envíes tus comentarios, observaciones y sugerencias sobre este tutorial. Tu insumo es de mucha importancia para el mejoramiento y perfeccionamiento del mismo y podrá ser mas efectivo en la ayuda y beneficio que brinde a todos los estudiantes que lo utilicen. Puedes enviarme un a: Regresar a Contenido Parte II lzornosa@sg.inter.edu Recursos Electrónicos (URLs) Tutorial de HTML Guía para desarrollo y promoción de un Portal Fonts para mejorar una página Imágenes Creación de Logos Foros y libros de visita Cuestionarios Conceptos básicos de Flash Consejos prácticos Diseños y Templates Programas gratis Nota: Estos sitios no han sido previamente verificados. Agradezco me informen si las direcciones están correctas y sus comentarios acerca de los sitios. Fuente: El Nuevo Día. Vida Digital. Miércoles, 16 de julio de Pág. 96. Page 33

34 Regresar a Contenido Parte II (Inicio Página) Regresar a Contenido (Parte I) Impresión (formato "pdf" Acrobat Reader) Regresar a la Página Principal Page 34