Site hosted by Angelfire.com: Build your free website today!

DREAMWEAVER MX

1.- Introducción

2.- Creación del sitio

2.1.- Sitio local

2.2.- Sitio remoto

3.- Creación de una página

4.- Panel de properties

5.- Configurar página (Propierties, Background, Links,text.)

6.- Creación de hipervínculos

7.- Inserción de imágenes

8.- Inserción de Interactivos

8.1. - Image

8.2. - navigation bar

8.3. - Flash botton

8.4. - Flash text

8.5.- HTML de Fireworks MX

9.- Configuración del navegador a trabajar

10.- Editar listas de navegadores

10.1. - Common (Image, Rollover, Table, Navigation bar, Horizontal rule, Date, Flash, Fireworks, Generator, Bottons, Shockwave)

10.2. - Layout

10.3. – Text, Table, Frames, Forms, Templates, Characters, Media, Heads, Script, Applications

11. – Templates

12. – Frames

12.1. – Panel frames

13. – Comportamientos, panel behaviours

13.1. – sonido (MP3, Wav, Midi)

13.2. – Video

14. – Correo electronico

15. – Base de datos (Application)

16. – Crear base de datos en access

16.1. – Concepto de base de datos

16.2. – Tabla

16.3. – Campos

16.4. – Registros

17. – Configurar sitio

17.1. – Sitio local

17.2. – Sitio remoto

17.3. – Tipos de conexión de BD

18. – Conexión a la base de datos (Recordset)

18.1. – visualizar registros

18.2. – Filtrar registro

18.3. – Recordset navigation bar

18.4. – Recordset insertion form

18.5. – Delete recordset

18.6. – Recordset update form

18.7. – Busqueda de regitro (Query and vanced)

18.8. – Master detail page set

19. - Recordset navigation status

20. – Repeat region

21. – Login confirm

22. – Restring page

23. – Redirection page.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

www.icam.com.mx

 

 

 


 

MACROMEDIA DREAMWEAVER MX

Introducción

Al final del capítulo el alumno será capaz de...

Crear un sitio local

 

Crear un sitio remoto

 

Crear una pagina nueva

 

Conocer las propiedades de un objeto

 

Aprender a configurar una pagina

 

Crear Hipervínculos

 

Insertar imágenes

 

Comprueba tu avance y marca con una P  los objetivos alcanzados

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


INTRODUCCIÓN

 

Macromedia Dreamweaver es un editor de código HTML profesional para el diseño visual y la administración de sitios y páginas Web. Tan si prefiere controlar manualmente el código HTML como si prefiere trabajar en un entorno de edición visual, Dreamweaver le permite ponerse manos a la obra rápidamente y le facilita herramientas útiles para mejorar su experiencia en diseño Web.

Las funciones de edición visual de Dreamweaver también le permiten añadir diseño y funcionalidad rápidamente sin escribir una sola línea de código. Puede ver todos los elementos o activos del sitio y arrastrarlos desde un panel fácil de usar directamente hasta un documento. Agilice su flujo de trabajo de desarrollo mediante la creación y edición de imágenes en Macromedia Fireworks y su importación directa a Dreamweaver, o bien añadiendo objetos Flash que puede crear directamente en Dreamweaver.

Dreamweaver se puede personalizar totalmente. Utilice Dreamweaver para crear sus propios objetos y comandos, modificar métodos abreviados de teclado e incluso escribir código JavaScript para ampliar las posibilidades que ofrece Dreamweaver con nuevos comportamientos, inspectores de propiedades e informes de sitios.

Administración del Sitio

Un sitio Web es un conjunto de documentos vinculados con atributos compartidos, tales como temas relacionados, un diseño similar o un objetivo común.

Macromedia Dreamweaver es una herramienta de creación y administración de sitios, por lo que puede utilizarla para crear sitios Web completos, además de documentos individuales. Para obtener resultados óptimos, diseñe y planifique el sitio Web antes de crear las páginas que va a contener el sitio.

2 Creación del sitio

Una vez que cree la estructura del sitio, deberá establecer el nuevo sitio en Dreamweaver. Establecer este sitio local en Dreamweaver significa que puede utilizar Dreamweaver con FTP para cargar el sitio en el servidor Web, para controlar y mantener automáticamente los vínculos y para compartir archivos con otras personas que colaboren con usted. Lo más adecuado es configurar el sitio local en Dreamweaver antes de comenzar a crear las páginas.


 

 

2.1 Sitio local

El sitio local es la estructura del sitio que usted establece en el equipo para que contenga todas las carpetas, activos y archivos de un sitio concreto.
La carpeta raíz local del sitio deberá ser específica de ese sitio. Una buena idea es crear una carpeta llamada Sitios y, posteriormente, crear carpetas raíz locales dentro de esa carpeta, una para cada sitio con el que trabaje.

 

2.2 SITIO REMOTO

 



El paso siguiente a la hora de configurar un sitio remoto consiste en determinar dónde se va a situar el sitio, es decir, qué servidor lo albergará. Su cliente, su empresa o su proveedor de servicios Internet (ISP) disponen probablemente de un servidor configurado para albergar páginas Web (Internet o intranet). Pregunte al administrador del sistema o a su cliente el nombre de dicho servidor y cómo se realizan las transferencias de archivos.

En particular, averigüe si se utiliza FTP para conectar con el servidor o si puede montar el servidor como una unidad de disco con acceso de red desde su escritorio. Si conecta utilizando FTP, averigüe el nombre del servidor FTP y determine el directorio del servidor, así como la información de conexión y de contraseña.

Después de crear un sitio local, use el comando Definir sitios para añadir o cambiar la información del servidor remoto asociado y las preferencias de desprotección/protección.

 

Para asociar un servidor remoto a un sitio local existente:

1 Elija Definir sitios en el menú emergente de sitios actuales de la ventana Sitio, o bien elija Site > Edit sites

2 Aparecerá un cuadro de diálogo con los sitios definidos actualmente. Seleccione un sitio existente y haga clic en Editar.

Si no dispone de sitios definidos actualmente, cree un sitio local antes de continuar.

3 En la lista Categoría de la izquierda, haga clic en Datos remotos.

4 Elija una de las siguientes opciones de Acceso al servidor:

Utilice Ninguno si no tiene previsto cargar el sitio en un servidor. A continuación, haga clic en Aceptar y omita el resto de este procedimiento.

 

Utilice Local/red si el servidor Web está montado como unidad de red (Windows) o como servidor AppleTalk o NFS (Macintosh), o si lo está ejecutando en el equipo local. Haga clic en el icono de carpeta para localizar y seleccionar la carpeta del servidor donde se almacenan los archivos. Si desea que el panel Remoto de la ventana Sitio se actualice automáticamente a medida que se añadan y borren archivos, seleccione la opción Actualizar lista archivos remotos autom. Para aumentar la velocidad de transferencia de archivos al sitio remoto, deje esta opción desactivada. Para actualizar manualmente la ventana Sitio en cualquier momento, haga clic en el botón Actualizar de dicha ventana. Haga clic en Aceptar y omita el resto de este procedimiento.

 

Utilice FTP si se  conecta con el servidor Web a través de FTP.

 

 

 

 

 

Para conectar con un servidor Web mediante FTP:

1 Introduzca el nombre del servidor FTP en el que cargará los archivos del sitio Web. El nombre del servidor FTP es el nombre completo en Internet de un sistema informático, como ftp.mindspring.com. Introduzca el nombre completo del servidor sin texto adicional. Sobre todo, no añada un nombre de protocolo delante del nombre del servidor. Por ejemplo:

Correcto: ftp.mindspring.com

Incorrecto: ftp://ftp.mindspring.com

Incorrecto: mindspring.com

 

2 Introduzca el nombre del directorio del servidor del sitio remoto donde se almacenan los documentos visibles para el público.

 

3 Introduzca el nombre de conexión y la contraseña que utiliza para conectar con el servidor FTP.

Dreamweaver guarda la contraseña de forma predeterminada. Desactive Guardar si prefiere que el sistema le solicite la contraseña cada vez que conecte con el servidor remoto.

 

4 Seleccione las opciones deseadas de cortafuegos para el sitio:

Active la opción Usar cortafuegos si conecta con el servidor remoto desde el otro lado de un cortafuegos. Para obtener más información sobre las opciones de cortafuegos.

Si su configuración de cortafuegos requiere el uso de FTP pasivo (que permite que el software local configure la conexión FTP en lugar de solicitárselo al servidor remoto), seleccione Utilizar FTP pasivo. Si no está seguro, consulte al administrador del sistema.

5Haga clic en done.

3      CREACIÓN DE UNA PÁGINA NUEVA

 

Macromedia Dreamweaver ofrece diversas formas de crear un documento. Puede crear documentos HTML nuevos y vacíos; abrir un documento HTML existente, aunque no haya sido creado con Dreamweaver; o bien crear un nuevo documento basado en una plantilla.

También puede abrir archivos de texto no HTML, como archivos JavaScript, archivos de correo electrónico de texto normal o archivos de texto guardados con procesadores de texto o editores de texto. No podrá utilizar todas las herramientas de edición de documentos de Dreamweaver en un documento de texto normal, pero sí podrá utilizar funciones básicas de edición de texto. Entre las posibles razones para abrir un documento de texto figuran editar y depurar código JavaScript, consultar el contenido del archivo de configuración de Dreamweaver o abrir un correo electrónico que contiene un fragmento de código HTML para copiar el código y pegarlo en otro documento.

 

Para crear un documento HTML vacío en una nueva ventana de documento, realice una de estas operaciones:

En la barra de de menús elija

File> new> create, se abre un cuadro de dialogo en el cual le permite escoger uno de las tantas hojas de trabajo.

Si abre la vista de Código (en la ventana de documento) o el inspector de código, podrá ver que el nuevo documento no está totalmente vacío, pues contiene etiquetas html, head y body para que pueda comenzar a trabajar. Mientras escriba en la vista de Diseño de la ventana de documento o inserte objetos tales como tablas e imágenes, podrá dejar abierto un editor de código y observar cómo se crea el código HTML. Para obtener más información sobre los editores de código.

 

 

 

 

Para abrir un archivo HTML existente, lleve a cabo una de estas operaciones:

Seleccione File > Open.

Si el archivo se ha creado con Microsoft Word, elija File > Import > Word HTML

Si elige Importar HTML de Word, Dreamweaver abre el archivo y le permite especificar opciones para eliminar código ajeno a HTML generado por Word. (Microsoft Word 97 y las versiones posteriores cuentan con el comando Guardar como HTML, que añade código HTML innecesario al convertir un documento a este formato.) Para obtener más información.

Nota: No se puede importar directamente un archivo de Microsoft Word (.doc) a Dreamweaver. Si desea importar el contenido de un archivo de Word, inicie Word y guarde el archivo como HTML antes de importar el archivo HTML resultante a Dreamweaver.

Para guardar un documento:

1 Seleccione File > save as.

 

2 Proporcione un nombre para el archivo y vaya hasta el lugar en el que desea guardar el archivo.

Nota: Dreamweaver añade automáticamente .htm (Windows) o .html (Macintosh) al nombre del archivo cuando aparece el cuadro de diálogo. (Puede controlar la extensión de archivo que debe añadirse utilizando una opción de las preferencias generales.) Para guardar un archivo como texto normal en Windows, asígnele la extensión de nombre de archivo .txt. Para guardar un archivo como texto normal en Macintosh, sencillamente borre .html del nombre del archivo Macintosh. (Para que Dreamweaver vea el archivo como HTML de nuevo, guárdelo otra vez con la extensión .html o .htm.) Después de guardar un archivo como texto, Dreamweaver no interpreta ningún código HTML del archivo.

Cuando guarde los documentos, evite utilizar espacios y caracteres especiales en los nombres de archivos y carpetas siempre que sea posible. En concreto, no utilice caracteres especiales (como é, ç o ¥) ni signos de puntuación (como dos puntos, barras inclinadas o puntos) en los nombres de archivos que desee colocar en un servidor remoto; muchos servidores cambian estos caracteres durante la carga, lo que provoca que se rompan los vínculos existentes con los archivos. Asimismo, no comience los nombres de los archivos con números.

 

3 Haga clic en el botón Guardar para guardar el archivo.

 

 

 

 

 

 

4. PANEL DE PROPIEDADES (PROPERTIES)

 

 

 

 

 

 

El panel de propiedades o properties le permite corregir las características de un elemento seleccionado en la página, tal como texto o algún objeto insertado.

La mayoría de los cambios que usted realice a las características se aplican inmediatamente en el documento sin embargo los cambios no se solicitan asta que usted  haga clic en objeto ya sea texto o imagen.

El contenido del panel de properties varía en los tipos de objetos seleccionados.

Para más información de alguna característica específica selecciona el objeto y en la esquina superior derecha del panel de properties haga clic en el icono de signo de interrogación.

 

para mostrar y ocultar el panel de properties

 

vaya a la barra de menú

seleccione Windows>properties

También puede abrirla con la combinación de teclas CTRL + F3

 

 

 

5. CONFIGURAR PÁGINA (PROPERTIES, BACKGROUND, LINKS, TEXT)

 

 

 

 

Presione ctrl + F3 para abrir o cerrar la barra de propiedades

 
 


Dreamweaver le permite trabajar en su documento de diferentes formas: utilizando la vista Diseño, utilizando la vista Código o empleando una vista combinada que muestra el diseño y el código del documento. Puede cambiar la vista en la que desea trabajar seleccionando una vista en la barra de herramientas de Dreamweaver.

Conforme cree y trabaje con los documentos, Dreamweaver generará automáticamente el código HTML subyacente. Para examinar o editar este código, utilice uno de los editores de código de Dreamweaver: la vista de Código de la ventana de documento o el inspector de código.
La vista de Diseño de Dreamweaver muestra una representación visual del documento, en lugar del código subyacente. Cuando trabaje en la vista de Diseño, podrá optar entre dos vistas para realizar el diseño: vista de Disposición o vista Estándar. Puede seleccionar estas vistas en el panel Objetos, bajo Ver.

En la vista de Disposición, puede diseñar una disposición de página e insertar gráficos, texto y otros elementos multimedia.

 

 

 

 

 

 

Utilice el cuadro de diálogo Propiedades de la página para especificar diversas opciones de la página. Para abrir el cuadro de diálogo Propiedades de la página, elija Modify >page properties o presione la siguiente combinación CTRL + J.

Title especifica el título de la página que aparece en la barra de título de la ventana de documento y la ventana de la mayoría de los navegadores.

Background image y Background especifican una imagen y un color de fondo para la página.

Text y Links definen los colores predeterminados de texto, vínculos, vínculos visitados y vínculos activos. También puede controlar estos colores utilizando hojas de estilos CSS.

Left margin y Top Margin especifican los tamaños de los márgenes de la página en la etiqueta body para Microsoft Internet Explorer solamente. Netscape Navigator prescinde estos valores y utiliza los de margin width y margin height. Para obtener un resultado óptimo en los dos navegadores, proporcione valores de márgenes para ambos navegadores en lugar de para uno solo; complete los cuatro valores de márgenes en lugar de sólo dos. Para asegurarse de que no aparecen márgenes en ningún navegador, configure los cuatro valores con el valor 0. Dreamweaver no muestra márgenes de página en la ventana de documento. Utilice Vista previa en el navegador para ver los márgenes.

Presione ctrl. + j para abrir las propiedades de la pagina

 
Document Encoding. Especifica la codificación empleada para los caracteres del documento. Para inglés y otros idiomas de Europa Occidental, elija Occidental. Otras opciones posibles son: centroeuropeo, cirílico, griego, islandés, japonés, chino tradicional, chino simplificado y coreano. Si no aparece ninguna opción para la codificación que desea utilizar, elija Otro para crear un documento con la codificación que use su sistema operativo. Todos los idiomas asiáticos utilizan codificación de doble byte.

Para cambiar las fuentes que emplea Dreamweaver para mostrar cada codificación, elija Edit > Edit with external editor  y seleccione Fuentes/codificación. Las fuentes que seleccione en este panel de preferencias Fuentes/codificación no afectarán al modo en que los visitantes ven las páginas, ya que éstos especifican sus propias fuentes (para una determinada codificación) en los navegadores Web. Para obtener más información.

Tracing iamge especifica una imagen que se va a emplear como guía para copiar un diseño. Esta imagen sólo sirve como referencia, ya que no aparece cuando el documento se muestra en un navegador.

Image transparency determina la opacidad de la imagen de rastreo, desde completamente transparente hasta completamente opaca.

Document folders. Muestra la carpeta en la que se guarda el documento actual, si ha sido guardado.

Site foldrs muestra la ruta de la carpeta raíz local del sitio en la que se ha guardado el documento actual, en el caso de que se haya guardado.

 

 

6 CREACIÓN DE HIPERVINCULOS

 

 

 

 

 

 

 

Utilice el panel de properties y el icono de señalización de archivo para crear vínculos desde una imagen, un objeto o texto hasta otro documento o archivo.

Para crear vínculos entre documentos utilizando el icono de carpeta o el cuadro de texto Vínculo:
1 Seleccione texto o una imagen en la vista de Diseño de la ventana de documento.

2 Abra el panel de properties (Windows > properties) y lleve a cabo una de estas operaciones:

Haga clic en el icono de carpeta situado a la derecha del campo Link para localizar y seleccionar un archivo.

La ruta del documento vinculado aparecerá en el campo URL. Utilice el menú emergente Relativo a del cuadro de diálogo Seleccionar archivo HTML para indicar si la ruta es relativa al documento o a la raíz. A continuación, haga clic en Seleccionar.

Nota: Al cambiar el tipo de ruta en el campo Relativo a, Dreamweaver utilizará esta selección como el tipo de ruta predeterminado para futuros vínculos hasta que la cambie.

En el campo Vínculo, introduzca la ruta y el nombre de archivo del documento. Para establecer un vínculo con un documento del sitio, introduzca una ruta relativa al documento o relativa a la raíz. Para establecer un vínculo con un documento externo al sitio, introduzca una ruta absoluta que incluya el protocolo (por ejemplo, http://). Puede utilizar este sistema para introducir un vínculo para un archivo que aún no se ha creado.
3 Seleccione una ubicación para abrir el documento.
Para que el documento vinculado aparezca en un lugar distinto de la ventana o el marco actual, seleccione una opción en el menú emergente Destino del inspector de propiedades:
_blank carga el documento vinculado en una nueva ventana sin nombre del navegador.

_parent carga el documento vinculado en el marco o la ventana padre del marco que contiene el vínculo. Si el marco que contiene el vínculo no está anidado, el documento vinculado se cargará en la ventana completa del navegador.
_self carga el documento vinculado en el mismo marco o la misma ventana que el vínculo. Este destino es el predeterminado, por lo que normalmente no es preciso especificarlo.

_top carga el documento vinculado en la ventana completa del navegador, eliminando de esta forma todos los marcos.

Sugerencia: Si todos los vínculos de la página se establecerán con el mismo destino, puede especificar este destino una vez eligiendo Insert >  Head tangs  >Base y seleccionando la información de destino.

Para obtener información sobre el establecimiento de vínculos con marcos. Para crear un vínculo con un documento utilizando el icono de señalización de archivo:

1 Seleccione el texto o una imagen en la vista de Diseño de la ventana de documento.
2 Arrastre el icono de señalización de archivo situado a la derecha del campo Vínculo en el panel de properties y señale otro documento abierto, un punto de fijación visible en un documento abierto o un documento de la ventana Sitio. El campo Vínculo se actualizará para mostrar el vínculo.
Nota: El documento abierto o el archivo de la ventana Sitio al que señale pasará a un segundo plano en la pantalla mientras realiza la selección.

3 Libere el botón del ratón.

Para crear un vínculo desde una selección en un documento abierto:

1 Seleccione texto en la vista de Diseño de la ventana de documento.

2 Presione mayús. y, al mismo tiempo, arrastre la selección.

Mientras arrastra la selección, aparecerá el icono de señalización de archivo.

3 Señale otro documento abierto, un punto de fijación visible en un documento abierto o un documento de la ventana Sitio.

4 Libere el botón del ratón.

 

Para crear un vínculo utilizando el mapa del sitio y el icono de señalización de archivo:

1 En la ventana Sitio, active las vistas Archivos del sitio y Mapa del sitio presionando el icono Mapa del sitio mientras elige Mapa y archivos.

 

2 Seleccione un archivo HTML del mapa del sitio.

Aparecerá el icono de señalización de archivo junto al archivo.

 

3 Arrastre el icono de señalización de archivo y señale otro archivo del mapa del sitio o un archivo local de la vista Archivos del sitio.

 

4 Libere el botón del ratón.

Se colocará un vínculo de hipertexto con el nombre del archivo vinculado en la parte inferior del archivo HTML seleccionado. Este método ofrece buenos resultados para crear vínculos rápidamente en un sitio que se está creando.

 

 

7 INSERCION DE IMÁGENES

 


Al insertar una imagen en un documento de Dreamweaver, el programa genera automáticamente una referencia al archivo en el código HTML. Para asegurarse de que esta referencia es correcta, el archivo de imagen deberá estar en el sitio actual. Si no lo está, Dreamweaver le preguntará si desea copiar el archivo en la carpeta raíz.

 

 

 

 

 

 

Para insertar una imagen:

 

1 Lleve a cabo una de estas operaciones:

Sitúe el punto de inserción en el lugar de la ventana de documento donde desea que aparezca la imagen y, a continuación, elija Insert > Image o haga clic en el botón Insertar imagen de la categoría Common del panel Objetos.

Sitúe el punto de inserción en el lugar de la ventana de documento donde desea que aparezca la imagen y, a continuación, presione Control+Alt+I (Windows).

Arrastre el botón Insertar imagen desde el panel Objetos hasta la posición deseada de la ventana de documento.

Arrastre una imagen desde el panel Activos hasta la posición deseada de la ventana de documento. A continuación, siga con el paso 3.

Arrastre una imagen desde la ventana Sitio hasta la posición deseada de la ventana de documento. A continuación, siga con el paso 3.

Arrastre una imagen desde el escritorio hasta la posición deseada de la ventana de documento. A continuación, siga con el paso 3.

2 En el cuadro de diálogo que aparece, haga clic en Examinar para elegir un archivo o escriba la ruta del archivo de imagen.

Si está trabajando en un documento que no está guardado, Dreamweaver generará una referencia de archivo:// al archivo de imagen. Al guardar el documento en el sitio, Dreamweaver convierte la referencia en una ruta relativa al documento.

3 Defina las propiedades de la imagen en el panel de PROPERTIES.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


Cuestionario 1

 

1.- Definición de una pagina Web

 

 

 

 

 

2.- Definición de un Sitio

 

 

 

 

3.- Definición de un portal

 

 

 

 

4.- Definición de un Sito Local y Remoto

 

 

 

 

 

5.- Paquete que instala C:\inetpub\wwwroot

 

 

 

 

6.- Que es el IIS  y para que sistema operativo

 

 

 

 

 

7.- Que es el PWS Y para que sistema operativo

 

 

 

 

8.- Definición de Hipervínculo

 


 

 

www.icam.com.mx

 

 


MACROMEDIA DREAMWEAVER MX

CAPITULO 2

Al final del capítulo el alumno será capaz de...

Insertar  interactivos

 

Insertar imágenes de sustitución

 

Crear barras de navegación

 

Insertar botones de flash

 

Insertar texto flash

 

Insertar objetos HTML Fireworks

 

Comprueba tu avance y marca con una P  los objetivos alcanzados

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

8. INSERCION DE INTERACTIVOS

 

 

Una imagen de sustitución es una imagen que cambia cuando el puntero pasa sobre ella. Una imagen de sustitución consta en realidad de dos imágenes: la imagen principal (la que aparece al cargarse inicialmente la página) y la imagen de sustitución (la que aparece al pasar el puntero sobre la imagen principal). Ambas imágenes deben tener el mismo tamaño. Si tienen tamaños distintos, Dreamweaver cambia automáticamente el tamaño de la segunda imagen para que se ajuste a las propiedades de la primera.
Las imágenes de sustitución están configuradas de manera predeterminada para responder al evento MouseOver. Para obtener información sobre la configuración de una imagen para que responda a otro evento (por ejemplo, un clic del ratón) o sobre la edición de una imagen de sustitución para que muestre otra imagen.

Una forma más compleja de imagen de sustitución es la barra de navegación. Para crear una barra de navegación, utilice Insert > Interactive Image> Navigation bar.

 

Para crear una imagen de sustitución:

 

1 En la ventana de documento, sitúe el punto de inserción en el lugar donde desea que aparezca la imagen de sustitución.

 

2 Introduzca la imagen de sustitución mediante uno de estos métodos:

En la categoría Common del panel Objetos, haga clic en el icono Insertar imagen de sustitución.

En la categoría Common del panel Objetos, arrastre el icono Insertar imagen de sustitución hasta la posición deseada de la ventana de documento.

Elija Insert >Interactive Images >Rollovers Image.

Aparecerá el cuadro de diálogo Insertar imagen de sustitución.

 

3 En el campo Image Name, introduzca un nombre para la imagen de sustitución.

4En el campo Imagen original, haga clic en Examinar y seleccione o escriba la ruta de la imagen que desea mostrar cuando se cargue la página.

 

5 En el campo Rollover Image, haga clic en Examinar y seleccione o escriba la ruta de la imagen que desea mostrar cuando el puntero pase sobre la imagen original.

 

6 Si desea precargar las imágenes en la caché del navegador de modo que se carguen más rápidamente, seleccione la opción Carga previa de imágenes.

 

7 En el campo when clicked, go to URL, haga clic en browse y seleccione o escriba la ruta del archivo que desea abrir cuando un usuario haga clic en la imagen de sustitución.

 

Nota: Si no establece un vínculo para la imagen, Dreamweaver insertará un vínculo nulo (#) en el código HTML relativo al comportamiento de sustitución. Si elimina el vínculo nulo, la imagen de sustitución dejará de funcionar.

8Haga clic en Aceptar para cerrar el cuadro de diálogo Insertar imagen de sustitución.

 

8.1 ROLLOVER IMAGE

 

 

 

 

 

 Un rollover iamge es una imagen de sustitución que en el momento de pasar el mouse cambia

Para un rollover image siga las siguientes instrucciones:

 

1 En la ventana de documento, sitúe el punto de inserción en el lugar donde desea que aparezca la imagen de sustitución.

 

2 Introduzca la imagen de sustitución mediante uno de estos métodos:

En la categoría Common del panel Objetos, haga clic en el icono Insertar imagen de sustitución.

En la categoría Common del panel Objetos, arrastre el icono Insertar imagen de sustitución hasta la posición deseada de la ventana de documento.

Elija Insert >Interactive Images >Rollovers Image.

Aparecerá el cuadro de diálogo Insertar imagen de sustitución.

 

3 En el campo Image Name, introduzca un nombre para la imagen de sustitución.

4En el campo Imagen original, haga clic en Examinar y seleccione o escriba la ruta de la imagen que desea mostrar cuando se cargue la página.

 

5 En el campo Rollover Image, haga clic en Examinar y seleccione o escriba la ruta de la imagen que desea mostrar cuando el puntero pase sobre la imagen original.

 

6 Si desea precargar las imágenes en la caché del navegador de modo que se carguen más rápidamente, seleccione la opción Carga previa de imágenes.

 

7 En el campo when clicked, go to URL, haga clic en browse y seleccione o escriba la ruta del archivo que desea abrir cuando un usuario haga clic en la imagen de sustitución.

 

Nota: Si no establece un vínculo para la imagen, Dreamweaver insertará un vínculo nulo (#) en el código HTML relativo al comportamiento de sustitución. Si elimina el vínculo nulo, la imagen de sustitución dejará de funcionar.

8Haga clic en Aceptar para cerrar el cuadro de diálogo Insertar imagen de sustitución.

 

8.2 NAVIGATION BAR

 

 

 

 

 

Un navigation bar se compone de una imagen o un conjunto de imágenes cuya visualización cambia según las acciones que realiza el usuario. Los navigation bar permiten desplazarse fácilmente entre las páginas y los archivos de un sitio.
Antes de insertar un navigation bar, cree un conjunto de imágenes para los estados que se mostrarán con cada elemento de navegación. Un elemento de  navigation bar se puede considerar como un botón, ya que la hacer clic en él, lleva al usuario a otra página.

Un elemento de navigation bar puede tener cuatro estados:

Up image: la imagen que aparece cuando el usuario aún no ha hecho clic en el elemento o interactuado con él. Por ejemplo, parece como si no se hubiera hecho clic en el elemento que se encuentra en este estado.

 Over image: la imagen que aparece cuando el puntero se mueve sobre la imagen. Cambia la apariencia del elemento (por ejemplo, puede aparecer más claro) para indicar a los usuarios que pueden interactuar con él.

Down image: la imagen que aparece después de hacer clic en el elemento. Por ejemplo, cuando un usuario hace clic en un elemento, se carga una nueva página y la barra de navegación sigue mostrándose, pero el elemento en el que se ha hecho clic aparece oscurecido para indicar que se ha seleccionado.

Over while down image: la imagen que aparece cuando el puntero pasa sobre la imagen Abajo después de haber hecho clic en el elemento. Por ejemplo, el elemento puede aparecer atenuado o gris. Puede utilizar este estado para indicar visualmente a los usuarios que no pueden volver a hacer clic en el elemento mientras se encuentren en esta parte del sitio.

No es necesario incluir imágenes de barra de navegación para los cuatro estados. Por ejemplo, es posible que sólo necesite los estados Arriba y Abajo.

Puede crear una barra de navegación, copiarla en otras páginas del sitio, utilizarla con marcos y editar los comportamientos de la página para mostrar distintos estados a medida que accede a las páginas

 

8.3 FLASH BOTTON

 

 

 

El objeto de flash botton  permite personalizar e insertar un conjunto de botones Flash prediseñados.

Nota: Deberá guardar el documento antes de insertar un objeto de botón o de texto Flash.

Para insertar un objeto de Flash Botton:

 

1 Mientras se encuentra en la vista de Diseño de la ventana de documento, seleccione media en panel de objetos y presione el botón Insertar Flash botton en el panel Objetos o elija Insert > Interactive images >Flash botton. También puede arrastrar el icono de Flash botton sobre la ventana de documento.

Aparecerá el cuadro de diálogo Insertar botón Flash.

 

2 Seleccione el estilo de botón que desee en la lista Style.

Verá un ejemplo del botón en el campo Muestra. Puede colocar el ratón encima de la muestra  para ver cómo funciona en el navegador. Sin embargo, el campo Muestra no se actualiza automáticamente para mostrar los cambios realizados en el texto o la fuente. Estos cambios aparecerán en la vista de Diseño.

 

3 En el campo botton text (opcional), escriba el texto que desea mostrar.

Por ejemplo, escriba Presione aquí Este campo sólo acepta cambios si el botón seleccionado tiene un parámetro {Button Text} definido. Esto se puede observar en el campo Muestra. El texto que escriba reemplazará {Button Text} cuando previsualice el archivo.

 

4 En el campo Font, especifique un tamaño de fuente y seleccione la fuente que desea utilizar el menú emergente.

Sólo es necesario realizar selecciones de fuente y tamaño si el botón tiene parámetros de texto definidos. Si la fuente predeterminada de un botón no está disponible en el sistema, seleccione otra fuente en el menú emergente. Tenga en cuenta que no verá la fuente seleccionada en el campo Muestra, aunque puede hacer clic en Aplicar para insertar el botón en la página y ver qué apariencia tendrá el texto.

 

5 En el campo Link (opcional), introduzca un vínculo absoluto o relativo al documento para el botón.

No se admiten vínculos relativos al sitio porque los navegadores no los reconocen en las películas Flash. Si utiliza un vínculo relativo al documento, guarde el archivo SWF en el mismo directorio que el archivo HTML. Los navegadores interpretan los vínculos relativos al documento de distintas formas y, por tanto, al guardar los vínculos en el mismo directorio se garantiza su correcto funcionamiento.

 

6 En el campo target (opcional), especifique un marco o una ventana de destino para cargar el vínculo del botón Flash.

 

7 En el campo Bg color (opcional), establezca el color del fondo de la película Flash. Utilice el selector de colores o escriba un valor hexadecimal para la Web (como #FFFFFF).

 

8 En el campo save as, introduzca un nombre de archivo para guardar el nuevo archivo SWF.

Puede utilizar el nombre de archivo predeterminado (por ejemplo, button1.swf) o escribir uno nuevo. Si el archivo contiene un vínculo relativo al documento, deberá guardarlo en el mismo directorio que el documento HTML actual para mantener los vínculos relativos al documento.

 

9 Haga clic en Get more styles para pasar al sitio Macromedia Exchange y descargar más estilos de botón.

Para obtener más información.

 

10 Haga clic en Apply o presione OK para insertar el botón Flash en la ventana de documento.

Sugerencia: Seleccione Aplicar para ver los cambios realizados en la vista de Diseño. Mientras mantiene el cuadro de diálogo abierto puede continuar realizando cambios en el botón.

Para modificar un objeto de Flash botton:

1 En la vista de Diseño, seleccione el objeto de Flash botton.

 

2 En el panel de properties mostrará las propiedades del Flash botton. Puede realizar cambios en el panel de properties. Estos cambios modifican los atributos HTML como ancho, alto y color de fondo.

 

3 Para realizar cambios en el contenido, muestre el cuadro de diálogo Insertar Flash botton utilizando uno de estos métodos:

Haga doble clic en el objeto de Flash botton.

Haga clic en Edit en el panel de properties.

Haga clic con el botón derecho (Windows) o mientras presiona la tecla Control (Macintosh) y elija Edit en el menú contextual.

 

4 En el cuadro de diálogo Insert Flash botton, edite los campos descritos en el procedimiento anterior.

En la vista de Diseño, puede cambiar el tamaño del objeto fácilmente utilizando los manejadores de cambio de tamaño. Puede restablecer el tamaño original del objeto seleccionando Restablecer tamaño en el inspector de propiedades.

Para ver cómo se reproduce el objeto de Flash botton en la ventana de documento:

1 En la vista de Diseño, seleccione el objeto de Flash botton.

2 En el panel de properties, haga clic en el botón verde Reproducir.

 

3 Haga clic en el botón rojo Detener para terminar la previsualización.

Nota: No se puede editar el objeto de Flash botton mientras se está reproduciendo.

Conviene previsualizar siempre el documento en el navegador para comprobar exactamente la apariencia que tendrá el botón Flash.

 

 

8.4 FLASH TEXT

 

 

 

 

El objeto de Flash text permite crear e insertar una película Flash que sólo contiene texto. Esto permite crear una pequeña película de gráficos vectoriales con fuentes de diseño y el texto que elija.

 

Para insertar un objeto de texto Flash:

 

1 Mientras se encuentra en la vista de Diseño de la ventana de documento, seleccione media en panel de objetos y presione el botón  Flash text en el panel Objetos o elija Insert >interactive  images > Flash Text.

Aparecerá el cuadro de diálogo Insertar texto Flash.

 

2 Seleccione una fuente en el menú emergente Font.

Este menú muestra todas las fuentes TrueType cargadas actualmente en el sistema.

 

3 Introduzca un tamaño de fuente (de puntos) en el campo Size.

 

4 Especifique los atributos de estilo, como negrita o cursiva, y la alineación del texto haciendo clic en los botones del estilo correspondiente.

 

 

5 En el campo Color, establezca el color del texto utilizando el selector de colores o introduciendo un valor hexadecimal para la Web (como #FFFFFF).

6 En el campo Rollover color, establezca el color que aparece cuando el puntero pasa sobre el objeto de texto Flash. Utilice el selector de colores o escriba un valor hexadecimal para la Web (como #FFFFFF).

7 Introduzca el texto deseado en el campo Texto.

Para ver el estilo de fuente que se muestra en el campo Texto, active la casilla que dice show font.

 

8 Si desea asociar un vínculo con el objeto de Flash text, introduzca un vínculo absoluto o relativo al documento en el campo link.

No se admiten vínculos relativos al sitio porque los navegadores no los reconocen en las películas Flash. Si utiliza un vínculo relativo al documento, guarde el archivo SWF en el mismo directorio que el archivo HTML. Los navegadores interpretan los vínculos relativos al documento de distintas formas y, por tanto, al guardar los vínculos en el mismo directorio se garantiza su correcto funcionamiento.

 

9 Si ha introducido un vínculo, puede especificar un marco o una ventana de destino para cargar ese vínculo en el campo Target.

 

10 En el campo Bg color, elija un color de fondo para el texto. Utilice el selector de colores o escriba un valor hexadecimal para la Web (como #FFFFFF).

 

11 En el campo save as, introduzca un nombre para el archivo.

Puede utilizar el nombre de archivo predeterminado (por ejemplo, tex1.swf) o escribir uno nuevo. Si el archivo contiene un vínculo relativo al documento, deberá guardarlo en el mismo directorio que el documento HTML actual para mantener los vínculos relativos al documento.

 

12 Haga clic en Apply o presione el botón OK para insertar el Flash text en la ventana de documento.

Si hace clic en Apply, el cuadro de diálogo permanecerá abierto y podrá previsualizar el texto en el documento.

 

 

 

 

 

 

 

 

 

 

8.5 HTML FIREWORKS

 

 

 

Dreamweaver permite insertar código HTML generado por Fireworks, completo con imágenes asociadas, divisiones y JavaScript, en un documento. Esta característica de inserción facilita la tarea de agregar tablas o mapas de imágenes creados en Fireworks en un documento de Dreamweaver.

Para insertar código HTML de Fireworks en un documento de Dreamweaver:

1 En Dreamweaver, guarde el documento en un sitio definido.

 

2 Coloque el punto de inserción en el documento donde desee que comience el código HTML insertado.

 

3 Siga uno de estos procedimientos:

Seleccione Insert > Interactive Images > Fireworks HTML.

Haga clic en el botón Insertar Fireworks HTML de la categoría Common del panel Objetos.

 

4 En el cuadro de diálogo que aparece a continuación, haga clic en Browse para seleccionar el archivo HTML de Fireworks que desee.

 

5 selecciones la casilla de opción delete file after insertion para desplazar el archivo HTML a la Papelera de reciclaje (Windows).

Utilice esta opción en caso de no necesitar el archivo HTML de Fireworks después de insertarlo. Esta opción no afecta al archivo PNG origen asociado con el archivo HTML.

Nota: Si el archivo HTML se encuentra en una unidad de red, se elimina de forma permanente, no se desplaza a la Papelera de reciclaje o Papelera.

6 Haga clic en OK para insertar el código HTML, junto con sus imágenes, divisiones y JavaScript asociados, en el documento de Dreamweaver.

 


Cuestionario 2

 

 

1.- Definición de barra de navegación

 

 

 

 

 

2.- Opción que permite interactuar con fireworsk

 

 

 

 

 

3.- Un Hipervínculo creado en fireworsk puede ser modificado en dreamweaver

 

                   Falso (  )                       verdadero (  )

 

 

 


 

 

www.icam.com.mx

 

 


 

MACROMEDIA DREAMWEAVER MX

CAPITULO 3

Al final del capítulo el alumno será capaz de...

Configurar el navegador

 

Editar una lista de navegadores

 

Conocer la barra de insert

 

Utilizar la ficha common

 

Comprueba tu avance y marca con una  P los objetivos alcanzados

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

9. CONFIGURACION DEL NAVEGADOR A TRABAJAR

 

 

Presione F12 para ver la vista previa de la pagina Web

 
Vista previa usando el servidor local Permite elegir un servidor local para realizar la vista previa de una página en un navegador (sólo Windows). Para que esta opción funcione es necesario ejecutar software de servidor en el ordenador local. Cuando esta opción está activada, Dreamweaver suministra la página actual para realizar la vista previa en un servidor local como un URL que comienza por http://localhost/. Cuando esta opción está desactivada, Dreamweaver abre el documento en un navegador con una ruta de archivo que comienza por archivo://. En algunos casos, los vínculos especificados como rutas relativas a la raíz no funcionan correctamente cuando se abren en un navegador con una ruta archivo://. Lo mismo sucede cuando se lleva a cabo la comprobación de un navegador de destino.

El botón de signo más (+) añade un navegador a la lista.

El botón de signo menos (-) elimina el navegador seleccionado en la lista.

Editar cambia la configuración del navegador seleccionado.

Navegador principal y Navegador secundario especifican si el navegador seleccionado es el principal o el secundario. Presione F12 para abrir el navegador principal o F12 (Windows).

 

 

 

 

9.1 EDITAR LISTA DE NAVEGADORES

 

 

Dreamweaver permite crear páginas Web con elementos que admiten todos los navegadores (por ejemplo, imágenes y texto de párrafo), así como con elementos que sólo admiten los navegadores más recientes (por ejemplo, estilos y capas).

La función Comprobar navegadores de destino analiza el HTML de los documentos para ver si hay etiquetas o atributos que no admiten los navegadores de destino. La comprobación no altera el documento.

Para ejecutar una comprobación del navegador de destino:

1 Dispone de las opciones siguientes:

Para ejecutar la comprobación en el documento actual, guarde el archivo. La comprobación se realizará con la última versión guardada del archivo y no incluirá los cambios que no haya guardado.

Para ejecutar la comprobación con un directorio o un sitio, elija Windows>Site y abra la ventana FTP del sitio. A continuación, seleccione una carpeta en el directorio local. La comprobación del navegador de destino se realizará en todos los archivos HTML de esa carpeta y las subcarpetas que contenga. La comprobación del navegador de destino sólo se puede llevar a cabo con archivos locales.

 

2 Elija File > Preview in Browser.

Si aún no ha seleccionado un Explorador principal, el programa le pedirá que lo haga.

 

3 En la lista de navegadores, seleccione el navegador de destino que desea utilizar para la comprobación del sitio.

4 Para guardar el informe, elija File > save en el navegador.
Las preferencias de Vista previa en el navegador muestran los navegadores principal y secundario definidos actualmente. Para abrir las preferencias de Vista previa en el navegador, elija File > preview in browser >Iexplore, o bien oprima F12

 

 

 

 

 

 

 

 

 

10 FICHAS INSERT

 

 

El panel de insert contiene botones llamados fichas insert que sirven  para la creación e inserción de diversos tipos de objetos, como tablas, capas e imágenes.

 

 

10.1 COMMON (IMAGE, RELLOVER, TABLE, NAVIGATION BAR, HORIZONTAL BAR, DATE, OBJEST,FLASH, FIREWORKS, GENERATOR, BOTTONS, SHOCKWAVE)

 

 

El panel de insert contiene botones para la creación e inserción de diversos tipos de objetos, como tablas, capas e imágenes. Para mostrar u ocultar el panel Objetos, elija Windows > insert. O presione CTRL + F2

Para insertar un objeto:

Haga clic en el correspondiente botón del panel insert o arrastre el icono del botón hasta la ventana de documento. Dependiendo del objeto, aparecerá el correspondiente cuadro de diálogo de inserción de objeto en el que se le pedirá que seleccione o inserte el archivo u objeto deseado.

Para omitir este cuadro de diálogo e insertar un objeto marcador de posición vacío:

Mantenga presionada la tecla Control (Windows) u Opción (Macintosh) mientras inserta el objeto. (Por ejemplo, para insertar un marcador de posición para una imagen sin especificar un archivo de imagen, mantenga presionada la tecla Control u Opción y haga clic en el botón Imagen.)

Nota: Esto no permite omitir todos los cuadros de diálogo. Algunos objetos, como las barras de navegación, las capas, los botones Flash, los marcos, etc., no insertan marcadores de espacio.

El panel Insert contiene doce categorías de forma predeterminada: Characters, Common, Forms, Frame, Head, layout y Especial. También contiene botones que cambian de vista: Estándar y Disposición.

 

 La categoría Common contiene botones para la creación e inserción de los objetos más utilizados, como Images, Tables y dra. layer.

 

La sección layout permite elegir entre vista Estándar (predeterminada) o de Disposición. Si está seleccionada la vista de Disposición, también podrá seleccionar las herramientas de Disposición: Dibujar celda de disposición y Dibujar tabla de disposición. Para obtener más información. Para cambiar de categoría, utilice el menú emergente situado en la parte superior del panel. Puede modificar cualquier objeto del panel o crear sus propios objetos.

Algunas de las preferencias generales afectan al panel Objetos. Para cambiar estas preferencias, elija Edit > Preference y seleccione General.

Cuando inserte objetos tales como imágenes, tablas, secuencias de comandos y elementos head, aparecerá un cuadro de diálogo en el que se le solicitará información adicional. Puede suprimir estos cuadros de diálogo desactivando la opción Mostrar diálogo al insertar objetos o manteniendo presionada la tecla Control mientras crea el objeto. Cuando se inserta un objeto con esta opción desactivada, el objeto recibe valores de atributo predeterminados. Después de insertar el objeto, utilice el inspector de propiedades para cambiar sus propiedades.

Las preferencias del panel Objetos permiten visualizar el contenido del panel Objetos como texto solamente, iconos solamente o texto e iconos.

 

 

 


 

 

www.icam.com.mx

 

 


MACROMEDIA DREAMWEAVER MX

CAPITULO 4

Al final del capítulo el alumno será capaz de...

Utilizar la ficha layout

 

Utilizar la ficha text

 

Utilizar la ficha table

 

Utilizar la ficha frame

 

Utilizar la ficha form

 

Comprueba tu avance y marca con una P  los objetivos alcanzados

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

10.2 LAYOUT

 

La categoría loyout contiene botones que permiten crear objetos no visibles en la ventana del navegador, como los puntos de fijación con nombre. Elija View > visual aids > Invisible elements para ver los iconos que marcan la posición de estos objetos. Haga clic en los iconos de elementos invisibles de la ventana de documento para seleccionar los objetos y cambiar sus propiedades.

 

 

10.3 TEXT, TABLE, FRAMES, FORMS, TEMPLATES, CHARACTERS, MEDIA, HEADS, SCRIPT, APPLICATION

 

 

·      El panel Characters contiene caracteres especiales, como los símbolos de copyright, de comillas curvas y de marca registrada. Tenga en cuenta que estos símbolos no se muestran correctamente en las versiones anteriores a la 3.0 de los navegadores (Netscape e IE).

 

 La categoría Forms contiene botones que permiten crear formularios e insertar elementos de formulario.

 

·      La categoría media contiene botones que permiten insertar elementos especiales, como applets Java, plug-ins y objetos ActiveX. Para obtener más información.

 

·      La categoría Head contiene botones que permiten añadir diversos elementos de la sección head, como etiquetas meta, keywords y base.

 

·      La categoría FRame contiene estructuras comunes de conjuntos de marcos.

 

·      En la categoría de common podemos encontrar la opcion de table, teble permite crear una tabla para el manejo de datos de forma organizada. Para dibujar una tabla solo pulse encima del  icono y se abrirá un cuadro de dialogo en el cual usted deberá especificar los tamaños de la columna, anchos de la fila rellenos, etc.

 

·      la sección head y la sección body. La sección body es la parte principal del documento, la parte visible que contiene texto, imágenes, etc. La sección head es invisible, salvo el título del documento, que aparece en las barras de título de las ventanas en los navegadores y en Dreamweaver.

 

La sección head también contiene otra información importante, incluido el tipo de documento, la codificación de idioma, las funciones y variables JavaScript y VBScript, las palabras clave y los indicadores de contenido para motores de búsqueda y las definiciones de estilo. No es necesario suministrar todos estos elementos para cada página. Por ejemplo, puede definir palabras clave e indicadores de contenido para la página principal únicamente. Puede ver los elementos en la sección head utilizando el menú Ver, la vista de Código de la ventana de documento o el inspector de código.

 

La pestaña de text en el panel de insert permite insertar etiquetas de texto y permite dar formato al texto.

 

Nota la pestaña de texto en el panel de insert parecen similares  a algunos botones, en el panel de properties, las funciones son diversas para cada tipo de botón.

 

Font Tag Editor: muestra un cuadro de dialogo donde permite dar formato al texto seleccionado.

 

Bold, Italic: estas dos opciones son clásicos son simplemente de negrita y cursiva.

 

Application: Esta opción permite la conexión a una base de datos.

 

Recordset: permite definir la ruta de una base de datos, y en donde se almacenara la información.

 

Dinamic table: permite crear una tabla dinamica en una pagina, y permite asociar a un recordset. Usted puede modificar el aspecto de las tablas y la region repetida usando el panel de properties y el behaviors del servidor de la region respectivamente.

 

Dinamic text: inserte un objeto dinámico de un texto en una página. El objeto de tipo texto que usted inserte es un artículo de un recordset predefinido, en la cual usted puede aplicar cualquiera de los formatos de datos de Dreamweaver MX

 

 

 

 

 

 

 

 

www.icam.com.mx

 

 

 


 

MACROMEDIA DREAMWEAVER MX

CAPITULO 5

Al final del capítulo el alumno será capaz de...

Utilizar la ficha plantillas

 

Utilizar el panel de marcos

 

Conocer las propiedades de los marcos

 

Comprueba tu avance y marca con una P  los objetivos alcanzados

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

11 TEMPLATES

 

 

 

Un template (plantillas) es un documento que sirve para crear múltiples páginas con el mismo diseño. Al crear una plantilla, podrá indicar qué elementos de la página deberán permanecer constantes (no editables o bloqueados) en los documentos basados en esa plantilla, y qué elementos podrán modificarse.
Por ejemplo, si usted publica una revista electrónica, es muy probable que el diseño de la cabecera y el diseño general no cambien de un número al siguiente, ni incluso de un artículo de la revista al que ocupará el mismo lugar en el siguiente número, pero el título y los contenidos de cada artículo serán diferentes. El diseñador puede crear el diseño de la página de un artículo de la revista con texto marcador de posición en los lugares en donde irán el título y el contenido (y con esas regiones marcadas como editables); entonces, el diseñador puede guardar ese diseño como plantilla. La persona que componga el nuevo número de la revista creará una nueva página basada en la plantilla, y sustituirá el texto marcador de posición con el título y el texto reales del nuevo artículo.
Puede crear una plantilla a partir de un documento HTML existente y después modificarla para que se ajuste a sus necesidades, o bien puede crear una plantilla comenzando de cero a partir de un documento HTML en blanco.

Dreamweaver guarda las plantillas con la extensión de archivo .dwt en una carpeta llamada Templates en la carpeta raíz local de su sitio. Si no existe todavía la carpeta Templates, Dreamweaver la creará al guardar una plantilla nueva.

Nota: No saque las plantillas de la carpeta Templates , ni guarde en ella archivos que no sean plantillas. Tampoco debe sacar la carpeta Templates de su carpeta raíz local. Hacerlo ocasiona errores en las rutas de las plantillas.

La mayoría de las operaciones con plantillas solamente están disponibles cuando la vista de Diseño está activa. Si un comando relacionado con plantillas está atenuado cuando la vista de Código está activa, haga clic en la vista de Diseño.

 

Para guardar un documento existente como plantilla:

1 Elija File > Open  y seleccione un documento.

2 Cuando se abra el documento, elija File > Save as Template.

 

Nota: Si el documento está basado en una plantilla, primero debe separarlo de la plantilla para poder guardar el propio documento como plantilla.

 

3 En el cuadro de diálogo que aparece a continuación, seleccione un sitio en el menú emergente e introduzca un nombre para la plantilla en el cuadro Save as.

 

4 Haga clic en OK.

El archivo de plantilla se guarda en la carpeta Templates con la extensión .dwt.

 Para crear una plantilla nueva en blanco:

1 Elija File > New, aprece un cuadro de dialogo en el cual deberá seleccionar la opción de Template, y seleccione uno. O bien también lo puede hacer desde la ventana de preferencia

Edit>Preference. Y en el cuadro de dialogo seleccione la opción que dice New document, por default aparece HTML, en el cuadro de DEFAULT DOCUMENT TYPE despliéguela y seleccione HTL Template.   

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

12 USO DE FRAMES

 

 

El uso más común de Frames (marcos) es la navegación. Una página Web puede utilizar un marco para albergar el menú de navegación y otro marco para el contenido de la página. Dado que el menú de navegación se encuentra en un marco, los visitantes pueden hacer clic en un elemento del menú y el contenido aparecerá en el marco de contenido sin que cambie el menú de navegación. De este modo, el visitante podrá orientarse perfectamente en el sitio.
Hay dos formas de crear un conjunto de marcos en Dreamweaver: puede diseñarlo usted mismo o seleccionarlo de una serie de conjuntos de marcos predefinidos. Si elige un conjunto de marcos predefinido se configurarán automáticamente todos los conjuntos de marcos y marcos necesarios para crear la disposición. Ésta es la forma más sencilla de insertar rápidamente un diseño de marcos en la página. Sólo se pueden crear marcos en la vista Diseño de la ventana de documento.

Los conjuntos de marcos predefinidos facilitan la selección del tipo de conjunto de marcos que desea crear.

Los iconos de conjuntos de marcos predefinidos de la categoría Marcos del panel Objetos proporcionan una representación visual de cada conjunto de marcos al aplicarse a un documento seleccionado.

 

El conjunto de marcos seleccionado rodea al documento actual (el documento en el que se encuentra el punto de inserción). El área azul de un icono de conjunto de marcos predefinido representa la página o el marco seleccionado actualmente en un documento, mientras que el área blanca representa el nuevo o los nuevos marcos.

Para insertar un conjunto de marcos predefinido:

1 Sitúe el punto de inserción en el documento.

2 A continuación, lleve a cabo una de estas operaciones:

En la categoría FRAMES del panel insert, seleccione un conjunto de marcos predefinido. Para insertar el conjunto de marcos, puede hacer clic en un icono o arrastrar un icono directamente al documento.

Para seleccionar un conjunto de FRames predefinido, elija Insertar > Marcos > Izquierda, Derecha, Arriba,

Abajo, Izquierda y arriba, Superior izquierda, Izquierda superior o Dividir.

Antes de crear un conjunto de Frames o trabajar con Frames, haga visibles los bordes de los marcos en la ventana de documento.

Para ver los bordes de los Frames de un documento, elija View > Visual Aids > Frames Borders.

Cuando se muestran los bordes de los marcos, se añade espacio alrededor del borde del documento, lo que sirve de indicador visual de las áreas de marcos del documento.
Para crear un conjunto de marcos, lleve a cabo una de estas operaciones:
Elija Modify > Frameset > Slit frame left, Slit Frame right, Slit Frame up Slit Frame down.
Arrastre uno de los bordes del marco a la ventana de documento para dividir el documento vertical u horizontalmente. Arrastre un borde del marco por una de las esquinas para dividir el documento en cuatro marcos nuevos.

Presione la tecla Alt (Windows).

Para eliminar un Frame

Arrastre el borde del marco fuera de la página o hasta el borde del marco padre.
El panel Marcos proporciona una representación visual de los marcos del documento. Puede hacer clic en un marco o conjunto de marcos en el panel Marcos para seleccionarlo en el documento y, seguidamente, ver o editar las propiedades del elemento seleccionado en el inspector de propiedades.
El panel Marcos también muestra la jerarquía de la estructura del conjunto de marcos de una manera que puede no percibirse en la ventana de documento. En el panel Marcos, el conjunto de marcos está rodeado por un borde grueso tridimensional; los marcos están rodeados por una línea delgada gris; mientras que los distintos marcos se identifican a través de sus nombres.

 Para guardar un documento que está dentro de un marco:

Haga clic en el marco para seleccionarlo y, a continuación, elija File> save Frame o File > Save Frame as.

Para guardar todos los archivos de un conjunto de marcos:

Elija File > Save all.

De este modo se guardarán todos los documentos abiertos, incluidos los documentos individuales, los documentos de marcos y los documentos de conjunto de marcos.

Nota: Utilice las líneas de selección de marcos de la ventana de documento para identificar los documentos de conjunto de marcos o los documentos de marcos al guardar los archivos.

 

 

12.1 PANEL DE FRAMES

 

 

 

Para mostrar el panel de Frames, lleve a cabo una de estas operaciones:
Elija Windows> other> Frames.

Para seleccionar un marco en el panel Marcos:

Haga clic en el marco en el panel Marcos.

Para seleccionar un conjunto de marcos en el panel Marcos:

Haga clic en el borde que rodea a los marcos en el panel Marcos.
Utilice el inspector de propiedades para asignar un nombre a un marco y definir sus bordes y sus márgenes. Para ver todas las propiedades del marco, haga clic en la flecha de ampliación que se encuentra en el ángulo inferior derecho del inspector de propiedades. Es necesario asignar un nombre a cada uno de los marcos para que los vínculos de la página funcionen correctamente.

 

 

 

Para especificar propiedades de marco:

 

 

1 Seleccione un marco llevando a cabo una de estas operaciones:

Haga clic en un marco en el panel Marcos.

Haga clic en un marco en la ventana de documento mientras presiona la tecla Alt (Windows) o las teclas Opción-Mayús (Macintosh).

2 Elija windows > properties para abrir dicha barra. Haga clic en la flecha de ampliación, situada en la esquina inferior derecha, para ver todas las propiedades.

 
3 Para asignar un nombre al marco, escríbalo en el campo frame name.

Nota: Marco determina el nombre del marco actual que se utilizará como destino de hipervínculos y referencias de secuencias de comandos. El nombre de un marco tiene que estar formado por una sola palabra. Se admite subrayado (_), pero no guiones (-), puntos (.) ni espacios. Los nombres de marcos deben comenzar con una letra (no con un número). No utilice palabras reservadas de JavaScript (como top o navigator) para los nombres de los marcos.

4 Elija una de las siguientes opciones de marco:

Src determina el documento de origen del marco. Introduzca un nombre de archivo o haga clic en el icono de la carpeta para examinar y seleccionar el archivo. También puede abrir un archivo en un marco colocando el puntero en el marco y eligiendo File > Open frame.

Scroll. Determina si aparecerán barras de desplazamiento cuando no haya suficiente espacio para mostrar todo el contenido del marco actual. La configuración predeterminada de la mayoría de los navegadores es Automático.

Mismo tamaño restringe el tamaño del marco actual e impide que los usuarios puedan arrastrar los bordes del marco. Siempre podrá cambiar el tamaño de los marcos en la ventana de documento; sin embargo, si esta seleccionada esta opción, los usuarios no podrán cambiar el tamaño de los marcos en sus navegadores.

Bordes controla el borde del marco actual. Las opciones posibles son yes, No y default. Si elige la opción Bordes, se anulará la configuración de bordes definida para el conjunto de marcos. La configuración predeterminada de la mayoría de los navegadores es Sí. Un borde sólo puede desactivarse cuando todos los marcos contiguos están definidos como No o, cuando están definidos como Predeterminado con el conjunto de marcos padre definido como No.

Border color:- establece un color de borde para todos los bordes contiguos al marco actual. Esta opción de configuración anula el color de borde del conjunto de marcos.

5 Configure las siguientes opciones de márgenes (si las opciones de márgenes no están visibles, haga clic en la flecha de ampliación situada en la esquina inferior derecha).

Margin width Establece en píxeles el ancho de los márgenes izquierdo y derecho (es decir, del espacio que hay entre el borde del marco y su contenido).

Margin Height Establece en píxeles el alto de los márgenes superior e inferior (es decir, del espacio que hay entre el borde del marco y su contenido).


Controlar el contenido del marco con vínculos

Para utilizar vínculos en marcos, deberá establecer un destino para el vínculo. El destino es el marco en el que se abrirá el contenido vinculado. Por ejemplo, si el menú de navegación se encuentra en el marco izquierdo y desea que el material vinculado aparezca el marco de contenido principal, deberá utilizar destinos para todos los vínculos del menú de navegación. El destino tendrá el nombre del marco de contenido principal, por ejemplo, marco_principal. Cuando el usuario haga clic en un vínculo de navegación, el contenido se abrirá en el marco principal.

Si desea seleccionar un marco para abrir un archivo en él, deberá utilizar el menú emergente Destino en el inspector de propiedades. Puede establecer la apertura de un archivo en un nuevo marco, sustituir información en el marco del vínculo o sustituir información en otro marco. También puede hacer que el contenido vinculado sobrescriba el marco actual (para ello, no seleccione un destino) o que aparezca en una ventana de navegador totalmente nueva.

 


Cuestionario 5

 

1.- Definición de plantilla

 

 

 

 

 

2.- Procedimiento para un panel de plantillas

 

 

 

 

3.- definición de marco (frame)

 

 

 

 

4.- Procedimiento para ver el panel de marcos (frames)

 

www.icam.com.mx

 

 


MACROMEDIA DREAMWEAVER MX

CAPITULO 6

Al final del capítulo el alumno será capaz de...

Utilizar el panel de comportamiento

 

Insertar sonido

 

Insertar video

 

Insertar un mail link

 

Comprueba tu avance y marca con una P los objetivos alcanzados

 


13 COMPORTAMIENTO PANEL BEHAVIORS

 

 

Los comportamientos permiten a los visitantes interactuar con la página Web para modificarla de diversas maneras o provocar la realización de determinadas tareas. Un comportamiento es una combinación de un evento con una acción que desencadena ese evento. En el panel Comportamientos, un comportamiento se añade a una página especificando una acción y especificando luego el evento que desencadena esa acción.

Los eventos son mensajes generados por los navegadores que indican que un visitante de la página ha hecho algo. Por ejemplo, cuando un visitante mueve el puntero sobre un vínculo, el navegador genera un evento onMouseOver para ese vínculo; y luego comprueba si hay código JavaScript al que deba llamar cuando se genera ese evento para ese vínculo. Los diferentes elementos de la página tienen definidos diferentes eventos; por ejemplo, en la mayoría de los navegadores onMouseOver y onClick son eventos asociados con vínculos, en donde onLoad es un evento asociado con imágenes y con la sección body del documento.

Las acciones constan de código JavaScript ya definido que realiza una tarea específica, como abrir la ventana de un navegador, mostrar u ocultar una capa, reproducir un sonido o detener una película Shockwave. Las acciones incorporadas en Dreamweaver han sido cuidadosamente desarrolladas por los ingenieros de Dreamweaver para proporcionar la máxima compatibilidad con los distintos navegadores

 

13.1 SONIDO (MP3, WAV, MIDI)

 

 

Hay varios tipos de archivos y formatos de sonido, y varias formas de añadir sonido a una página Web. Los factores que hay que tener en cuenta antes de optar por un formato y un método para añadir sonido son: su finalidad, el tipo de usuarios a los que está destinado, el tamaño de archivo, la calidad de sonido y las diferencias en los navegadores.

Formatos de archivo de audio

La lista siguiente describe los formatos de archivo de audio más común, junto con algunas de sus ventajas y desventajas en relación con el diseño Web.

El formato .midi o .mid (Interfaz Digital para Instrumentos Musicales) es un formato de música instrumental. Muchos navegadores reconocen los archivos MIDI y, por tanto, no requieren un plug-in. Si bien su calidad de sonido es muy alta, puede variar según la tarjeta de sonido del usuario. Un pequeño archivo MIDI puede proporcionar un clip de sonido de larga duración. Los archivos MIDI no se pueden grabar y deben sintetizarse en un ordenador con hardware y software especiales.

Los archivos de formato .wav (Extensión de Formas de Onda) ofrecen una buena calidad de sonido, son compatibles con muchos navegadores y no requieren un plug-in. Puede grabar sus propios archivos WAV desde un CD, una cinta, el micrófono, etc. Sin embargo, el gran tamaño de archivo limita considerablemente la duración de los clips de sonido que se pueden utilizar en las páginas Web.

El formato .aif (Formato de Archivo de Intercambio de Audio o AIFF), al igual que el formato WAV, ofrece buena calidad de sonido, se puede reproducir en la mayoría de los navegadores y no requiere un plug-in. También se pueden grabar archivos AIFF desde un CD, una cinta, el micrófono, etc. Sin embargo, el gran tamaño de archivo limita considerablemente la duración de los clips de sonido que se pueden utilizar en las páginas Web.

El formato .mp3 (Audio del Grupo de Expertos en Imágenes en Movimiento o MPEG-Audio Nivel-3) es un formato comprimido que reduce considerablemente el tamaño de los archivos de sonido. La calidad de sonido es excelente: si se graba y comprime correctamente un archivo MP3, su calidad es equiparable a la de un CD. La nueva tecnología permite reproducir el archivo en flujo (streaming) de modo que el visitante no tenga que esperar a que se descargue todo el archivo para escucharlo. Sin embargo, el tamaño de archivo es mayor que el de Real Audio, por lo que una canción entera puede tardar bastante en descargarse a través de una conexión telefónica normal. Para reproducir archivos MP3, los visitantes deberán descargar e instalar una aplicación auxiliar o un plug-in como QuickTime, Windows Media Player o RealPlayer.

El formato .ra, .ram, .rpm o Real Audio tiene un alto grado de compresión con tamaños de archivo más pequeños que MP3. Permite descargar archivos de canciones completas en un período de tiempo razonable. Dado que los archivos se pueden reproducir en flujo desde un servidor Web normal, los visitantes pueden comenzar a escuchar el sonido antes de que el archivo se haya descargado por completo. La calidad de sonido es más pobre que la de los archivos MP3, aunque los nuevos reproductores y codificadores la mejoran considerablemente. Los visitantes deberán descargar e instalar la aplicación auxiliar o plug-in RealPlayer para reproducir estos archivos.

El establecimiento de vínculos con archivos de audio es una forma sencilla y efectiva de añadir sonido a una página Web. Este método de incorporar archivos de sonido permite a los visitantes optar por escuchar el archivo, y hace que el archivo esté disponible para un mayor número de usuarios. Algunos navegadores no admiten los archivos de sonido incrustados.
Para establecer un vínculo con un archivo de audio:
1 Seleccione el texto o la imagen que desea usar como vínculo con el archivo de audio.

2 En el panel de properties, haga clic en el icono de carpeta para acceder al archivo de audio o escriba la ruta y el nombre del archivo en el campo Vínculo.
Al incrustar audio se incorpora el reproductor de sonido directamente en la página, pero el sonido sólo se reproduce si los visitantes del sitio disponen del plug-in adecuado para el archivo de sonido elegido. Incruste archivos si desea utilizar el sonido como música de fondo o si desea obtener un mayor control sobre la presentación de sonido. Por ejemplo, puede establecer el volumen, la apariencia del reproductor en la página y los puntos inicial y final del archivo de sonido.

Para incrustar un archivo de audio:

1 En la vista de Diseño, sitúe el punto de inserción en el lugar donde desea incrustar el archivo.

 

 

2 Haga clic en el botón Plug-in del panel Objetos o elija Insert > Media > Plugin.

Para obtener más información sobre el objeto Plug-in.

3 En el inspector de propiedades, haga clic en el icono de carpeta para acceder al archivo de audio o escriba la ruta y el nombre del archivo en el campo Vínculo.

4 Especifique el ancho y el alto introduciendo los valores en los campos correspondientes o cambiando el tamaño del marcador de posición del plug-in en la ventana de documento.

Estos valores determinan con qué tamaño se muestran los controles de audio en el navegador. Por ejemplo, pruebe con un ancho de 144 píxeles y un alto de 60 para ver cómo aparece el reproductor de audio en Navigator y en Internet Explorer.

 

13.2 VIDEO

 

Videos Shockwave, el estándar de Macromedia para multimedia interactivo en la Web, es un formato comprimido que permite la descarga rápida de los archivos de medios creados en Macromedia Director y su reproducción en los navegadores de uso más frecuente.

El software que reproduce las películas Shockwave está disponible como plug-in para Netscape Navigator y en formato de control ActiveX. Cuando se inserta una película Shockwave, Dreamweaver usa tanto la etiqueta object (para el control ActiveX) como la etiqueta embed (para el plug-in) para conseguir los mejores resultados en todos los navegadores. Al realizar cambios relativos a la película en el inspector de propiedades, Dreamweaver adapta los datos introducidos a los parámetros correspondientes para las etiquetas object y embed.
Para insertar una película Shockwave:

 

1 En la vista de Diseño de la ventana de documento, sitúe el punto de inserción en el lugar donde desea insertar una película Shockwave.
2 Haga clic en el botón Shockwave del panel properties o elija Insert > Media > Shockwave o arrastre el botón Shockwave sobre el documento.

3 En el cuadro de diálogo que aparece, seleccione un archivo de película.

4 En el panel de properties, introduzca el ancho y el alto de la película en los cuadros W  y H . El panel de properties muestra inicialmente las propiedades utilizadas con mayor frecuencia. Haga clic en la flecha de ampliación, situada en la esquina inferior derecha, para ver todas las propiedades.
Nombre especifica un nombre para identificar una película en las secuencias de comandos. Introduzca un nombre en el campo sin título que aparece a la izquierda del inspector de propiedades.

W y H especifican el ancho y el alto de la película en píxeles. También se pueden emplear las siguientes unidades: pc (picas), pt (puntos), in (pulgadas), mm (milímetros), cm (centímetros) o % (porcentaje del ancho o el alto del objeto padre). Las abreviaturas deben seguir al valor sin espacio de separación: por ejemplo, 3mm.

File especifica la ruta del archivo de la película Shockwave. Haga clic en el icono de carpeta para localizar un archivo o escriba la ruta correspondiente.
Align determina cómo se alineará la película en la página. Para obtener una descripción de cada opción.

bg especifica un color de fondo para la zona de la película. Este color también aparecerá cuando la película no se esté reproduciendo (mientras se carga y después de haberse reproducido).

Reproducir permite previsualizar la película en la vista de Diseño de la ventana de documento. Haga clic en el botón Detener para interrumpir la película y volver al marcador de posición de Shockwave.

Parámetros abre un cuadro de diálogo para introducir parámetros adicionales que se transferirán a la película Shockwave. La película Shockwave deberá estar diseñada para recibir estos parámetros.

ID define el parámetro opcional ID ActiveX. El uso más frecuente de este parámetro es la transmisión de información entre controles ActiveX.

W space y H space especifican el número de píxeles de espacio en blanco que habrá por encima, por debajo y a ambos lados de la película.

 

 

 

14 CORREO ELECTRONICO

 

 

 Correo electrónico Cuando el usuario hace clic en un vínculo de correo electrónico se abre una ventana de mensaje en blanco (utilizando el programa de correo asociado al navegador del usuario). En la ventana de mensaje de correo electrónico, el campo Para se rellena automáticamente con la dirección especificada en el vínculo.
Para crear un vínculo de correo electrónico utilizando el comando Insertar vínculo de correo electrónico:


1 En la vista de Diseño de la ventana de documento, sitúe el punto de inserción donde desea que aparezca el vínculo de correo electrónico o seleccione el texto que desea mostrar como vínculo de correo electrónico. A continuación, lleve a cabo una de estas operaciones:

Elija Insert >email link

.
En la categoría Common del panel insert, el boton de email link.


2 En el campo Text del cuadro de diálogo Insertar vínculo de correo electrónico, escriba o edite el texto que desea mostrar en el documento como vínculo de correo electrónico.

3 En el campo email, escriba la dirección a la que se deberá enviar el correo electrónico.


4 Haga clic en OK.

 

 

 

 

 

 

 

 

 

 

 

 

Cuestionario  6

 

1.- Definición de comportamiento

 

 

 

2.- Lenguaje en que se generan los comportamientos

 

 

 

3.- Formatos de sonidos que soporta Dreamweaver

 

 

4.- Formatos de video que soporta Dreamweaver

 

 

5.- Instrucción que genera un Hipervínculo de correo electronico

 

www.icam.com.mx

 

 


MACROMEDIA DREAMWEAVER MX

CAPITULO 7

Al final del capítulo el alumno será capaz de...

Conocer que es una base de datos

 

Crear una base de datos

 

Conocer que es una tabla

 

Conocer que es un campo

 

Conocer tipo de conexión

 

Conectar una base de datos

 

Visualizar registros

 

Filtrar registros

 

Utilizar los recordset insertion

 

Utilizar recordset update form

 

Crear una pagina de detalle maestro

 

Crear un repeat region

 

Crear paginas de login confirm

 

Crear paginas de restring page

 

Crear redirection page

 

Comprueba tu avance y marca con una P  los objetivos alcanzados

 


 

1 BASE DE DATOS (APLICATION)

 

Una base de datos es un conjunto de información relacionada con un asunto o con una finalidad. En Access, una base de datos es un archivo que puede contener tablas donde se encuentra toda la información sobre un tema específico, consultas, formularios, informes entre otros. Tal como una colección de música, el control de alumnos en un colegio o un directorio telefónico.

 

 

2 CREAR UNA BASE DE DATOS EN ACCESS

 

 

Botón:         

Nuevo

 

 

 

 

 

 
Microsoft Access proporciona dos métodos para crear una base de datos de Access, Utilizando el Asistente para Base de datos, o bien, puede crear una base de datos en blanco y, posteriormente, agregar las tablas, formularios, informes y demás objetos que desee; éste es el método más flexible, pero requiere definir por separado cada elemento de la base de datos. Cualquiera que sea el método elegido, puede modificar y ampliar la base de datos en cualquier momento posterior a su creación.

Para crear una base de datos en blanco existen los siguientes  métodos:

1.      Menú Archivo / Nuevo…

2.      Hacer clic sobre la opción Base de datos en blanco del panel de tareas que aparece a la derecha de la pantalla.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3 CONCEPTO DE UNA BASE DE DATOS

 

 

El componente básico de la base de datos es el registro. Un registro es un conjunto de datos relacionados que se tratan como una sola entidad. Por ejemplo, un tarjeta de fútbol podría considerarse un registro: contiene el nombre, la fotografía, el equipo y las estadísticas de un jugador. Empleando la terminología propia de las bases de datos, cada uno de esos elementos de información recibiría el nombre de campo: cada "registro" de tarjeta de fútbol tiene un campo nombre, un campo fotografía, un campo equipo y varios campos de estadísticas.

Al juego de registros que comparten los mismos campos se le llama tabla, porque este tipo de información puede presentarse fácilmente en formato de tabla: cada columna representa un campo y cada fila representa un registro. De hecho, la palabra columna es sinónimo de la palabra campo, y la palabra fila es sinónimo de la palabra registro.

 Una base de datos puede contener más de una tabla, cada una de las cuales tiene un nombre exclusivo. Estas tablas pueden estar relacionadas o ser independientes entre sí.

Un subconjunto de datos extraídos de una o más tablas recibe el nombre de juego de registros. Un juego de registros también es una tabla porque es una colección de registros que comparte las mismas columnas. Por ejemplo, una alineación de un equipo de fútbol en la que se relacionan los nombres y las posiciones de los jugadores en el campo sería un juego de registros: consta de un subconjunto de toda la información posible sobre los jugadores, incluidos los goles las asistencias, las faltas, etc.

 

 

 

 

 

 

 

 

 

4 TABLA

 

 

 

 

Para crear un juego de registros, se realiza una consulta de base de datos. Una consulta consta de criterios de búsqueda. Por ejemplo, la consulta puede especificar que sólo se incluyan algunas de las columnas en el juego de registros, o que sólo se incluyan determinados registros.

Las tablas se componen de filas y columnas de celdas que se pueden rellenar con texto y gráficos. Las tablas se utilizan a menudo para organizar y presentar información. Resulta útil saber cómo se denominan las diversas partes de una tabla.  Columna, Fila, Celda.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

5 CAMPOS

 

Los campos o columnas de una Tabla identifican el tipo de dato que se almacenara en dicha posición, asi como el nombre de este.

REGISTRO

Conforma toda la información correspondiente a las filas de esa tabla.

 

 

 

6 CONFIGURACION DE SITIO

 

 

A continuación se describe la configuración de sistema más sencilla para usuarios de Windows.

Para configurar el sistema:

 

1 Si es usted usuario de Windows 95, 98 o NT Workstation, instale Microsoft Personal Web Server (PWS).

2 Si es usted usuario de Windows NT Server o Windows 2000, asegúrese de que Internet Information Server (IIS) está instalado y en ejecución en su sistema.

IIS es la versión completa de PWS. Ya debe estar instalado en su sistema. Si no lo está, instálelo o solicite al administrador del sistema que se lo instale.

3 Si desea realizar el curso práctico para ColdFusion, instale ColdFusion Server en el sistema.

Para obtener instrucciones.

4 Si desea realizar el curso práctico para JSP, instale los siguientes componentes en el sistema.

Java 2 SDK, Standard Edition, para Windows

El controlador JDBC-ODBC Bridge de Sun se instala automáticamente al instalar SDK.

Un servidor de aplicaciones que tenga implementada la especificación JavaServer Pages 1.0 de Sun.

5 Cree una subcarpeta en la carpeta c:\Inetpub\wwwroot y llámela MyTutorialSite.

Esta es la estructura de carpetas correcta:

c:\Inetpub\wwwroot\MyTutorialSite

 

 

 

 

 

7 SITIO LOCAL

 

Para configurar sitio local  Dreamweaver MX:

1.- elija la opcion de site> new site

2.- en el cuadro de dialogo especifique el nombre del sitio

name: nombre del sitio

local root fólder: ruta de acceso a los archivo, donde se guardaran todos los archivo

3.- oprima el icono con forma de fólder para especificar la ruta una vez seleccionada la carpeta presione guardar.

Nos regresara al sitio donde empezamos solo hay que presionar OK.

 

8 SITIO REMOTO

 

Para configurar sitio remoto Dreamweaver MX:

1 Inicie Dreamweaver y elija Site > New Site. Aparecerá el cuadro de diálogo Definir sitios.

2 Seleccione el sitio del curso práctico ASP, ColdFusion o JSP predefinido y haga clic en Editar.MX definió los sitios del curso práctico durante la instalación.

3 Haga clic en Datos remotos y complete el cuadro de diálogo de la siguiente forma: Acceso: Local/Network Carpeta remota: c:\Inetpub\wwwroot\MyTutorialSite

4 Si desea realizar el curso práctico de ASP, haga clic en Servidor de aplicaciones y complete el cuadro de diálogo de la siguiente forma: Modelo de servidor: ASP 2.0. Lenguaje de secuencia de comandos: VBScript o JavaScript Extensión de página: .asp Acceso: Local/Network Carpeta remota: c:\Inetpub\wwwroot\MyTutorialSite
Prefijo de URL: http://localhost/MyTutorialSite. La base de datos del curso práctico es un archivo de Microsoft Access 97. No es necesario Microsoft Access para realizar el curso práctico, aunque sí necesita un controlador capaz de leer archivos de Microsoft Access 97. El controlador permite a la aplicación Web leer el contenido del archivo de base de datos. (Para ampliar conocimientos sobre controladores de bases de datos.

Si es usted ingeniero de desarrollo de ASP o ColdFusion, deberá tener instalado un controlador ODBC capaz de leer archivos de Access 97 en el servidor ASP o ColdFusion. Si su servidor Web se ejecuta en un sistema Windows remoto o local, es probable que el controlador necesario ya esté instalado. Para averiguar si lo está, elija Inicio > Configuración > Panel de control en Windows y busque el icono de ODBC Data Sources. (En función del sistema, el icono también puede denominarse ODBC o 32bit ODBC.) Si no encuentra el icono, descargue e instale Microsoft Data Access Components (MDAC) 2.5, que instalará el controlador de Access. Si el icono ODBC Data Sources está presente en el Panel de control, haga doble clic en él. Aparecerá el cuadro de diálogo ODBC Data Sources Administrator. Haga clic en la ficha Drivers para obtener una lista de controladores instalados en el sistema. Busque el controlador Microsoft Access Driver, versión 3.5 o posterior. Si el controlador Microsoft Access Driver (*.mdb) no aparece en la lista, descargue e instale MDAC, que instalará el correspondiente controlador de Access. Antes de comenzar a crear el directorio de empleados de Compass, deberá crear una conexión con el archivo de base de datos del curso práctico, compasstravel.mdb.

Si ha instalado Dreamweaver en un sistema Windows, durante la instalación se estableció en el sistema un DSN para la base de datos del curso práctico. Deberá utilizar dicho DSN si ejecuta también el servidor Web en el mismo sistema (es decir, si utiliza Personal Web Server en Windows o si instaló Dreamweaver en Windows NT Server o Windows 2000).

Si el servidor Web se ejecuta en un sistema Windows remoto, puede definir un nombre de fuente de datos (DSN) en el servidor remoto y luego utilizar dicho DSN en Dreamweaver para crear una conexión de base de datos sencilla. Un DSN es una especie de acceso directo a una base de datos. Para obtener instrucciones sobre cómo definir uno.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

9 TIPOS DE CONEXIÓN DE BD.

 

 

 

 

 

Si no se ha definido ningún DSN en el sistema que ejecuta el servidor Web, deberá utilizar una cadena de conexión para crear la conexión.

Para crear una conexión de base de datos en el caso de que se haya definido un DSN en el servidor Web:

1 en el panel de insert haga clic en la pestaña de application y de un clic en el boton que dice recordset aparecerá el cuadro de diálogo de  Conexiones.

2 Haga clic en define…  Nombre de fuente de datos (DSN) del menú emergente.

Aparecerá el cuadro de diálogo Nombre de fuente de datos (DSN). En caso de no parecer la ventana emergente haga clic en new.

 

3 En el cuadro Nombre de conexión, introduzca connCompass.

Una práctica habitual consiste en añadir el prefijo conn a los nombres de conexiones para distinguirlos de los nombres de objetos en el código.

4 Si el servidor de aplicaciones se ejecuta en el equipo local, seleccione CompassTravel de la lista de DSN, y haga clic en ok.

5 Si el servidor de aplicaciones se ejecuta en un equipo remoto, introduzca CompassTravel en el cuadro Nombre de fuente de datos (DSN).

6 Haga clic en Done para finalizar la definición de la conexión.

La nueva conexión, con Compass, aparecerá en el cuadro de diálogo Conexiones.

7 Haga clic en ok  para cerrar el cuadro de diálogo Conexiones.

10 CONEXIÓN A LA BASE DE DATOS

 

 

Para crear una conexión de base de datos para el curso práctico ASP:

1 En Dreamweaver, elija Conexiones del panel insert en la pestaña application.

Aparecerá el cuadro de diálogo Conexiones.

 

2 Haga clic en el botón Define… y seleccione Nombre de fuente de datos (DSN) del menú emergente.

Aparecerá el cuadro de diálogo Nombre de fuente de datos (DSN). En caso de no aparecer el cuadro de las opciones de clic en botón que New, y del menú que aparece de clic en DARA SOURCE NAME (DSN)

3 Introduzca el siguiente nombre para la nueva conexión: connCompass.

Una práctica habitual consiste en añadir el prefijo conn a los nombres de conexiones para distinguirlos de los nombres de objetos en el código.

4 Seleccione CompassTravel de la lista de DSN. Si aparece escríbala tal cual.

Dreamweaver creó el DSN CompassTravel durante la instalación.

5 Haga clic en Test.

Dreamweaver intentará conectar con la base de datos. Si falla la conexión, compruebe de nuevo el DSN. Si la conexión continúa fallando, compruebe el prefijo de URL del servidor de aplicaciones.

Presione OK

 

6 Haga clic en Done.

La nueva conexión debe aparecer en el cuadro de diálogo Conexiones.

7 Haga clic en OK para cerrar el cuadro de diálogo Conexiones. Un sitio local indica a Dreamweaver el lugar en el que están almacenados todos los documentos y archivos de un sitio Web concreto en el disco local. Debe definir un sitio local para desarrollar una aplicación Web utilizando Dreamweaver.
Puede utilizar Dreamweaver para desplegar la aplicación en un servidor Web mediante la definición de un sitio remoto. Un sitio remoto indica a Dreamweaver el lugar en el que están almacenados todos los documentos y archivos del sitio Web en el servidor Web.

 
Para definir un sitio remoto, realice las siguientes tareas:

Defina una carpeta publicada en el servidor Web.

Defina la carpeta del sitio remoto en Dreamweaver.

 

 

 

 

 

11 VISUALIZAR REGISTROS

 

Un juego de registros es un subconjunto de datos extraídos de una o varias tablas de una base de datos. Actúa a modo de fuente de datos para las páginas dinámicas. Deberá definir un juego de registros que contenga sólo los registros devueltos por la búsqueda. En el caso de un conjunto simple de páginas de búsqueda/resultados, puede crear este tipo de juego de registros definiendo un filtro.

 
Deberá comenzar definiendo el contorno general del juego de registros.
1 En el menú Site> Site file, haga doble clic en el archivo connection situado bajo Carpeta local.


Se abrirá en Dreamweaver la página de resultados simple para el directorio de empleados de Compass.

2 En el panel Vinculaciones de datos,  haga clic en el botón de signo más (+) y seleccione Recordset (Query (consulta) del menú emergente. Aparecerá el cuadro de diálogo Juego de registros simple.

3 En el cuadro Nombre, introduzca Results. Este es el nombre del juego de registros. No lo confunda con el nombre de archivo de la página. En este caso, se trata del mismo nombre.

4 Seleccione la conexión connCompass del menú emergente Conexión.
Si no aparece en el menú, haga clic en el botón Define… para crearla.

5 En el menú emergente Tabla, seleccione EMPLOYEES.

6 En el área Columnas, haga clic en la opción Seleccionado para elegir las columnas seleccionadas de la table EMPLOYEES.

7 Presione Control (Windows) en las siguientes columnas de la lista para incluirlas en el juego de registros: EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT y EXTENSION. La página de resultados muestra información de cuatro de estas columnas. Debe incluir la columna EMPLOYEEID porque contiene información que identifica a cada registro individual (información que será útil más adelante cuando cree una página de detalle).

8 Haga clic en Prueba para comprobar el juego de registros.  Aparecerá un juego de registros con datos extraídos de la tabla de la base de datos. Haga clic en Aceptar para cerrarlo.

 

De forma predeterminada, el juego de registros contiene todos los registros de la tabla de la base de datos. Deje abierto por ahora el cuadro de diálogo Juego de registros. Lo utilizará a continuación para crear un filtro que elimine todos los registros que no cumplan los criterios de búsqueda

9 Haga clic en Ok.

Dreamweaver añade el juego de registros a la lista de fuentes de datos disponibles en el panel Vinculaciones de datos. Para ver los campos definidos para el juego de registros, amplíe la rama del juego de registros.

 

10 Arrastre cada uno de los campos hacia el area de la pagina

 

11 Guarde el trabajo (File > Save).

 

12 FILTRAR REGISTROS

 

para filtrar registros solo arrastre los campos a la hoja y listo

 

13 RECORDSET NAVIGATION BAR

 

La página de resultados debe permitir a los usuarios desplazarse hacia delante y hacia atrás por la lista de resultados si la búsqueda devuelve más de cinco registros. La página del curso práctico incluye las imágenes "Previous" (anterior) y "Next" (siguiente) para este fin. Su trabajo consiste en activar estas imágenes de forma que, cuando el usuario haga clic en ellas, la página muestre más resultados (en el caso de que existan).

 

 

1 Seleccione la imagen "Previous" en la página.

 

2 En el panel server behaviors, haga clic en el botón de signo más (+) y seleccione Recordset paging > move to previous recordset.

Aparecerá el cuadro de diálogo Move to previous recordset.

 

3 En el menú emergente Juego de registros, asegúrese de que está seleccionado el juego de registros de resultados y haga clic en OK.

4 Repita el procedimiento para la imagen "Next", con la diferencia de que, en esta ocasión, deberá seleccionar Move to next recordset

5 Guarde el trabajo (File > Save).

Si comete algún error, abra el panel Comportamientos del servidor y haga clic en el botón de signo menos (-) para borrarlo.

Si es probable que las búsquedas generen gran cantidad de resultados, puede añadir un contador de registros a la página para ayudar a los usuarios a conocer el lugar en el que se encuentran dentro del juego de registros.

 

14 RECORDSET INSERTION FORMS

 

La categoría de Forms del panel Insert contiene botones que permiten crear formularios e insertar elementos de formulario.

Los formularios son simplemente contenedores de elementos de formulario; los límites del formulario no son visibles en la ventana de documento a menos que se seleccione View > visual aids> invisible elements.

Coloque el punto de inserción dentro de los límites del formulario antes de insertar el elemento de formulario; los elementos de formulario situados fuera de las etiquetas form no aparecen en todos los navegadores. Si intenta insertar un elemento fuera del formulario, un cuadro de diálogo le preguntará si desea añadir una etiqueta de formulario alrededor de dicho elemento. Haga clic en Sí para crear un formulario que contenga el elemento o en No para insertar el elemento sin formulario.

 

Form coloca un formulario en el punto de inserción.
Tex Field coloca un campo de texto en el punto de inserción. Establezca el nombre, el tamaño y el valor inicial en el inspector de propiedades.

Buttón coloca en el punto de inserción un botón con
Submit como valor predeterminado de las etiquetas name y vaule. Coloque el punto de inserción dentro de los límites del formulario antes de insertar el botón; los botones situados fuera del formulario no aparecen en todos los navegadores. Utilice el inspector de propiedades para establecer el nombre, la etiqueta y la acción.

Check box coloca una casilla de verificación en el punto de inserción. Establezca el nombre, el valor de activación y el estado inicial en el inspector de propiedades.

Radio button coloca un botón de opción en el punto de inserción. Establezca el nombre, el valor de activación y el estado inicial en el inspector de propiedades.

List menu coloca una lista o menú emergente en el punto de inserción. Establezca el nombre, el tipo y los valores iniciales en el inspector de propiedades.

File field coloca un campo de archivo en el punto de inserción. Establezca el nombre, el tamaño y el valor inicial en el inspector de propiedades. Consulte Permitir a los visitantes que carguen un archivo en su servidor.

Image field coloca un campo de imagen en el punto de inserción. Establezca el nombre, el tamaño, el texto alternativo y el archivo de origen en el inspector de propiedades.

Hidden field coloca un campo oculto en el punto de inserción. Establezca el nombre y el valor en el inspector de propiedades.



Jump menu coloca un menú emergente de URL en el punto de inserción. Al elegir un valor de este menú, el usuario se traslada al URL. Establezca los valores de la lista en el cuadro de diálogo que aparece.

 

 

15 DELETE RECORDSET

 

El siguiente paso consiste en añadir el comportamiento de servidor Borrar registro para actualizar la tabla de la base de datos cuando el usuario haga clic en el botón Submit.

Para añadir un comportamiento de servidor para borrar la tabla de la base de datos.

1 En el panel applcation,haga clic en la pestaña de server behaviors, haga clic en el botón de signo más (+) y seleccione Actualizar registro en el menú emergente. Seleccione delete record. Aparecerá el cuadro de diálogo Borrar registro.

2 Utilice los menús contextuales connection y delete from table para especificar la tabla de la base de datos que contiene los registros que se van a borrar.

 

3 En el menú emergente select record from, especifique el juego de registros que contiene el registro que se va a borrar.

 

4 En el menú emergente unique key column, seleccione una columna de clave (generalmente, la columna ID del registro) para identificar el registro de la tabla de la base de datos.

Si el valor es un número, seleccione la opción Numérico. Generalmente, las columnas de clave sólo admiten valores numéricos, pero también pueden aceptar valores de texto.

 

5 En el cuadro after deleting go to, introduzca la página que se debe abrir después de borrar el registro de la tabla.

 

6 En el menú emergente deleting by submitting, especifique el formulario HTML que contiene el botón Submit que envía el comando de borrado al servidor.

Dreamweaver elegirá automáticamente el primer formulario de la página.

7 Haga clic en Ok.

 

16 RECORDSET UPDATE FORM

 

 

 

Para añadir un comportamiento de servidor para actualizar la tabla de la base de datos.


1
En el panel Server behaviors , haga clic en el botón de signo más (+) y seleccione update record en el menú emergente.

Aparecerá el cuadro de diálogo Actualizar registro.

 

2 Utilice los menús contextuales Connectón y Table to update para especificar la tabla de la base de datos que contiene los registros que se van a actualizar.

 

3 En el menú emergente selecc record from, especifique el juego de registros que contiene el registro que aparece en el formulario HTML.

 

4 En el menú emergente unique key column, seleccione una columna de clave (generalmente, la columna ID del registro) para identificar el registro de la tabla de la base de datos.

Seleccione la opción Numérico si el valor es un número. Generalmente, las columnas de clave sólo admiten valores numéricos, pero también pueden aceptar valores de texto.

 

5 En el cuadro after updating to go, introduzca la página que se debe abrir después de actualizar el registro de la tabla.

 

 

6 En el menú emergente get value from, elija el formulario HTML utilizado para editar los datos del registro.

UltraDev elegirá automáticamente el primer formulario de la página.

 

7 Especifique el campo de la tabla de la base de datos que actualizará cada objeto del formulario. Para ello, seleccione un objeto de formulario en la lista Elementos de formulario y elija una columna de la tabla en el menú emergente Columna y el tipo de datos correspondiente en el menú emergente submit as.

El tipo de datos indica la clase de datos que espera recibir la columna de la tabla de la base de datos (texto, numérico, valores booleanos de casilla de verificación). Por ejemplo, si la columna de la tabla sólo acepta valores numéricos, elija Numérico en el menú emergente submit as.

Dicho menú incluye dos tipos de datos de Fecha. Seleccione el tipo de datos Fecha MS Access para las bases de datos Microsoft Access y el tipo Fecha para cualquier otra base de datos.

Repita el mismo procedimiento para cada objeto de formulario de la lista Elementos de formulario.

8 Haga clic en OK.

 

 

17 BUSQUEDA DE REGISTRO (QUERY ADAVANCED)

 

Búsqueda de registros

Crear la página de búsqueda

 
Una página de búsqueda en la Web normalmente contiene campos de formulario en los que los usuarios introducen parámetros de búsqueda. Cuando el usuario hace clic en el botón Buscar del formulario, se envían los parámetros de búsqueda a la página de resultados residente en el servidor. La página de resultados residente en el servidor, no la página de búsqueda del navegador, es la responsable de recuperar los registros de la base de datos.

Para comenzar con esta parte de la aplicación Web, cree dos páginas: una página de búsqueda que permita a los usuarios introducir parámetros de búsqueda y una página de resultados para mostrar los registros encontrados. Puede incluso combinar las dos páginas en una sola. Como mínimo, la página de búsqueda debe incluir un formulario HTML con un botón Enviar.
Para añadir un formulario HTML a una página de búsqueda:

 

 

 

1 Abra la página de búsqueda y seleccione Forms del panel insert de clic en en el objeto form.

Se creará un formulario vacío en la página. Es posible que tenga que activar los Elementos invisibles (View > visual aids > invisible elements) para ver los límites del formulario, que se representan mediante líneas delgadas de color rojo.

 

2 Añada objetos de formulario para que los usuarios introduzcan sus parámetros de búsqueda eligiendo Objetos de formulario del menú Insertar.

Entre los objetos de formulario figuran los campos de texto, los menús de listas, las casillas de verificación y los botones de opción. Puede añadir tantos objetos de formulario como desee para ayudar a los usuarios a definir búsquedas precisas. No obstante, recuerde que cuanto mayor sea el número de parámetros de búsqueda de la página de búsqueda, más compleja será la declaración SQL.

Para obtener más información sobre el inspector, consulte "Crear formularios", de Utilización de Dreamweaver o la Ayuda de Dreamweaver (help >using  Dreamweaver).

 

3 Añada al formulario un botón Enviar (Insert > forms > Button).

 

4 Si lo desea, puede cambiar la etiqueta del botón Enviar seleccionando el botón, abriendo el panel de properties (Windows > Properties) e introduciendo un nuevo valor en el cuadro Etiqueta.

Por ejemplo, este es el inspector de propiedades de un botón con la etiqueta "buscar":

 

A continuación, deberá indicar al formulario el lugar al que debe enviar los parámetros de búsqueda cuando el usuario haga clic en el botón Submit.

 

5 Seleccione el formulario eligiendo la etiqueta <form> en el selector de etiquetas que se encuentra en la parte inferior de la ventana de documento, como se muestra en la imagen.

 

6 En el cuadro Acción del panel de properties del formulario, introduzca el nombre del archivo de la página de resultados que llevará a cabo la búsqueda en la base de datos.

 

7 En el menú emergente méthod, elija uno de los siguientes métodos para determinar cómo debe enviar los datos el formulario al servidor.

GET envía los datos del formulario añadiéndolos al URL como una cadena de consulta. Dado que los URL están limitados a 8.192 caracteres, no utilice el método GET con formularios largos.

 

POST envía los datos del formulario en el cuerpo de un mensaje.

Default usa el método predeterminado del navegador (generalmente, GET).

 Ya ha terminado la página de búsqueda. A continuación deberá crear la página de resultados.

Una vez que el usuario introduzca los parámetros de búsqueda, la aplicación deberá recuperar los registros de la base de datos. Esta tarea la realiza la página de resultados.
Estas son las tareas que realiza una página de resultados:
Obtiene los parámetros de búsqueda de la página de búsqueda.

Conecta con la base de datos y busca registros.

Crea un juego de registros a partir de los registros encontrados.

Muestra el contenido del juego de registros.

Si la página de resultados sólo tiene un parámetro de búsqueda (un solo campo de texto, por ejemplo), podrá crear la página de resultados sin consultas ni variables SQL. Lo único que tendrá que hacer es crear un juego de registros y después añadir un filtro para excluir registros que no cumplan las condiciones establecidas por los parámetros de búsqueda enviados por la página de búsqueda.

Si la página de búsqueda envía más de un parámetro de búsqueda al servidor, deberá escribir una consulta SQL para la página de resultados y utilizar los parámetros de búsqueda en las variables SQL.

Después de que Dreamweaver inserte la consulta SQL en la página y que se ejecute la página en el servidor, se comprueba cada registro de la tabla de la base de datos. Si el campo especificado en un registro cumple las condiciones de la consulta SQL, el registro se incluirá en un juego de registros. La consulta SQL crea un juego de registros que contiene solamente los resultados de la búsqueda.

Por ejemplo, el personal de ventas puede estar en condiciones de informar sobre qué clientes de un área determinada tienen ingresos superiores a un nivel concreto. En un formulario de una página de búsqueda, el asociado comercial introduce un área geográfica y un nivel de ingresos mínimo y luego hace clic en el botón Enviar para enviar los dos valores a un servidor. En el servidor, los valores se pasan a la declaración SQL de la página de resultados, que crea un juego de registros sólo con los clientes del área especificada con ingresos superiores al nivel especificado.

 

 

 

 

 

 

18 MASTER DETAIL PAGE SET

 

 

Una página maestra es una página en la que se listan los registros y los correspondientes vínculos de cada registro. Cuando el usuario hace clic en un vínculo, se abre una página detalle que muestra información adicional sobre el registro. Por ejemplo, a continuación se muestra una página maestra de un sitio de Intranet de una empresa ficticia:

Cuando un usuario hace clic en uno de los iconos de visualización vinculados, se abre una página detalle:

Una página de resultados es un ejemplo típico de página maestra. Sin embargo, a diferencia de la página maestra descrita en este tema, la lista de registros de una página de resultados la determina, no usted como diseñador, sino el usuario. (El usuario determina la lista mediante la realización de una búsqueda en la base de datos.) Para obtener más información sobre este tipo de página maestra.

Puede utilizarse una página detalle para actualizar o borrar el registro mostrado. Para obtener más información sobre la actualización y eliminación de páginas.

Una página maestra consta de los siguientes elementos:

Un juego de registros.

Una diagramación de página para mostrar múltiples registros.

Un comportamiento de servidor Ir a página Detalle para abrir la página detalle y pasar el ID del registro en el que ha hecho clic el usuario.
Una página detalle consta de los siguientes elementos:

Una diagramación de página para mostrar un único registro.

Un juego de registros que contengan los datos del registro.

Un filtro de juego de registros para recuperar un registro concreto de la tabla de la base de datos o un comportamiento de servidor Mover a un registro concreto para desplazarse a un registro concreto del juego de registros

Tras añadir un juego de registros a una página maestra vacía, puede completar el juego de páginas Maestro/Detalle en una sola operación utilizando el objeto Live Juego de páginas Maestro/Detalle. El objeto Live añade los siguientes elementos a la página maestra:

Una tabla básica con una región repetida para mostrar múltiples registros.

Una barra de navegación por el juego de registros.

Un contador de registros.

Un comportamiento de servidor Ir a página Detalle para abrir la página detalle y pasar el ID del registro en el que ha hecho clic el usuario.

El objeto Live también crea una página detalle si no la ha creado anteriormente y añade a ella los siguientes elementos:
Una tabla básica para mostrar un único registro.
Un juego de registros filtrado para localizar y mostrar el registro en el que el usuario ha hecho clic en la página maestra.

Después de que el objeto Live coloque los elementos mencionados en las páginas, podrá utilizar las herramientas de diseño de páginas de UltraDev para personalizar el diseño de las páginas o el panel Comportamientos del servidor para editar los comportamientos del servidor.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Para completar el juego de páginas Maestro/Detalle con un objeto Live:

 

 

 

1 Cree una página maestra vacía y añada a ella un juego de registros. Asegúrese de que el juego de registros contiene, no sólo todas las columnas necesarias para la página maestra, sino también todas las columnas necesarias para la página detalle.

 

2 Abra la página maestra en la vista de Diseño en el panel de insert  elija master detail page set.

Aparecerá el cuadro de diálogo Insertar juego de páginas Maestro/Detalle.

En el menú emergente recordset, asegúrese de que está elegido el juego de registros que contiene los registros que desea visualizar en la página maestra.

 

4 En el área Master page field, seleccione las columnas del juego de registros que deben visualizarse en la página maestra.

De forma predeterminada, Dreamwever selecciona todas las columnas del juego de registros. Si el juego de registros contiene una columna de clave exclusiva, como, por ejemplo, recordID, selecciónela y haga clic en el botón de signo menos (-) para que no aparezca en la página.

 

5 Si desea cambiar el orden en el que aparecen las columnas en la página maestra, seleccione una columna de la lista y haga clic en la flecha arriba o abajo.

En la página maestra, las columnas del juego de registros están dispuestas horizontalmente en una tabla. Al hacer clic en la flecha arriba, se desplaza la columna hacia la izquierda; al hacer clic en la flecha abajo, se desplaza la columna hacia la derecha.

 

6 En el menú emergente link to deatil from desde, elija la columna del juego de registros que mostrará un valor que también servirá como vínculo con la página detalle.

Por ejemplo, si desea que cada nombre de producto de la página maestra tenga un vínculo con la página detalle, elija la columna del juego de registros que contiene los nombres de los productos.

 

7 En el menú emergente pass unique key, elija la columna del juego de registros que contiene valores que identifican a los registros.

Normalmente, la columna elegida es la que contiene el número de ID. Este valor se pasa a la página detalle para que pueda identificar el registro elegido por el usuario.

 

8 Especifique el número de registros que deben mostrarse en la opción de show.

 

9 En el cuadro Detail page Name, haga clic en Browse… y localice el archivo de página detalle que ha creado o introduzca un nombre para que el objeto Live la cree automáticamente.

 

10 En el área Campos de página Detalle, seleccione las columnas que deben visualizarse en la página detalle.

De forma predeterminada, Dreamweaver selecciona todas las columnas del juego de registros de la página maestra. Si el juego de registros contiene una columna de clave exclusiva, como, por ejemplo, recordID, selecciónela y haga clic en el botón de signo menos (-) para que no aparezca en la página detalle.

 

11 Si desea cambiar el orden en el que aparecen las columnas en la página detalle, seleccione una columna de la lista y haga clic en la flecha arriba o abajo.

En la página detalle, las columnas del juego de registros están dispuestas verticalmente en una tabla. Al hacer clic en la flecha arriba, se desplaza la columna hacia arriba; al hacer clic en la flecha abajo, se desplaza la columna hacia abajo.

 

12 Haga clic en OK.

El objeto Live crea una página detalle (si no la ha creado usted antes) y añade contenido dinámico y comportamientos de servidor tanto a la página maestra como a la página detalle.

 

13 Personalice las páginas maestra y detalle para adaptarlas a sus necesidades.

Puede personalizar totalmente el diseño de ambas páginas utilizando las herramientas de diseño de páginas de Dreamweaver. También puede editar los comportamientos de servidor haciendo doble clic en ellos en el panel Comportamientos del servidor.

 

19 RECORDSET NAVIGATION STATUS

 

 El botón de recordset navigation status permite ver la posición actual de la página que tiene la base de datos.

Por ejemplo

1 de 1 de 10, nos dice que estamos en el primer registro de 10 que tenemos.

 

 

20 REPEAT REGION

 

 

La opción de repeat region permite especificar cuantas veces se repetirá la región seleccionada de una conexión de base de datos.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

21     LOGIN CONFIRM

 

 

 

 

Para establecer un login confirm deberá tener tres hojas en modo de vista diseño.

Para crear un login confirm siga las siguientes intrucciones

 

1.- realice su conexión a una base de datos (vease tipos de conexión)

2.- cree un formulario con las siguientes nombres

introdusca un form

dentro del form escriba usuario, inserte un textfield

de nuevo dentro del form escriba contraseña e introdusca un segundo textfield

inserte un button

3.- seleccione el textfield de la etiqueta de contraseña y en el panel de properties seleccione pasword.

4.- vaya al panel de server behaviors presione le signo (+) y de la lista desplegable seleccione user authentification > log in user aparecerá un cuadro de dialogo.

5.- verifique que los textfield apresan en forma odenada

6.- En el cuadro de Validate using connection presione la ventana desplegable para seleccionar la base de datos.

En el campo if login succeeds, go to especifica pagina que se abrirá en caso de que sea correcta la contraseña.

En campo de if login fails, go to:- especifica la pagina que se abrirá en caso de que la contraseña sea errónea.   

 

 

22     RESTRING PAGE

 

 

Una vez terminado de crear pagina del usuario, abra el documento de usuario o la pagina que va acceder el usuario en caso de que su contraseña sea correcta , en este documento lo vamos a restringir:

Para restringir el acceso a una página haga lo siguiente.

 

1.- abra el documento

2.- haga la conexión a la base de datos

3.- una vez hecha la conexión vaya al panel de  application y presione la pestaña que dice server behaviors

4.- presione el signo (+) del menú desplegable seleccione

authentification> Restrict acces to page,

en el cuadro de dialogo active la opción que dice Restrict based on.

5.- en el campo de if access denied, go ot.

Especifique la pagina que se abrirá.

 

 

 

 

 

 

 

 

 

 

23     REDIRECTION PAGE

 

 

puedes redireccionar una pagina pasado un tiempo con las etiquetas META.

ejemplo

 

<head>

<meta http-equiv=”refresh”content=”15;URL=www.ibm.com>

<title >pagina redireccionada a IBM a los 15 segundos <title>

</head>

 

 

 


Cuestionario 7

 

1.- Concepto de:

         Base de datos

         Tabla

         Campo

         Registro

 

 

 

 

 

 

2.- Definición de recordset

 

 

 

 

3.- Que es ODBC

 

 

 

 

4.- Utilería de Windows para configurar DNS de sistema

 

 

 

5.- Definición entre DNS de sistema y DNS de usuario

 

 

 

6.- Que significa SQL

 

 

 

7.- Que es un formulario

 

 

 

8.- Definición entre método POST  y GET