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
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. |
2.2
SITIO REMOTO
|
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
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 |
|
Para abrir un archivo
HTML existente, lleve a cabo una de estas operaciones:
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. 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
Presione ctrl. + j para abrir las propiedades de la
pagina 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: 2 Abra el panel de properties (Windows
> properties) y lleve a cabo una de estas operaciones:
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.
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. 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
|
|
|
Para
insertar una imagen: 1 Lleve a cabo una de estas
operaciones:
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
|
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. 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:
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:
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. Un
elemento de navigation bar puede tener cuatro estados:
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:
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:
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
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 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:
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. |
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
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.
|
|
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 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 ·
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 La
sección 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
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. 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.
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. 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:
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 eliminar un Frame Arrastre
el borde del marco fuera de la página o hasta el borde del marco padre. 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: 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. |
Para especificar propiedades
de marco:
|
|
|
1 Seleccione un marco
llevando a cabo una de estas operaciones:
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. 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 4 Elija una de las
siguientes opciones de marco:
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).
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)
|
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 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. 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. 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. 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 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. 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. 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. 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.
.
3 En
el campo email, escriba la dirección a la que se deberá enviar el correo
electrónico.
|
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
|
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 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.
El
controlador JDBC-ODBC Bridge de Sun se instala automáticamente al instalar
SDK.
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:
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: 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.
|
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.
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. 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 coloca
un formulario en el punto de inserción.
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.
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)
|
Crear la página de búsqueda 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. 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 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.
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.
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:
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:
El
objeto Live también crea una página detalle si no la ha creado anteriormente
y añade a ella los siguientes elementos: 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, 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, 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
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.
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.
