tutorial html workshop 2014.pdf

8/17/2019 tutorial html workshop 2014.pdf

1/15

Prof. Vargas Bonilla Robert.

Creando ayuda para los programas desarrollados

CREANDO AYUDAS HTML (ARCHIVOS CHM)

Mediante este tutorial se creará archivos de ayuda CHM de tipo HTML, para esto se utilizará

el programa HTML Help WorkShop de Microsoft para crear los archivos CHM compilados yse usará dreamweaver y css para crear los archivos HTML.

Nota: Los archivos a crear y los gráficos utilizados deber estar en la misma carpeta.Paso 1: debemos tener en consideración lo siguiente: Según el diagrama vamos a utilizarel css y html para maquetar y estructurar las páginas y, luego utilizar el programa HTMLHelp WorkShop. Estructura siguientes

Paso 2. Después de crear las páginas, es momento de utilizar el programa siguiente:1. Utilizando el programa HTML Help WorkShop

Ingrese al programa HTML Help WorkShop, haga clic botón Inicio / Programas /HTML Help WorkShop / HTML Help WorkShop:

2. Proceda a crear el archivo de proyecto (*.hhp) elija el menú File / New y seleccionela opción Project y clic en el botón Ok

CSS Para maquetar

XHTML Estructura de

la página

HTML Word

SHOPPara Compilar


2/15


3. En la siguiente figura nos da la Bienvenida y, nos indica si desea convertir una archivode ayuda HLP (antiguo) a CHM (nuevo), para este caso NO active la casilla porque nodeseamos convertir ningún archivo HLP a CHM, haga clic en el botón Siguiente paracontinuar:

4.

En la siguiente figura nos permite seleccionar el destino del archivo HHP (archivo de proyecto) a crear, haga clic en el botón BROWSE

5. Seleccione la carpeta donde desea guardar el archivo (seleccione la carpeta dondeguardó los archivos HTML creados) y escriba el nombre de Ayuda y luego haga clic enAbrir.


3/15


Y a continuación clic en Siguiente.

6. Ahora tenemos la posibilidad de incluir archivos de contenido (*.HHC), archivos de

índice (*.HHK) y archivos html (*.HTM) para este caso Marcamos HTML Files(.htm) y haga clic en el botón Siguiente y luego Finalizar.

En este cuadro, agregar los

archivos utilizados en el diseño

(.html, .jpg, .css, .gif, etc)

Para agregar hacer clic en ADD

luego buscar la carpeta de los

archivos para agregar.

Luego hacemos clic en siguiente.


4/15


7. Al finalizar se mostrará la siguiente pantalla:

Ventana del programa HTML Help WorkShop con el proyecto Ayuda creado.

Paso 3: Agregando ventana de definiciones:

1. Haga clic en el botón Add/Modif. Windows definitions. Luego ingrese el nombre para nuestra ventana: Ayuda

2. Luego en la ficha General, ingrese el texto para la barra de título (Title bar text):Ayuda del Sistema.Luego deberá hacer clic en Aceptar


5/15


3. Así también en la ficha buttons, marque las casillas de verificación necesarias,ver figura de abajo

Luego de efectuado lo anterior haga clic en la ficha Navigator Pane y marque lascasillas de verificación como se ve en la figura y luego Aceptar:

4. En el caso que apareciera la figura de abajo, deberá asignarle en Windows Type:

Ayuda, luego haga clic en Siguiente


6/15


Paso 4: Creando el archivo tabla contenidoHaga clic en la ficha Contents, seleccione Create a new contents file:

Ahora en ésta ventana marque lasdos casillas de verificación y luego

haga clic en siguiente y porúltimo clic en F na za

Guárdelo en la carpetadonde guardó los archivos

HTML, etc con el nombre deCon en do


7/15


Paso 5: Cambiando las propiedades de la tabla contenido:

Haga clic en el botón Contents properties y desactive la casilla de verificación Usefolders instead of books (Use fólder en lugar de libros) y luego clic en Aceptar

Paso 6: Insertando Páginas y encabezados en la tabla contenido:

Insertando Páginas: haga clic en para insertar una página y escriba Acerca de enel cuadro de texto Entry title

Hacer clic en el Botón ADD


8/15


En la ficha contents haga clic en el botón lnsert a heading, y escriba Contenidoen el cuadro de texto Entry title, luego haga clic botón Aceptar:

Se habrá creado una páginay encabezado como se ve

en la f gura.

Si no ha agregado los archivos, Hacer

clic en el botón Browse y buscar el

Archivo.

Luego clic en el botón aceptar

Caso contrario seleccionar el archivoIndex.html, luego hacer clic en el botón

OK, en la próxima ventana le damos clic

en el botón aceptar


9/15


Paso 7: Insertando páginas en la tabla de contenidos:

Haga clic en el botón lnsert a page, se mostrara el siguiente mensaje, (Ustedquiere insertar esta entrada al principio de la Tabla de contenido), elija No

Ahora escriba Ingreso en el cuadro de

texto Entry title, luego haga clic en el

botón Add (para seleccionar el archivo

que vincula a esta pág na

Seleccione el arch vo quecorresponda (ingreso.htm) y luegohaga c c en OK, y luego en Aceptar


10/15


Observación:Ahora se deberá agregar un encabezado llamado Actualización y agregarle tres páginasllamadas: Clientes (vinculado al archivo ActClientes.htm), Empleados (archivoActEmpleados.htm) y Artículos (archivo ActArtículos.htm), utilice los botones Move

Selecction para Avanzar o Retroceder un Nivel ( , , , ). Al finalizar la mismadeberá quedar como se ve a continuación:

Para terminar con la tabla de contenido proceda a indicar el archivo correspondiente al

proyecto. Nos vamos a la Ficha Project, Para ello haga clic en el botón Add/Modif.Windows definitions. Luego haga clic en la ficha Files y seleccione en TOC: Contenido.hhc

Haga clic en el botón Save All file del Menú File, Esto para guardar los cambiosrealizados.

El resultado de la Tabla de

contenido será el que se ve

en la figura super or


11/15


12/15


Resultado de la ayuda HTML creada Cierre la ventana del archivo de ayuda creada

Paso 10: Creando el archivo de Índice.Haga clic en la ficha Index, seleccione Create a new index file


13/15


Paso 11: Creando las Palabras claves

Haga clic en el botón Insert a keyword y escriba Acerca de en el cuadro de textoKeyword, luego haga clic en el botón Add, para relacionar la palabra clave con el archivoque contiene dicha información (archivo index.html):

Vuelva hacer clic en el botón Insert a keyword, y se mostrará el siguiente mensaje,(Usted quiere insertar esta entrada al principio del índice), elija No

Ahora escriba Ingreso en el cuadro de texto Keyword y relacione esta palabra conel archivo Ingreso.html

Guárdelo en la carpeta

donde guardo los archivosHTML, etc con el nombrede Ind ce


14/15


Inserte otra Palabra clave (keyword) llamada Menú para el archivo Menu.html y otra

reporte para el archivo reporte.html

Ahora nos vamos a la ficha Project, Para terminar con las palabras claves proceda a indicar el

archivo correspondiente al proyecto para ello haga clic en Add/Modif. Windowsdefinitions. Luego haga clic en la ficha Files y seleccione en Index : Indice.hhk


15/15

Prof Vargas Bonilla Robert

Según el diseño de la ayuda deberá agregar más palabras claves para su sistema de ayuda.Guarde su proyecto y luego proceda a compilar el mismo, observará que se habrá agregadola ficha Índice a su ayuda.

EJECUTAR DESDE VISUAL BASIC .NET

Para ello deberá abrir su proyecto en Visual Basic .NETA) Asignando ayuda al Formulario principal

Agregar el siguiente código para ejecutar

System.Diagnostics.Process.Start("D:\Ayuda.chm")

B) Asociando la palabra clave de la ayuda con un control Abra el formulario ingreso Agregue un componente HelpProvider al formulario. Luego proceda a establecer las siguientes propiedades a c/u de los objetos

Objeto Propiedad Valor Asignado

Form

MaximizeBox FalseMinimizeBox False

HelpButton TrueHelpKeyword IngresoHelpNavigator KeywordIndexHelpString Ingreso

HelpProvider HelpNamespace D:\Ayuda.chm (usted deberá cambiar laruta )

Ejecute su aplicación y cada vez que muestre el formulario de ingreso y presione F1 se mostrará la ayuda del sistema, pero irá directamente el temacorrespondiente.

tutorial html workshop 2014.pdf

Documents

Transcript of tutorial html workshop 2014.pdf