Curso de Macro Media Dream Weaver MX

MACROMEDIA DREAMWEAVER MX
Instituto de Computacin Activa de Mxico S. C. 1

DREAMWEAVER MX
1. - Introduccin
2. - Cre acin del s itio
2. 1. - Sitio local
2. 2. - Sitio remoto
3. - Cre acin de una pgina
4. - Panel de propertie s
5. - Configurar pgina (Propierties , Background, Links , text. )
6. - Cre acin de hipervnculos
7. - Ins ercin de imgenes
8. - Ins ercin de Interactivos
8. 1. - Image
8. 2. - navigation bar
8. 3. - Flas h botton
8. 4. - Flas h text
8. 5. - HTML de Fireworks MX
9. - Configuracin del navegador a trabajar
10. - Editar lis tas de navegadores
10. 1. - Common (Image, Rollover, Table , Navigation bar, Horizontal
rule, Date, Flas h, Fire works , Generator, Bottons , Shockwave)
10. 2. - Layout
10. 3. Te xt, Table, Frames , Forms , Templates , Characters , Media,
Heads , Script, Applications
11. Templates
12. Frames
12. 1. Pane l frames
13. Comportamientos , panel behaviours
13. 1. s onido (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 conexin de BD
18. Conexin 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.
MACROMEDIA DREAMWEAVER
MX
Introduccin
Al final del captulo el alumno ser capaz de...
Crear un s itio local
Crear un s itio remoto
Crear una pagina nueva
Conocer las propiedades de un objeto
Aprender a configurar una pagina
Crear Hipervnculos
Ins ertar imgenes
Comprueba tu avance y marca con una P los objetivos alcanzados
www.icam.com.mx
INTRODUCCIN
Macromedia Dreamweaver es un editor de cdigo HTML profes ional
para el dis eo vis ual y la adminis tracin de s itios y pginas Web. Tan
s i prefiere controlar manualmente el cdigo HTML como s i prefiere
trabajar en un entorno de edicin vis ual, Dre amwe aver le permite
poners e manos a la obra rpidamente y le facilita herramientas tiles
para mejorar s u experiencia en dis eo Web.
Las funciones de edicin vis ual de Dreamweaver tambin le permiten
aadir dis eo y funcionalidad rpidamente s in es cribir una s ola lnea
de cdigo. Puede ver todos los elementos o activos del s itio y
arras trarlos des de un panel fcil de us ar directamente has ta un
documento. Agilice s u flujo de trabajo de des arrollo mediante la
creacin y edicin de imgenes en Macromedia Fire works y s u
importacin directa a Dreamweaver, o bien aadiendo objetos Flas h
que puede crear directamente en Dreamweaver.
Dreamwe aver s e puede pers onalizar totalmente. Utilice Dreamweaver
para crear s us propios objetos y comandos , modificar m todos
abreviados de te clado e inclus o es cribir cdigo JavaScript para
ampliar las pos ibilidades que ofre ce Dreamwe aver con nuevos
comportamientos , ins pectores de propiedades e informes de s itios .
Adminis tracin del Sitio
Un s itio Web es un conjunto de documentos vinculados con atributos
compartidos , tales como temas relacionados , un dis eo s imilar o un
objetivo comn.
Macromedia Dreamweaver es una herramienta de cre acin y
adminis tracin de s itios , por lo que puede utilizarla para cre ar s itios
Web completos , adems de documentos individuales . Para obtener
res ultados ptimos , dis ee y planifique el s itio Web antes de crear las
pginas que va a contener el s itio.
2 Creacin del s itio
Una vez que cree la es tructura del s itio, deber es tablecer el nuevo
s itio en Dreamweaver. Es tablecer es te s itio local en Dreamweaver
s ignifica que puede utilizar Dre amwe aver con FTP para cargar el s itio
en el s ervidor Web, para controlar y mantener automticamente los
vnculos y para compartir archivos con otras pers onas que colaboren
con us ted. Lo ms adecuado es configurar el s itio local en
Dreamwe aver antes de comenzar a crear las pginas .
2. 1 Sitio local
El s itio local es la es tructura del s itio que us ted es tablece en el equipo
para que contenga todas las carpetas , activos y archivos de un s itio
concreto.
La carpeta raz local de l s itio deber s er es pecfica de es e s itio. Una
buena idea es crear una carpeta llamada Sitios y, pos teriormente ,
crear carpetas raz locales dentro de es a carpeta, una para cada s itio
con el que trabaje .
2. 2 SITIO REMOTO
El pas o s iguiente a la hora de configurar un s itio remoto cons is te en
determinar dnde s e va a s ituar el s itio, es decir, qu s ervidor lo
albergar. Su cliente, s u empres a o s u proveedor de s ervicios Internet
(ISP) dis ponen probablemente de un s ervidor configurado para
albergar pginas Web (Internet o intranet). Pregunte al adminis trador
del s is tema o a s u cliente el nombre de dicho s ervidor y cmo s e
realizan las trans ferencias de archivos .
En particular, averige s i s e utiliza FTP para conectar con el s ervidor
o s i puede montar el s ervidor como una unidad de dis co con acces o de
red des de s u es critorio. Si cone cta utilizando FTP, averige el nombre
del s ervidor FTP y determine e l directorio de l s ervidor, as como la
informacin de conexin y de contras ea.
Des pus de crear un s itio local, us e el comando De finir s itios para
aadir o cambiar la informacin del s ervidor remoto as ociado y las
preferencias de des proteccin/ proteccin.
Para as ociar un s ervidor remoto a un s itio local e xis tente:
1 Elija Definir s itios en e l men emergente de s itios actuales de la
ventana Sitio, o bien e lija Site > Edit s ites
2 Aparecer un cuadro de dilogo con los s itios definidos actualmente.
Seleccione un s itio exis tente y haga clic en Editar.
Si no dis pone de s itios definidos actualmente , cre e un s itio local antes
de continuar.
3 En la lis ta Categora de la izquierda, haga clic en Datos remotos .
4 Elija una de las s iguientes opciones de Acces o al s ervidor:
Utilice Ninguno s i no tiene previs to cargar el s itio en un s ervidor. A
continuacin, haga clic en Aceptar y omita el res to de es te
procedimiento.
Utilice Local/ red s i el s ervidor Web es t montado como unidad de red
(Windows ) o como s ervidor AppleTalk o NFS (Macintos h), o s i lo es t
ejecutando en el equipo local. Haga clic en el icono de carpeta para
localizar y s e leccionar la carpeta del s ervidor donde s e almacenan los
archivos . Si des ea que el panel Remoto de la ventana Sitio s e actualice
automticamente a medida que s e aadan y borren archivos ,
s eleccione la opcin Actualizar lis ta archivos remotos autom. Para
aumentar la velocidad de trans ferencia de archivos al s itio remoto,
deje es ta opcin des activada. Para actualizar manualmente la ventana
Sitio en cualquier momento, haga clic en e l botn Actualizar de dicha
ventana. Haga clic en Aceptar y omita e l res to de es te procedimiento.
Utilice FTP s i s e conecta con el s ervidor Web a travs de FTP.
Para conectar con un s ervidor Web mediante FTP:
1 Introduzca el nombre del s ervidor FTP en el que cargar los
archivos del s itio Web. El nombre del s ervidor FTP es el nombre
completo en Internet de un s is tema informtico, como
ftp. minds pring. com. Introduzca el nombre completo del s ervidor s in
texto adicional. Sobre todo, no aada un nombre de protocolo delante
del nombre del s ervidor. Por e jemplo:
Correcto: ftp. minds pring. com
Incorrecto: ftp:/ / ftp. minds pring. com
Incorrecto: minds pring. com
2 Introduzca el nombre del directorio del s ervidor del s itio remoto
donde s e almacenan los documentos vis ibles para el pblico.
3 Introduzca el nombre de conexin y la contras ea que utiliza para
conectar con el s ervidor FTP.
Dreamwe aver guarda la contras ea de forma predeterminada.
Des active Guardar s i prefiere que el s is tema le s olicite la contras ea
cada vez que conecte con el s ervidor remoto.
4 Sele ccione las opciones des eadas de cortafuegos para el s itio:
Active la opcin Us ar cortafuegos s i conecta con e l s ervidor remoto
des de el otro lado de un cortafuegos . Para obtener ms informacin
s obre las opciones de cortafuegos .
Si s u configuracin de cortafuegos requiere el us o de FTP pas ivo (que
permite que el s oftware local configure la conexin FTP en lugar de
s olicitrs elo al s ervidor remoto), s eleccione Utilizar FTP pas ivo. Si no
es t s eguro, cons ulte al adminis trador del s is tema.
5Haga clic en done.
3 CREACIN DE UNA PGINA NUEVA
Macromedia Dreamweaver ofrece divers as formas de crear un
documento. Puede crear documentos HTML nuevos y vacos ; abrir un
documento HTML exis tente, aunque no haya s ido creado con
Dreamwe aver; o bien crear un nuevo documento bas ado en una
plantilla.
Tambin puede abrir archivos de texto no HTML, como archivos
JavaScript, archivos de correo ele ctrnico de te xto normal o archivos
de texto guardados con proces adores de texto o editores de texto. No
podr utilizar todas las herramientas de edicin de documentos de
Dreamwe aver en un documento de texto normal, pero s podr utilizar
funciones bs icas de edicin de te xto. Entre las pos ibles razones para
abrir un documento de texto figuran editar y depurar cdigo
JavaScript, cons ultar e l contenido del archivo de configuracin de
Dreamwe aver o abrir un correo ele ctrnico que contiene un fragmento
de cdigo HTML para copiar el cdigo y pegarlo en otro documento.
Para crear un documento HTML vaco en una nueva ventana de
documento, realice una de es tas operaciones :
En la barra de de mens elija
File> new> create, s e abre un cuadro de dialogo en el cual le permite
es coger uno de las tantas hojas de trabajo.
Si abre la vis ta de Cdigo (en la ventana de documento) o e l ins pector
de cdigo, podr ver que el nuevo documento no es t totalmente
vaco, pues contiene etiquetas html, head y body para que pueda
comenzar a trabajar. Mientras e s criba en la vis ta de Dis eo de la
ventana de documento o ins erte objetos tales como tablas e imgenes ,
podr dejar abierto un editor de cdigo y obs ervar cmo s e crea e l
cdigo HTML. Para obtener ms informacin s obre los editores de
cdigo.
Para abrir un archivo HTML exis tente, lleve a cabo una de es tas
operaciones :
Seleccione File > Open.
Si el archivo s e ha creado con Micros oft Word, elija File > Import >
Word HTML
Si elige Importar HTML de Word, Dreamweaver abre e l archivo y le
permite es pecificar opciones para eliminar cdigo ajeno a HTML
generado por Word. (Micros oft Word 97 y las vers iones pos teriores
cuentan con el comando Guardar como HTML, que aade cdigo
HTML inneces ario al convertir un documento a es te formato. ) Para
obtener ms informacin.
Nota: No s e puede importar directamente un archivo de Micros oft
Word (. doc) a Dreamweaver. Si des ea importar el contenido de un
archivo de Word, inicie Word y guarde el archivo como HTML antes de
importar el archivo HTML res ultante a Dre amweaver.
Para guardar un documento:
1 Sele ccione File > s ave as .
2 Proporcione un nombre para el archivo y vaya has ta e l lugar en el
que des ea guardar el archivo.
Nota: Dreamweaver aade automticamente . htm (Windows ) o . html
(Macintos h) al nombre del archivo cuando aparece el cuadro de
dilogo. (Puede controlar la e xtens in de archivo que debe aadirs e
utilizando una opcin de las preferencias generales . ) Para guardar un
archivo como texto normal en Windows , as gnele la e xtens in de
nombre de archivo . txt. Para guardar un archivo como texto normal en
Macintos h, s encillamente borre . html del nombre del archivo
Macintos h. (Para que Dreamweaver vea e l archivo como HTML de
nuevo, gurdelo otra vez con la extens in . html o . htm. ) Des pus de
guardar un archivo como texto, Dre amweaver no interpreta ningn
cdigo HTML del archivo.
Cuando guarde los documentos , evite utilizar es pacios y caracteres
es peciales en los nombres de archivos y carpetas s iempre que s ea
pos ible. En concreto, no utilice caracteres es peciales (como , o )
ni s ignos de puntuacin (como dos puntos , barras inclinadas o puntos )
en los nombres de archivos que des ee colocar en un s ervidor remoto;
muchos s ervidores cambian es tos caracte res durante la carga, lo que
provoca que s e rompan los vnculos exis tentes con los archivos .
As imis mo, no comience los nombres de los archivos con nmeros .
3 Haga clic en el botn Guardar para guardar el archivo.
4. PANEL DE PROPIEDADES (PROPERTIES)
El panel de propiedades o properties le permite corregir las
caracters ticas de un elemento s e leccionado en la pgina, tal como
texto o algn objeto ins ertado.
La mayora de los cambios que us ted realice a las caracters ticas s e
aplican inmediatamente en el documento s in embargo los cambios no
s e s olicitan as ta que us ted haga clic en objeto ya s ea texto o imagen.
El contenido del panel de properties vara en los tipos de obje tos
s eleccionados .
Para ms informacin de alguna caracters tica es pecfica s e lecciona
el obje to y en la es quina s uperior derecha del panel de properties
haga clic en e l icono de s igno de interrogacin.
para mos trar y ocultar el panel de properties
vaya a la barra de men
s eleccione Windows >properties
Tambin puede abrirla con la combinacin de teclas CTRL + F3
5. CONFIGURAR PGINA (PROPERTIES,
BACKGROUND, LINKS, TEXT)
Dreamwe aver le permite trabajar en s u documento de diferentes
formas : utilizando la vis ta Dis eo, utilizando la vis ta Cdigo o
empleando una vis ta combinada que mues tra el dis eo y e l cdigo del
documento. Puede cambiar la vis ta en la que des ea trabajar
s eleccionando una vis ta en la barra de herramientas de
Dreamwe aver.
Presione ctrl
+ F3 para
abrir o cerrar
la barra de
propiedades
Conforme cre e y trabaje con los documentos , Dreamweaver generar
automticamente e l cdigo HTML s ubyacente . Para examinar o editar
es te cdigo, utilice uno de los editores de cdigo de Dreamweaver: la
vis ta de Cdigo de la ventana de documento o e l ins pector de cdigo.
La vis ta de Dis eo de Dreamweaver mues tra una repres entacin
vis ual del documento, en lugar del cdigo s ubyacente . Cuando trabaje
en la vis ta de Dis eo, podr optar entre dos vis tas para realizar e l
dis eo: vis ta de Dis pos icin o vis ta Es tndar. Puede s ele ccionar es tas
vis tas en el panel Objetos , bajo Ver.
En la vis ta de Dis pos icin, puede dis ear una dis pos icin de pgina e
ins ertar grficos , texto y otros elementos multimedia.
Utilice e l cuadro de dilogo Propiedades de la pgina para es pecificar
divers as opciones de la pgina. Para abrir e l cuadro de dilogo
Propiedades de la pgina, elija Modify >page properties o pres ione la
s iguiente combinacin CTRL + J.
Title es pecifica el ttulo de la pgina que aparece en la barra de ttulo
de la ventana de documento y la ventana de la mayora de los
navegadores .
Background image y Background es pecifican una imagen y un color
de fondo para la pgina.
Text y Links definen los colores predeterminados de te xto, vnculos ,
vnculos vis itados y vnculos activos . Tambin puede controlar es tos
colores utilizando hojas de es tilos CSS.
Left margin y Top Margin es pecifican los tamaos de los mrgenes de
la pgina en la e tiqueta body para Micros oft Internet Explorer
s olamente. Nets cape Navigator pres cinde es tos valores y utiliza los de
margin width y margin height. Para obtener un res ultado ptimo en
los dos navegadores , proporcione valores de mrgenes para ambos
navegadores en lugar de para uno s olo; comple te los cuatro valores de
mrgenes en lugar de s lo dos . Para as egurars e de que no aparecen
mrgenes en ningn navegador, configure los cuatro valores con e l
valor 0. Dreamweaver no mues tra mrgenes de pgina en la ventana
de documento. Utilice Vis ta previa en e l navegador para ver los
mrgenes .
Document Encoding. Es pecifica la codificacin emple ada para los
caracteres del documento. Para ingls y otros idiomas de Europa
Occidental, elija Occidental. Otras opciones pos ibles s on:
centroeuropeo, cirlico, griego, is lands , japons , chino tradicional,
esione ctrl. +
ara abrir las
opiedades de
pagina
chino s implificado y core ano. Si no aparece ninguna opcin para la
codificacin que des ea utilizar, e lija Otro para cre ar un documento
con la codificacin que us e s u s is tema operativo. Todos los idiomas
as iticos utilizan codificacin de doble byte.
Para cambiar las fuentes que emplea Dreamweaver para mos trar
cada codificacin, elija Edit > Edit with external editor y s ele ccione
Fuentes / codificacin. Las fuentes que s eleccione en es te panel de
preferencias Fuentes / codificacin no afectarn al modo en que los
vis itantes ven las pginas , ya que s tos es pecifican s us propias
fuentes (para una determinada codificacin) en los navegadores Web.
Para obtener ms informacin.
Tracing iamge es pecifica una imagen que s e va a emplear como gua
para copiar un dis eo. Es ta imagen s lo s irve como referencia, ya que
no aparece cuando el documento s e mues tra en un navegador.
Image trans parency determina la opacidad de la imagen de ras treo,
des de completamente trans parente has ta completamente opaca.
Document folders . Mues tra la carpeta en la que s e guarda el
documento actual, s i ha s ido guardado.
Site foldrs mues tra la ruta de la carpeta raz local del s itio en la que s e
ha guardado el documento actual, en el cas o de que s e haya guardado.
6 CREACIN DE HIPERVINCULOS
Utilice e l panel de properties y el icono de s ealizacin de archivo
para crear vnculos des de una imagen, un objeto o texto has ta otro
documento o archivo.
Para crear vnculos entre documentos utilizando el icono de carpeta o
el cuadro de texto Vnculo:
1 Sele ccione te xto o una imagen en la vis ta de Dis eo de la ventana de
documento.
2 Abra el panel de properties (Windows > properties ) y lle ve a cabo
una de es tas operaciones :
Haga clic en el icono de carpeta s ituado a la dere cha del campo Link
para localizar y s eleccionar un archivo.
La ruta del documento vinculado apare cer en e l campo URL. Utilice
el men emergente Relativo a de l cuadro de dilogo Se le ccionar
archivo HTML para indicar s i la ruta es re lativa al documento o a la
raz. A continuacin, haga clic en Se leccionar.
Nota: Al cambiar el tipo de ruta en el campo Re lativo a, Dre amwe aver
utilizar es ta s eleccin como el tipo de ruta predeterminado para
futuros vnculos has ta que la cambie .
En el campo Vnculo, introduzca la ruta y el nombre de archivo del
documento. Para es tablecer un vnculo con un documento del s itio,
introduzca una ruta relativa al documento o re lativa a la raz. Para
es table cer un vnculo con un documento externo al s itio, introduzca
una ruta abs oluta que incluya el protocolo (por e jemplo, http:/ / ).
Puede utilizar es te s is tema para introducir un vnculo para un archivo
que an no s e ha creado.
3 Sele ccione una ubicacin para abrir el documento.
Para que el documento vinculado aparezca en un lugar dis tinto de la
ventana o e l marco actual, s ele ccione una opcin en el men
emergente Des tino del ins pector de propiedades :
_blank carga el documento vinculado en una nueva ventana s in
nombre del navegador.
_parent carga el documento vinculado en el marco o la ventana padre
del marco que contiene el vnculo. Si e l marco que contiene e l vnculo
no es t anidado, e l documento vinculado s e cargar en la ventana
completa del navegador.
_s elf carga el documento vinculado en e l mis mo marco o la mis ma
ventana que el vnculo. Es te des tino es el predeterminado, por lo que
normalmente no es precis o es pecificarlo.
_top carga el documento vinculado en la ventana comple ta del
navegador, eliminando de es ta forma todos los marcos .
Sugerencia: Si todos los vnculos de la pgina s e es tablecern con el
mis mo des tino, puede es pecificar es te des tino una vez eligiendo
Ins ert > Head tangs >Bas e y s eleccionando la informacin de
des tino.
Para obtener informacin s obre el es table cimiento de vnculos con
marcos . Para crear un vnculo con un documento utilizando el icono
de s ealizacin de archivo:
1 Sele ccione el texto o una imagen en la vis ta de Dis eo de la ventana
de documento.
2 Arras tre el icono de s ealizacin de archivo s ituado a la derecha del
campo Vnculo en el panel de properties y s eale otro documento
abierto, un punto de fijacin vis ible en un documento abierto o un
documento de la ventana Sitio. El campo Vnculo s e actualizar para
mos trar el vnculo.
Nota: El documento abierto o el archivo de la ventana Sitio al que
s eale pas ar a un s egundo plano en la pantalla mientras realiza la
s eleccin.
3 Libere el botn del ratn.
Para crear un vnculo des de una s eleccin en un documento abierto:
1 Sele ccione te xto en la vis ta de Dis eo de la ventana de documento.
2 Pres ione mays . y, al mis mo tiempo, arras tre la s eleccin.
Mientras arras tra la s eleccin, aparecer e l icono de s ealizacin de
archivo.
3 Seale otro documento abierto, un punto de fijacin vis ible en un
documento abierto o un documento de la ventana Sitio.
Para crear un vnculo utilizando el mapa de l s itio y el icono de
s ealizacin de archivo:
1 En la ventana Sitio, active las vis tas Archivos del s itio y Mapa del
s itio pres ionando el icono Mapa del s itio mientras elige Mapa y
archivos .
2 Sele ccione un archivo HTML del mapa del s itio.
Aparecer el icono de s ealizacin de archivo junto al archivo.
3 Arras tre el icono de s ealizacin de archivo y s eale otro archivo del
mapa del s itio o un archivo local de la vis ta Archivos del s itio.
Se colocar un vnculo de hipertexto con el nombre del archivo
vinculado en la parte inferior del archivo HTML s ele ccionado. Es te
mtodo ofrece buenos res ultados para cre ar vnculos rpidamente en
un s itio que s e es t creando.
7 INSERCION DE IMGENES
Al ins ertar una imagen en un documento de Dreamweaver, el
programa genera automticamente una referencia al archivo en e l
cdigo HTML. Para as egurars e de que es ta referencia es correcta, el
archivo de imagen deber es tar en el s itio actual. Si no lo es t,
Dreamwe aver le preguntar s i des ea copiar el archivo en la carpeta
raz.
Para ins ertar una imagen:
1 Lleve a cabo una de es tas operaciones :
Site el punto de ins ercin en el lugar de la ventana de documento
donde des ea que aparezca la imagen y, a continuacin, e lija Ins ert >
Image o haga clic en el botn Ins ertar imagen de la categora
Common del panel Obje tos .
Site el punto de ins ercin en el lugar de la ventana de documento
donde des ea que aparezca la imagen y, a continuacin, pres ione
Control+Alt+I (Windows ).
Arras tre el botn Ins ertar imagen des de el panel Obje tos has ta la
pos icin des eada de la ventana de documento.
Arras tre una imagen des de el panel Activos has ta la pos icin des eada
de la ventana de documento. A continuacin, s iga con el pas o 3.
Arras tre una imagen des de la ventana Sitio has ta la pos icin des eada
de la ventana de documento. A continuacin, s iga con el pas o 3.
Arras tre una imagen des de el es critorio has ta la pos icin des eada de
la ventana de documento. A continuacin, s iga con el pas o 3.
2 En el cuadro de dilogo que aparece, haga clic en Examinar para
elegir un archivo o es criba la ruta del archivo de imagen.
Si es t trabajando en un documento que no es t guardado,
Dreamwe aver generar una referencia de archivo:/ / al archivo de
imagen. Al guardar el documento en el s itio, Dre amwe aver convierte
la referencia en una ruta relativa al documento.
3 Defina las propiedades de la imagen en el panel de PROPERTIES.
Cues tionario 1
1. - Definicin de una pagina Web
2. - Definicin de un Sitio
3. - Definicin de un portal
4. - Definicin de un Sito Local y Remoto
5. - Paquete que ins tala C:\ inetpub\ wwwroot
6. - Que es el IIS y para que s is tema operativo
7. - Que es el PWS Y para que s is tema operativo
8. - Definicin de Hipervnculo
MX
CAPITULO 2
Ins ertar interactivos
Ins ertar imgenes de s us titucin
Crear barras de navegacin
Ins ertar botones de flas h
Ins ertar texto flas h
Ins ertar objetos HTML Fireworks
MM@1MV M MLV _ M1L LMM MM P Mb M_VMb LMWMb
. 1i111i 11 1i1111
www.icam.com.mx
Una imagen de s us titucin es una imagen que cambia cuando el
puntero pas a s obre ella. Una imagen de s us titucin cons ta en realidad
de dos imgenes : la imagen principal (la que aparece al cargars e
inicialmente la pgina) y la imagen de s us titucin (la que aparece al
pas ar el puntero s obre la imagen principal). Ambas imgenes deben
tener el mis mo tamao. Si tienen tamaos dis tintos , Dreamweaver
cambia automticamente e l tamao de la s egunda imagen para que s e
ajus te a las propiedades de la primera.
Las imgenes de s us titucin es tn configuradas de manera
predeterminada para res ponder al evento Mous eOver. Para obtener
informacin s obre la configuracin de una imagen para que res ponda
a otro evento (por eje mplo, un clic del ratn) o s obre la edicin de una
imagen de s us titucin para que mues tre otra imagen.
Una forma ms compleja de imagen de s us titucin es la barra de
navegacin. Para crear una barra de navegacin, utilice Ins ert >
Interactive Image> Navigation bar.
Para crear una imagen de s us titucin:
1 En la ventana de documento, s ite e l punto de ins ercin en el lugar
donde des ea que aparezca la imagen de s us titucin.
2 Introduzca la imagen de s us titucin mediante uno de es tos m todos :
En la categora Common del panel Objetos , haga clic en e l icono
Ins ertar imagen de s us titucin.
En la categora Common del panel Objetos , arras tre e l icono Ins ertar
imagen de s us titucin has ta la pos icin des eada de la ventana de
documento.
Elija Ins ert >Interactive Images >Rollovers Image.
Aparecer el cuadro de dilogo Ins ertar imagen de s us titucin.
3 En el campo Image Name, introduzca un nombre para la imagen de
s us titucin.
4En el campo Imagen original, haga clic en Examinar y s eleccione o
es criba la ruta de la imagen que des ea mos trar cuando s e cargue la
pgina.
5 En el campo Rollover Image, haga clic en Examinar y s ele ccione o
es criba la ruta de la imagen que des ea mos trar cuando el puntero pas e
s obre la imagen original.
6 Si des ea precargar las imgenes en la cach del navegador de modo
que s e carguen ms rpidamente, s eleccione la opcin Carga previa
de imgenes .
7 En el campo when clicked, go to URL, haga clic en brows e y
s eleccione o es criba la ruta del archivo que des ea abrir cuando un
us uario haga clic en la imagen de s us titucin.
Nota: Si no es table ce un vnculo para la imagen, Dreamweaver
ins ertar un vnculo nulo (# ) en e l cdigo HTML relativo al
comportamiento de s us titucin. Si elimina e l vnculo nulo, la imagen
de s us titucin dejar de funcionar.
8Haga clic en Aceptar para cerrar el cuadro de dilogo Ins ertar
imagen de s us titucin.
. 11111 1i11
Un rollover iamge es una imagen de s us titucin que en el momento de
pas ar el mous e cambia
Para un rollover image s iga las s iguientes ins trucciones :
1 En la ventana de documento, s ite e l punto de ins ercin en el lugar
donde des ea que aparezca la imagen de s us titucin.
2 Introduzca la imagen de s us titucin mediante uno de es tos m todos :
En la categora Common del panel Objetos , haga clic en e l icono
Ins ertar imagen de s us titucin.
En la categora Common del panel Objetos , arras tre e l icono Ins ertar
imagen de s us titucin has ta la pos icin des eada de la ventana de
documento.
Elija Ins ert >Interactive Images >Rollovers Image.
Aparecer el cuadro de dilogo Ins ertar imagen de s us titucin.
3 En el campo Image Name, introduzca un nombre para la imagen de
s us titucin.
4En el campo Imagen original, haga clic en Examinar y s eleccione o
es criba la ruta de la imagen que des ea mos trar cuando s e cargue la
pgina.
5 En el campo Rollover Image, haga clic en Examinar y s ele ccione o
es criba la ruta de la imagen que des ea mos trar cuando el puntero pas e
s obre la imagen original.
6 Si des ea precargar las imgenes en la cach del navegador de modo
que s e carguen ms rpidamente, s eleccione la opcin Carga previa
de imgenes .
7 En el campo when clicked, go to URL, haga clic en brows e y
s eleccione o es criba la ruta del archivo que des ea abrir cuando un
us uario haga clic en la imagen de s us titucin.
Nota: Si no es table ce un vnculo para la imagen, Dreamweaver
ins ertar un vnculo nulo (# ) en e l cdigo HTML relativo al
comportamiento de s us titucin. Si elimina e l vnculo nulo, la imagen
de s us titucin dejar de funcionar.
8Haga clic en Aceptar para cerrar el cuadro de dilogo Ins ertar
imagen de s us titucin.
.Z i1111i 111
Un navigation bar s e compone de una imagen o un conjunto de
imgenes cuya vis ualizacin cambia s egn las acciones que realiza e l
us uario. Los navigation bar permiten des plazars e fcilmente entre las
pginas y los archivos de un s itio.
Antes de ins ertar un navigation bar, cree un conjunto de imgenes
para los es tados que s e mos trarn con cada elemento de navegacin.
Un elemento de navigation bar s e puede cons iderar como un botn, ya
que la hacer clic en l, lleva al us uario a otra pgina.
Un elemento de navigation bar puede tener cuatro es tados :
Up image: la imagen que aparece cuando el us uario an no ha hecho
clic en el e lemento o interactuado con l. Por ejemplo, parece como s i
no s e hubiera hecho clic en el elemento que s e encuentra en es te
es tado.
Over image: la imagen que aparece cuando el puntero s e mueve
s obre la imagen. Cambia la apariencia del e lemento (por ejemplo,
puede aparecer ms claro) para indicar a los us uarios que pueden
interactuar con l.
Down image: la imagen que aparece des pus de hacer clic en e l
elemento. Por e jemplo, cuando un usuario hace clic en un elemento,
s e carga una nueva pgina y la barra de navegacin s igue
mos trndos e, pero el elemento en el que s e ha hecho clic aparece
os curecido para indicar que s e ha s eleccionado.
Over while down image: la imagen que aparece cuando el puntero
pas a s obre la imagen Abajo des pus de haber hecho clic en e l
elemento. Por e jemplo, el ele mento puede aparecer atenuado o gris .
Puede utilizar es te es tado para indicar vis ualmente a los us uarios que
no pueden volver a hacer clic en e l elemento mientras s e encuentren
en es ta parte de l s itio.
No es neces ario incluir imgenes de barra de navegacin para los
cuatro es tados . Por ejemplo, es pos ible que s lo neces ite los es tados
Arriba y Abajo.
Puede crear una barra de navegacin, copiarla en otras pginas del
s itio, utilizarla con marcos y editar los comportamientos de la pgina
para mos trar dis tintos es tados a medida que accede a las pginas
. 1111 1i
El objeto de flas h botton permite pers onalizar e ins ertar un conjunto
de botones Flas h predis eados .
Nota: Deber guardar el documento antes de ins ertar un objeto de
botn o de texto Flas h.
Para ins ertar un objeto de Flas h Botton:
1 Mientras s e encuentra en la vis ta de Dis eo de la ventana de
documento, s eleccione media en panel de objetos y pres ione el botn
Ins ertar Flas h botton en el panel Obje tos o elija Ins ert > Interactive
images >Flas h botton. Tambin puede arras trar el icono de Flas h
botton s obre la ventana de documento.
Aparecer el cuadro de dilogo Ins ertar botn Flas h.
2 Sele ccione el es tilo de botn que des ee en la lis ta Style.
Ver un ejemplo del botn en e l campo Mues tra. Puede colocar el
ratn encima de la mues tra para ver cmo funciona en el navegador.
Sin embargo, el campo Mues tra no s e actualiza automticamente para
mos trar los cambios re alizados en el texto o la fuente. Es tos cambios
aparecern en la vis ta de Dis eo.
3 En el campo botton text (opcional), es criba el texto que des ea
mos trar.
Por ejemplo, es criba Pres ione aqu Es te campo s lo acepta cambios s i
el botn s e leccionado tiene un parmetro {Button Text} de finido. Es to
s e puede obs ervar en el campo Mues tra. El texto que es criba
reemplazar {Button Text} cuando previs ualice e l archivo.
4 En el campo Font, es pecifique un tamao de fuente y s eleccione la
fuente que des ea utilizar el men emergente.
Slo es ne ces ario realizar s ele cciones de fuente y tamao s i el botn
tiene parme tros de te xto definidos . Si la fuente predeterminada de un
botn no es t dis ponible en el s is tema, s ele ccione otra fuente en el
men emergente. Tenga en cuenta que no ver la fuente s e leccionada
en el campo Mues tra, aunque puede hacer clic en Aplicar para
ins ertar el botn en la pgina y ver qu apariencia tendr el texto.
5 En el campo Link (opcional), introduzca un vnculo abs oluto o
relativo al documento para el botn.
No s e admiten vnculos re lativos al s itio porque los navegadores no los
reconocen en las pe lculas Flas h. Si utiliza un vnculo relativo al
documento, guarde el archivo SWF en e l mis mo directorio que el
archivo HTML. Los navegadores interpretan los vnculos relativos al
documento de dis tintas formas y, por tanto, al guardar los vnculos en
el mis mo directorio s e garantiza s u correcto funcionamiento.
6 En el campo target (opcional), es pecifique un marco o una ventana
de des tino para cargar el vnculo del botn Flas h.
7 En el campo Bg color (opcional), es tablezca el color del fondo de la
pelcula Flas h. Utilice el s e lector de colores o es criba un valor
hexadecimal para la Web (como # FFFFFF).
8 En el campo s ave as , introduzca un nombre de archivo para guardar
el nuevo archivo SWF.
Puede utilizar el nombre de archivo predeterminado (por e jemplo,
button1. s wf) o es cribir uno nuevo. Si el archivo contiene un vnculo
relativo al documento, deber guardarlo en el mis mo dire ctorio que el
documento HTML actual para mantener los vnculos relativos al
documento.
9 Haga clic en Ge t more s tyles para pas ar al s itio Macromedia
Exchange y des cargar ms es tilos de botn.
Para obtener ms informacin.
10 Haga clic en Apply o pres ione OK para ins ertar e l botn Flas h en la
ventana de documento.
Sugerencia: Seleccione Aplicar para ver los cambios realizados en la
vis ta de Dis eo. Mientras mantiene el cuadro de dilogo abierto
puede continuar realizando cambios en el botn.
Para modificar un objeto de Flas h botton:
1 En la vis ta de Dis eo, s eleccione el objeto de Flas h botton.
2 En el panel de properties mos trar las propiedades del Flas h botton.
Puede realizar cambios en el panel de properties . Es tos cambios
modifican los atributos HTML como ancho, alto y color de fondo.
3 Para realizar cambios en el contenido, mues tre el cuadro de dilogo
Ins ertar Flas h botton utilizando uno de es tos mtodos :
Haga doble clic en el objeto de Flas h botton.
Haga clic en Edit en el panel de properties .
Haga clic con el botn derecho (Windows ) o mientras pres iona la
tecla Control (Macintos h) y e lija Edit en el men contextual.
4 En el cuadro de dilogo Ins ert Flas h botton, edite los campos
des critos en e l procedimiento anterior.
En la vis ta de Dis eo, puede cambiar el tamao del objeto fcilmente
utilizando los manejadores de cambio de tamao. Puede res tablecer
el tamao original de l obje to s e leccionando Res tablecer tamao en e l
ins pector de propiedades .
Para ver cmo s e reproduce el objeto de Flas h botton en la ventana de
documento:
1 En la vis ta de Dis eo, s eleccione el objeto de Flas h botton.
2 En el panel de properties , haga clic en el botn verde Reproducir.
3 Haga clic en el botn rojo Detener para terminar la previs ualizacin.
Nota: No s e puede editar el objeto de Flas h botton mientras s e es t
reproduciendo.
Conviene previs ualizar s iempre el documento en el navegador para
comprobar exactamente la apariencia que tendr el botn Flas h.
.H 1111 1
El objeto de Flas h text permite crear e ins ertar una pelcula Flas h que
s lo contiene texto. Es to permite crear una pequea pelcula de
grficos vectoriales con fuentes de dis eo y e l te xto que elija.
Para ins ertar un objeto de texto Flas h:
1 Mientras s e encuentra en la vis ta de Dis eo de la ventana de
documento, s eleccione media en panel de objetos y pres ione el botn
Flas h text en el panel Objetos o elija Ins ert >interactive images >
Flas h Text.
Aparecer el cuadro de dilogo Ins ertar te xto Flas h.
2 Sele ccione una fuente en el men emergente Font.
Es te men mues tra todas las fuentes TrueType cargadas actualmente
en el s is tema.
3 Introduzca un tamao de fuente (de puntos ) en el campo Size.
4 Es pecifique los atributos de es tilo, como negrita o curs iva, y la
alineacin del texto haciendo clic en los botones del es tilo
corres pondiente.
5 En el campo Color, es tablezca e l color del texto utilizando e l s elector
de colores o introduciendo un valor hexadecimal para la Web (como
# FFFFFF).
6 En el campo Rollover color, es tablezca e l color que aparece cuando
el puntero pas a s obre el objeto de texto Flas h. Utilice e l s e lector de
colores o es criba un valor hexadecimal para la Web (como # FFFFFF).
7 Introduzca el texto des e ado en el campo Texto.
Para ver el es tilo de fuente que s e mues tra en el campo Texto, active
la cas illa que dice s how font.
8 Si des ea as ociar un vnculo con el objeto de Flas h text, introduzca un
vnculo abs oluto o relativo al documento en e l campo link.
No s e admiten vnculos re lativos al s itio porque los navegadores no los
reconocen en las pe lculas Flas h. Si utiliza un vnculo relativo al
documento, guarde el archivo SWF en e l mis mo directorio que el
archivo HTML. Los navegadores interpretan los vnculos relativos al
documento de dis tintas formas y, por tanto, al guardar los vnculos en
el mis mo directorio s e garantiza s u correcto funcionamiento.
9 Si ha introducido un vnculo, puede es pecificar un marco o una
ventana de des tino para cargar es e vnculo en el campo Target.
10 En el campo Bg color, elija un color de fondo para el texto. Utilice el
s elector de colores o es criba un valor hexadecimal para la Web (como
# FFFFFF).
11 En el campo s ave as , introduzca un nombre para el archivo.
Puede utilizar el nombre de archivo predeterminado (por e jemplo,
tex1. s wf) o es cribir uno nuevo. Si e l archivo contiene un vnculo
relativo al documento, deber guardarlo en el mis mo dire ctorio que el
documento HTML actual para mantener los vnculos relativos al
documento.
12 Haga clic en Apply o pres ione e l botn OK para ins ertar e l Flas h
text en la ventana de documento.
Si hace clic en Apply, el cuadro de dilogo permanecer abierto y
podr previs ualizar el texto en el documento.
. 1i1 111111
Dreamwe aver permite ins ertar cdigo HTML generado por Fireworks ,
completo con imgenes as ociadas , divis iones y JavaScript, en un
documento. Es ta caracters tica de ins ercin facilita la tarea de
agregar tablas o mapas de imgenes creados en Fireworks en un
documento de Dreamwe aver.
Para ins ertar cdigo HTML de Fireworks en un documento de
Dreamwe aver:
1 En Dreamweaver, guarde el documento en un s itio de finido.
2 Coloque el punto de ins ercin en el documento donde des ee que
comience el cdigo HTML ins ertado.
3 Siga uno de es tos procedimientos :
Seleccione Ins ert > Interactive Images > Fireworks HTML.
Haga clic en el botn Ins ertar Fireworks HTML de la categora
Common del panel Obje tos .
4 En el cuadro de dilogo que aparece a continuacin, haga clic en
Brows e para s eleccionar el archivo HTML de Fireworks que des ee.
5 s ele cciones la cas illa de opcin delete file after ins ertion para
des plazar el archivo HTML a la Pape lera de reciclaje (Windows ).
Utilice es ta opcin en cas o de no neces itar el archivo HTML de
Fireworks des pus de ins ertarlo. Es ta opcin no afecta al archivo PNG
origen as ociado con el archivo HTML.
Nota: Si e l archivo HTML s e encuentra en una unidad de red, s e
elimina de forma permanente , no s e des plaza a la Papelera de
reciclaje o Papelera.
6 Haga clic en OK para ins ertar el cdigo HTML, junto con s us
imgenes , divis iones y JavaScript as ociados , en el documento de
Dreamwe aver.
Cues tionario 2
1. - Definicin de barra de navegacin
2. - Opcin que permite interactuar con firewors k
3. - Un Hipervnculo creado en firewors k puede s er
modificado en dreamweaver
Fals o ( ) verdadero ( )
MX
CAPITULO 3
Configurar el navegador
Editar una lis ta de navegadores
Conocer la barra de ins ert
Utilizar la ficha common
www.icam.com.mx
U. i11111i 111 i11111 1 111111
Vis ta previa us ando el s ervidor local Permite e legir un s ervidor local
para realizar la vis ta previa de una pgina en un navegador (s lo
Windows ). Para que es ta opcin funcione es ne ces ario ejecutar
s oftware de s ervidor en el ordenador local. Cuando es ta opcin es t
activada, Dreamweaver s uminis tra la pgina actual para re alizar la
vis ta previa en un s ervidor local como un URL que comienza por
http:/ / localhos t/ . Cuando es ta opcin es t des activada, Dreamweaver
abre el documento en un navegador con una ruta de archivo que
comienza por archivo:/ / . En algunos cas os , los vnculos es pecificados
como rutas re lativas a la raz no funcionan corre ctamente cuando s e
abren en un navegador con una ruta archivo:/ / . Lo mis mo s ucede
cuando s e lleva a cabo la comprobacin de un navegador de des tino.
El botn de s igno ms (+) aade un navegador a la lis ta.
El botn de s igno menos (-) elimina el navegador s ele ccionado en la
lis ta.
Editar cambia la configuracin del navegador s eleccionado.
Navegador principal y Navegador s ecundario es pecifican s i e l
navegador s eleccionado es el principal o el s ecundario. Pres ione F12
para abrir el navegador principal o F12 (Windows ).
resione F12
ara ver la
sta previa de
pagina Web
U. 11111 111 11 i111111
Dreamwe aver permite cre ar pginas Web con elementos que admiten
todos los navegadores (por ejemplo, imgenes y texto de prrafo), as
como con elementos que s lo admiten los navegadores ms recientes
(por ejemplo, es tilos y capas ).
La funcin Comprobar navegadores de des tino analiza el HTML de los
documentos para ver s i hay etiquetas o atributos que no admiten los
navegadores de des tino. La comprobacin no altera e l documento.
Para eje cutar una comprobacin del navegador de des tino:
1 Dis pone de las opciones s iguientes :
Para eje cutar la comprobacin en e l documento actual, guarde el
archivo. La comprobacin s e re alizar con la ltima vers in guardada
del archivo y no incluir los cambios que no haya guardado.
Para eje cutar la comprobacin con un directorio o un s itio, e lija
Windows >Site y abra la ventana FTP del s itio. A continuacin,
s eleccione una carpeta en el directorio local. La comprobacin del
navegador de des tino s e realizar en todos los archivos HTML de es a
carpeta y las s ubcarpetas que contenga. La comprobacin del
navegador de des tino s lo s e puede llevar a cabo con archivos locales .
2 Elija File > Preview in Brows er.
Si an no ha s eleccionado un Explorador principal, el programa le
pedir que lo haga.
3 En la lis ta de navegadores , s e leccione el navegador de des tino que
des ea utilizar para la comprobacin del s itio.
4 Para guardar el informe, e lija File > s ave en el navegador.
Las preferencias de Vis ta previa en el navegador mues tran los
navegadores principal y s ecundario definidos actualmente. Para abrir
las preferencias de Vis ta previa en el navegador, elija File > previe w
in brows er >Iexplore, o bien oprima F12
M 1111 1i11
El panel de ins ert contiene botones llamados fichas ins ert que s irven
para la creacin e ins ercin de divers os tipos de obje tos , como tablas ,
capas e imgenes .
M. iii [1i11q 111111q 1111q i1111i 111q
1112i11 111q 111q 11q1111q 111111q 1i1111q
1iq 1111
El panel de ins ert contiene botones para la creacin e ins ercin de
divers os tipos de objetos , como tablas , capas e imgenes . Para
mos trar u ocultar el panel Objetos , e lija Windows > ins ert. O pres ione
CTRL + F2
Para ins ertar un objeto:
Haga clic en el corres pondiente botn del panel ins ert o arras tre el
icono del botn has ta la ventana de documento. Dependiendo del
objeto, aparecer el corres pondiente cuadro de dilogo de ins ercin
de objeto en e l que s e le pedir que s ele ccione o ins erte el archivo u
objeto des e ado.
Para omitir es te cuadro de dilogo e ins ertar un objeto marcador de
pos icin vaco:
Mantenga pres ionada la tecla Control (Windows ) u Opcin
(Macintos h) mientras ins erta el objeto. (Por e jemplo, para ins ertar un
marcador de pos icin para una imagen s in es pecificar un archivo de
imagen, mantenga pres ionada la tecla Control u Opcin y haga clic en
el botn Imagen. )
Nota: Es to no permite omitir todos los cuadros de dilogo. Algunos
objetos , como las barras de navegacin, las capas , los botones Flas h,
los marcos , e tc. , no ins ertan marcadores de es pacio.
El panel Ins ert contiene doce categoras de forma predeterminada:
Characters , Common, Forms , Frame, Head, layout y Es pecial.
Tambin contiene botones que cambian de vis ta: Es tndar y
Dis pos icin.
La categora Common contiene botones para la creacin e ins ercin
de los obje tos ms utilizados , como Images , Tables y dra. layer.
La s eccin layout permite elegir entre vis ta Es tndar
(predeterminada) o de Dis pos icin. Si es t s ele ccionada la vis ta de
Dis pos icin, tambin podr s eleccionar las herramientas de
Dis pos icin: Dibujar ce lda de dis pos icin y Dibujar tabla de
dis pos icin. Para obtener ms informacin. Para cambiar de
categora, utilice e l men emergente s ituado en la parte s uperior del
panel. Puede modificar cualquier objeto del panel o crear s us propios
objetos .
Algunas de las preferencias generales afectan al panel Obje tos . Para
cambiar es tas preferencias , e lija Edit > Preference y s e le ccione
General.
Cuando ins erte objetos tales como imgenes , tablas , s e cuencias de
comandos y elementos he ad, aparecer un cuadro de dilogo en el que
s e le s olicitar informacin adicional. Puede s uprimir es tos cuadros
de dilogo des activando la opcin Mos trar dilogo al ins ertar obje tos
o manteniendo pres ionada la tecla Control mientras crea el objeto.
Cuando s e ins erta un objeto con es ta opcin des activada, el objeto
recibe valores de atributo predeterminados . Des pus de ins ertar el
objeto, utilice el ins pector de propiedades para cambiar s us
propiedades .
Las preferencias del panel Objetos permiten vis ualizar el contenido
del panel Objetos como te xto s olamente , iconos s olamente o texto e
iconos .
MX
CAPITULO 4
Utilizar la ficha layout
Utilizar la ficha text
Utilizar la ficha table
Utilizar la ficha frame
Utilizar la ficha form
www.icam.com.mx
M.Z 11
La categora loyout contiene botones que permiten crear obje tos no
vis ibles en la ventana del navegador, como los puntos de fijacin con
nombre. Elija View > vis ual aids > Invis ible elements para ver los
iconos que marcan la pos icin de es tos obje tos . Haga clic en los
iconos de elementos invis ibles de la ventana de documento para
s eleccionar los obje tos y cambiar s us propiedades .
M. 1q 1111q 111i1q 11iq 1i1111q
111111q i1111q 1111q 111q 1111111i
El panel Characters contiene caracteres es pe ciales , como los
s mbolos de copyright, de comillas curvas y de marca regis trada.
Tenga en cuenta que es tos s mbolos no s e mues tran correctamente
en las vers iones anteriores a la 3. 0 de los navegadores (Ne ts cape e
IE).
La categora Forms contiene botones que permiten crear formularios
e ins ertar e lementos de formulario.
La categora media contiene botones que permiten ins ertar
elementos es peciales , como applets Java, plug-ins y objetos
ActiveX. Para obtener ms informacin.
La categora Head contiene botones que permiten aadir divers os
elementos de la s eccin head, como etiquetas meta, keywords y
bas e.
La categora FRame contiene estructuras comunes de conjuntos de marcos.
En la categora de common podemos encontrar la opcion de table, teble permite
crear una tabla para e l manejo de datos de forma organizada. Para
dibujar una tabla s olo puls e encima de l icono y s e abrir un cuadro
de dialogo en el cual us ted deber es pecificar los tamaos de la
columna, anchos de la fila rellenos , etc.
la s eccin head y la s e ccin body. La s eccin body es la parte
principal del documento, la parte vis ible que contiene texto,
imgenes , e tc. La s eccin head es invis ible, s alvo el ttulo del
documento, que aparece en las barras de ttulo de las ventanas en
los navegadores y en Dreamweaver.
La s eccin head tambin contiene otra informacin importante ,
incluido el tipo de documento, la codificacin de idioma, las funciones
y variables JavaScript y VBScript, las palabras clave y los indicadores
de contenido para motores de bs queda y las definiciones de es tilo.
No es neces ario s uminis trar todos es tos elementos para cada pgina.
Por ejemplo, puede definir palabras clave e indicadores de contenido
para la pgina principal nicamente. Puede ver los ele mentos en la
s eccin head utilizando el men Ver, la vis ta de Cdigo de la ventana
de documento o el ins pector de cdigo.
La pes taa de text en el panel de ins ert permite ins ertar e tiquetas de
texto y permite dar formato al texto.
Nota la pes taa de texto en e l panel de ins ert parecen s imilares a
algunos botones , en el panel de properties , las funciones s on divers as
para cada tipo de botn.
Font Tag Editor: mues tra un cuadro de dialogo donde permite dar
formato al texto s e leccionado.
Bold, Italic: es tas dos opciones s on cls icos s on s implemente de
negrita y curs iva.
Application: Esta opcin permite la conexin a una base de datos.
Records et: permite definir la ruta de una bas e de datos , y en donde s e
almacenara la informacin.
Dinamic table : permite crear una tabla dinamica en una pagina, y
permite as ociar a un records et. Us ted puede modificar el as pecto de
las tablas y la region repetida us ando el panel de properties y e l
behaviors del s ervidor de la region res pectivamente.
Dinamic text: ins erte un objeto dinmico de un texto en una pgina. El
objeto de tipo texto que us ted ins erte es un artculo de un records et
predefinido, en la cual us ted puede aplicar cualquiera de los formatos
de datos de Dreamwe aver MX
MX
CAPITULO 5
Utilizar la ficha plantillas
Utilizar e l panel de marcos
Conocer las propiedades de los marcos
www.icam.com.mx
1i1111
Un template (plantillas ) es un documento que s irve para crear
mltiples pginas con el mis mo dis eo. Al cre ar una plantilla, podr
indicar qu elementos de la pgina debern permanecer cons tantes
(no editables o bloqueados ) en los documentos bas ados en es a
plantilla, y qu e lementos podrn modificars e .
Por ejemplo, s i us ted publica una revis ta electrnica, es muy probable
que el dis eo de la cabecera y el dis eo general no cambien de un
nmero al s iguiente, ni inclus o de un artculo de la re vis ta al que
ocupar el mis mo lugar en el s iguiente nmero, pero e l ttulo y los
contenidos de cada artculo s ern diferentes . El dis eador puede crear
el dis eo de la pgina de un artculo de la revis ta con te xto marcador
de pos icin en los lugares en donde irn el ttulo y el contenido (y con
es as regiones marcadas como editables ); entonces , el dis eador
puede guardar es e dis eo como plantilla. La pers ona que componga el
nuevo nmero de la revis ta crear una nueva pgina bas ada en la
plantilla, y s us tituir el texto marcador de pos icin con e l ttulo y el
texto reales del nuevo artculo.
Puede crear una plantilla a partir de un documento HTML exis tente y
des pus modificarla para que s e ajus te a s us neces idades , o bien
puede crear una plantilla comenzando de cero a partir de un
documento HTML en blanco.
Dreamwe aver guarda las plantillas con la extens in de archivo . dwt
en una carpeta llamada Templates en la carpeta raz local de s u s itio.
Si no exis te todava la carpeta Templates , Dreamweaver la crear al
guardar una plantilla nueva.
Nota: No s aque las plantillas de la carpeta Templates , ni guarde en
ella archivos que no s ean plantillas . Tampoco debe s acar la carpeta
Templates de s u carpeta raz local. Hacerlo ocas iona errores en las
rutas de las plantillas .
La mayora de las operaciones con plantillas s olamente es tn
dis ponibles cuando la vis ta de Dis eo es t activa. Si un comando
relacionado con plantillas es t atenuado cuando la vis ta de Cdigo
es t activa, haga clic en la vis ta de Dis eo.
Para guardar un documento exis tente como plantilla:
1 Elija File > Open y s e leccione un documento.
2 Cuando s e abra el documento, e lija File > Save as Template.
Nota: Si e l documento es t bas ado en una plantilla, primero debe
s epararlo de la plantilla para poder guardar el propio documento
como plantilla.
3 En el cuadro de dilogo que aparece a continuacin, s ele ccione un
s itio 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 s e guarda en la carpeta Templates con la
extens in . dwt.
Para crear una plantilla nueva en blanco:
1 Elija File > Ne w, aprece un cuadro de dialogo en el cual deber
s eleccionar la opcin de Template, y s eleccione uno. O bien tambin
lo puede hacer des de la ventana de preferencia
Edit>Preference. Y en e l cuadro de dialogo s e leccione la opcin que
dice New document, por default aparece HTML, en e l cuadro de
DEFAULT DOCUMENT TYPE des pliguela y s ele ccione HTL
Template.
Z 11 111i1
El us o ms comn de Frames (marcos ) es la navegacin. Una pgina
Web puede utilizar un marco para albergar el men de navegacin y
otro marco para el contenido de la pgina. Dado que el men de
navegacin s e encuentra en un marco, los vis itantes pueden hacer clic
en un elemento del men y el contenido apare cer en e l marco de
contenido s in que cambie el men de navegacin. De es te modo, e l
vis itante podr orientars e perfectamente en el s itio.
Hay dos formas de crear un conjunto de marcos en Dreamweaver:
puede dis earlo us ted mis mo o s eleccionarlo de una s erie de
conjuntos de marcos predefinidos . Si e lige un conjunto de marcos
predefinido s e configurarn automticamente todos los conjuntos de
marcos y marcos neces arios para crear la dis pos icin. s ta es la
forma ms s encilla de ins ertar rpidamente un dis eo de marcos en la
pgina. Slo s e pueden crear marcos en la vis ta Dis eo de la ventana
de documento.
Los conjuntos de marcos predefinidos facilitan la s e leccin del tipo de
conjunto de marcos que des ea crear.
Los iconos de conjuntos de marcos predefinidos de la categora
Marcos del panel Objetos proporcionan una repres entacin vis ual de
cada conjunto de marcos al aplicars e a un documento s eleccionado.
El conjunto de marcos s e leccionado rodea al documento actual (e l
documento en el que s e encuentra el punto de ins ercin). El re a azul
de un icono de conjunto de marcos predefinido repres enta la pgina o
el marco s eleccionado actualmente en un documento, mientras que el
rea blanca repres enta el nuevo o los nuevos marcos .
Para ins ertar un conjunto de marcos predefinido:
1 Site e l punto de ins ercin en el documento.
2 A continuacin, lleve a cabo una de es tas operaciones :
En la categora FRAMES del panel ins ert, s e le ccione un conjunto de
marcos predefinido. Para ins ertar e l conjunto de marcos , puede hacer
clic en un icono o arras trar un icono directamente al documento.
Para s eleccionar un conjunto de FRames predefinido, elija Ins ertar >
Marcos > Izquierda, Derecha, Arriba,
Abajo, Izquierda y arriba, Superior izquierda, Izquierda s uperior o
Dividir.
Antes de crear un conjunto de Frames o trabajar con Frames , haga
vis ibles los bordes de los marcos en la ventana de documento.
Para ver los bordes de los Frames de un documento, e lija View >
Vis ual Aids > Frames Borders .
Cuando s e mues tran los bordes de los marcos , s e aade es pacio
alrededor del borde del documento, lo que s irve de indicador vis ual de
las reas de marcos del documento.
Para crear un conjunto de marcos , lle ve a cabo una de es tas
operaciones :
Elija Modify > Frames et > Slit frame left, Slit Frame right, Slit Frame
up Slit Frame down.
Arras tre uno de los bordes del marco a la ventana de documento para
dividir el documento vertical u horizontalmente. Arras tre un borde del
marco por una de las es quinas para dividir el documento en cuatro
marcos nuevos .
Pres ione la tecla Alt (Windows ).
Para eliminar un Frame
Arras tre el borde del marco fuera de la pgina o has ta e l borde del
marco padre.
El panel Marcos proporciona una repres entacin vis ual de los marcos
del documento. Puede hacer clic en un marco o conjunto de marcos en
el panel Marcos para s eleccionarlo en el documento y, s eguidamente ,
ver o editar las propiedades del e lemento s eleccionado en el ins pector
de propiedades .
El panel Marcos tambin mues tra la jerarqua de la es tructura del
conjunto de marcos de una manera que puede no percibirs e en la
ventana de documento. En el panel Marcos , el conjunto de marcos
es t rodeado por un borde grues o tridimens ional; los marcos es tn
rodeados por una lnea delgada gris ; mientras que los dis tintos
marcos s e identifican a travs de s us nombres .
Para guardar un documento que es t dentro de un marco:
Haga clic en el marco para s e leccionarlo y, a continuacin, e lija File>
s ave Frame o File > Save Frame as .
Para guardar todos los archivos de un conjunto de marcos :
Elija File > Save all.
De es te modo s e guardarn todos los documentos abiertos , incluidos
los documentos individuales , los documentos de marcos y los
documentos de conjunto de marcos .
$Wa Ut ilice las lneas de seleccin de marcos de la vent ana de
document o para ident ificar los document os de conj unt o de marcos o los
document os de marcos al guardar los archivos.
Z. 11i11 11 111i1
Para mos trar e l panel de Frames , lleve a cabo una de es tas
operaciones :
Elija Windows > other> Frames .
Para s eleccionar un marco en el panel Marcos :
Haga clic en el marco en el panel Marcos .
Para s eleccionar un conjunto de marcos en el panel Marcos :
Haga clic en el borde que rodea a los marcos en e l panel Marcos .
Utilice e l ins pector de propiedades para as ignar un nombre a un
marco y definir s us bordes y s us mrgenes . Para ver todas las
propiedades del marco, haga clic en la fle cha de ampliacin que s e
encuentra en el ngulo inferior derecho de l ins pector de propiedades .
Es neces ario as ignar un nombre a cada uno de los marcos para que los
vnculos de la pgina funcionen corre ctamente.
11 Vb@VLL1 @1M@VWWVb WV M1LM
1 Sele ccione un marco lle vando a cabo una de es tas operaciones :
Haga clic en un marco en el panel Marcos .
Haga clic en un marco en la ventana de documento mientras pres iona
la te cla Alt (Windows ) o las teclas Opcin-Mays (Macintos h).
2 Elija windows > properties para abrir dicha barra. Haga clic en la
flecha de ampliacin, s ituada en la es quina inferior derecha, para ver
todas las propiedades .
3 Para as ignar un nombre al marco, es crbalo en e l campo frame
name.
Nota: Marco determina el nombre del marco actual que s e utilizar
como des tino de hipervnculos y re ferencias de s ecuencias de
comandos . El nombre de un marco tiene que es tar formado por una
s ola palabra. Se admite s ubrayado (_), pero no guiones (-), puntos (. ) ni
es pacios . Los nombres de marcos deben comenzar con una letra (no
con un nmero). No utilice palabras res ervadas de JavaScript (como
top o navigator) para los nombres de los marcos .
4 Elija una de las s iguientes opciones de marco:
Src determina e l documento de origen del marco. Introduzca un
nombre de archivo o haga clic en el icono de la carpeta para examinar
y s ele ccionar el archivo. Tambin puede abrir un archivo en un marco
colocando el puntero en el marco y eligiendo File > Open frame.
Scroll. De termina s i aparecern barras de des plazamiento cuando no
haya s uficiente es pacio para mos trar todo el contenido del marco
actual. La configuracin predeterminada de la mayora de los
navegadores es Automtico.
Mis mo tamao res tringe e l tamao del marco actual e impide que los
us uarios puedan arras trar los bordes del marco. Siempre podr
cambiar el tamao de los marcos en la ventana de documento; s in
embargo, s i es ta s ele ccionada es ta opcin, los us uarios no podrn
cambiar el tamao de los marcos en s us navegadores .
Bordes controla el borde del marco actual. Las opciones pos ibles s on
yes , No y default. Si e lige la opcin Bordes , s e anular la
configuracin de bordes definida para el conjunto de marcos . La
configuracin predeterminada de la mayora de los navegadores es S.
Un borde s lo puede des activars e cuando todos los marcos contiguos
es tn definidos como No o, cuando es tn definidos como
Predeterminado con el conjunto de marcos padre definido como No.
Border color:- es tablece un color de borde para todos los bordes
contiguos al marco actual. Es ta opcin de configuracin anula el color
de borde del conjunto de marcos .
5 Configure las s iguientes opciones de mrgenes (s i las opciones de
mrgenes no es tn vis ibles , haga clic en la flecha de ampliacin
s ituada en la es quina inferior derecha).
Margin width Es tablece en pxeles el ancho de los mrgenes izquierdo
y derecho (es decir, del es pacio que hay entre el borde del marco y s u
contenido).
Margin Height Es tablece en pxeles el alto de los mrgenes s uperior e
inferior (es decir, del es pacio que hay entre e l borde del marco y s u
contenido).
Controlar e l contenido del marco con vnculos
Para utilizar vnculos en marcos , deber es table cer un des tino para el
vnculo. El des tino es e l marco en el que s e abrir e l contenido
vinculado. Por e jemplo, s i e l men de navegacin s e encuentra en e l
marco izquierdo y des e a que el material vinculado aparezca el marco
de contenido principal, deber utilizar des tinos para todos los
vnculos del men de navegacin. El des tino tendr el nombre del
marco de contenido principal, por ejemplo, marco_principal. Cuando
el us uario haga clic en un vnculo de navegacin, el contenido s e
abrir en el marco principal.
Si des ea s e leccionar un marco para abrir un archivo en l, deber
utilizar el men emergente Des tino en el ins pector de propiedades .
Puede es tablecer la apertura de un archivo en un nuevo marco,
s us tituir informacin en el marco del vnculo o s us tituir informacin
en otro marco. Tambin puede hacer que el contenido vinculado
s obres criba el marco actual (para ello, no s e le ccione un des tino) o que
aparezca en una ventana de navegador totalmente nueva.
Cues tionario 5
1. - Definicin de plantilla
2. - Procedimiento para un panel de plantillas
3. - definicin de marco (frame)
4. - Procedimiento para ver el panel de marcos (frames )
MX
CAPITULO 6
Utilizar e l panel de comportamiento
Ins ertar s onido
Ins ertar video
Ins ertar un mail link
www.icam.com.mx
i111i11i 11i11 111111
Los comportamientos permiten a los vis itantes interactuar con la
pgina Web para modificarla de divers as maneras o provocar la
realizacin de determinadas tare as . Un comportamiento es una
combinacin de un evento con una accin que des encadena es e
evento. En el panel Comportamientos , un comportamiento s e aade a
una pgina es pecificando una accin y es pecificando luego el evento
que des encadena es a accin.
Los eventos s on mens ajes generados por los navegadores que indican
que un vis itante de la pgina ha hecho algo. Por e jemplo, cuando un
vis itante mueve el puntero s obre un vnculo, e l navegador genera un
evento onMous eOver para es e vnculo; y luego comprueba s i hay
cdigo JavaScript al que deba llamar cuando s e genera es e evento
para es e vnculo. Los diferentes elementos de la pgina tienen
definidos diferentes e ventos ; por ejemplo, en la mayora de los
navegadores onMous eOver y onClick s on eventos as ociados con
vnculos , en donde onLoad es un evento as ociado con imgenes y con
la s eccin body del documento.
Las acciones cons tan de cdigo JavaScript ya definido que realiza una
tarea es pecfica, como abrir la ventana de un navegador, mos trar u
ocultar una capa, reproducir un s onido o detener una pelcula
Shockwave. Las acciones incorporadas en Dreamweaver han s ido
cuidados amente des arrolladas por los ingenieros de Dreamwe aver
para proporcionar la mxima compatibilidad con los dis tintos
navegadores
. i11 [i1q 1q i111
Hay varios tipos de archivos y formatos de s onido, y varias formas de
aadir s onido a una pgina Web. Los factores que hay que tener en
cuenta antes de optar por un formato y un mtodo para aadir s onido
s on: s u finalidad, e l tipo de us uarios a los que es t des tinado, e l
tamao de archivo, la calidad de s onido y las diferencias en los
navegadores .
Formatos de archivo de audio
La lis ta s iguiente des cribe los formatos de archivo de audio ms
comn, junto con algunas de s us ventajas y des ventajas en relacin
con el dis eo Web.
El formato . midi o . mid (Interfaz Digital para Ins trumentos Mus icales )
es un formato de ms ica ins trumental. Muchos navegadores
reconocen los archivos MIDI y, por tanto, no requieren un plug-in. Si
bien s u calidad de s onido es muy alta, puede variar s egn la tarjeta de
s onido del us uario. Un pequeo archivo MIDI puede proporcionar un
clip de s onido de larga duracin. Los archivos MIDI no s e pueden
grabar y deben s intetizars e en un ordenador con hardware y s oftware
es peciales .
Los archivos de formato . wav (Extens in de Formas de Onda) ofre cen
una buena calidad de s onido, s on compatibles con muchos
navegadores y no requieren un plug-in. Puede grabar s us propios
archivos WAV des de un CD, una cinta, el micrfono, etc. Sin embargo,
el gran tamao de archivo limita cons iderablemente la duracin de
los clips de s onido que s e pueden utilizar en las pginas Web.
El formato . aif (Formato de Archivo de Intercambio de Audio o AIFF),
al igual que el formato WAV, ofrece buena calidad de s onido, s e puede
reproducir en la mayora de los navegadores y no requiere un plug-in.
Tambin s e pueden grabar archivos AIFF des de un CD, una cinta, el
micrfono, e tc. Sin embargo, el gran tamao de archivo limita
cons iderablemente la duracin de los clips de s onido que s e pueden
utilizar en las pginas Web.
El formato . mp3 (Audio del Grupo de Expertos en Imgenes en
Movimiento o MPEG-Audio Nivel-3) e s un formato comprimido que
reduce cons iderablemente e l tamao de los archivos de s onido. La
calidad de s onido es e xce lente : s i s e graba y comprime correctamente
un archivo MP3, s u calidad es equiparable a la de un CD. La nueva
tecnologa permite reproducir el archivo en flujo (s treaming) de modo
que el vis itante no tenga que es perar a que s e des cargue todo el
archivo para es cucharlo. Sin embargo, el tamao de archivo es mayor
que el de Real Audio, por lo que una cancin entera puede tardar
bas tante en des cargars e a travs de una conexin te lefnica normal.
Para reproducir archivos MP3, los vis itantes debern des cargar e
ins talar una aplicacin auxiliar o un plug-in como QuickTime,
Windows Media Player o Re alPlayer.
El formato . ra, . ram, . rpm o Real Audio tiene un alto grado de
compres in con tamaos de archivo ms pequeos que MP3. Permite
des cargar archivos de canciones completas en un perodo de tiempo
razonable. Dado que los archivos s e pueden reproducir en flujo des de
un s ervidor Web normal, los vis itantes pueden comenzar a es cuchar e l
s onido antes de que el archivo s e haya des cargado por completo. La
calidad de s onido es ms pobre que la de los archivos MP3, aunque los
nuevos reproductores y codificadores la me joran cons iderablemente .
Los vis itantes debern des cargar e ins talar la aplicacin auxiliar o
plug-in RealPlayer para reproducir es tos archivos .
El es table cimiento de vnculos con archivos de audio es una forma
s encilla y e fectiva de aadir s onido a una pgina Web. Es te mtodo de
incorporar archivos de s onido permite a los vis itantes optar por
es cuchar el archivo, y hace que el archivo es t dis ponible para un
mayor nmero de us uarios . Algunos navegadores no admiten los
archivos de s onido incrus tados .
Para es table cer un vnculo con un archivo de audio:
1 Sele ccione el texto o la imagen que des ea us ar como vnculo 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 es criba la ruta y el nombre del archivo
en el campo Vnculo.
Al incrus tar audio s e incorpora e l reproductor de s onido directamente
en la pgina, pero el s onido s lo s e reproduce s i los vis itantes de l s itio
dis ponen del plug-in adecuado para el archivo de s onido elegido.
Incrus te archivos s i des ea utilizar el s onido como ms ica de fondo o s i
des ea obtener un mayor control s obre la pres entacin de s onido. Por
ejemplo, puede es tablecer el volumen, la apariencia del reproductor
en la pgina y los puntos inicial y final del archivo de s onido.
Para incrus tar un archivo de audio:
1 En la vis ta de Dis eo, s ite e l punto de ins ercin en el lugar donde
des ea incrus tar el archivo.
2 Haga clic en el botn Plug-in del panel Objetos o e lija Ins ert > Media
> Plugin.
Para obtener ms informacin s obre el obje to Plug-in.
3 En el ins pector de propiedades , haga clic en el icono de carpe ta para
acceder al archivo de audio o es criba la ruta y el nombre del archivo
en el campo Vnculo.
4 Es pecifique el ancho y el alto introduciendo los valores en los
campos corres pondientes o cambiando el tamao del marcador de
pos icin del plug-in en la ventana de documento.
Est os valores det erminan con qu t amao se muest ran los cont roles de
audio en el navegador. Por ej emplo, pruebe con un ancho de 144 pxeles y
un alt o de 60 para ver cmo aparece el reproduct or de audio en Navigat or
y en I nt ernet Explorer.
.Z 111
Videos Shockwave , e l es tndar de Macromedia para multimedia
interactivo en la Web, es un formato comprimido que permite la
des carga rpida de los archivos de medios cre ados en Macromedia
Director y s u reproduccin en los navegadores de us o ms frecuente.
El s oftware que reproduce las pelculas Shockwave es t dis ponible
como plug-in para Nets cape Navigator y en formato de control
ActiveX. Cuando s e ins erta una pelcula Shockwave, Dreamwe aver
us a tanto la etiqueta obje ct (para el control ActiveX) como la e tiqueta
embed (para el plug-in) para cons eguir los me jores res ultados en
todos los navegadores . Al re alizar cambios relativos a la pelcula en e l
ins pector de propiedades , Dreamweaver adapta los datos introducidos
a los parme tros corres pondientes para las e tiquetas object y embed.
Para ins ertar una pelcula Shockwave:
1 En la vis ta de Dis eo de la ventana de documento, s ite el punto de
ins ercin en el lugar donde des ea ins ertar una pelcula Shockwave.
2 Haga clic en el botn Shockwave de l panel properties o elija Ins ert >
Media > Shockwave o arras tre e l botn Shockwave s obre el
documento.
3 En el cuadro de dilogo que aparece, s ele ccione un archivo de
pelcula.
4 En el panel de properties , introduzca e l ancho y el alto de la pelcula
en los cuadros W y H . El panel de properties mues tra inicialmente las
propiedades utilizadas con mayor fre cuencia. Haga clic en la flecha
de ampliacin, s ituada en la es quina inferior dere cha, para ver todas
las propiedades .
Nombre es pecifica un nombre para identificar una pelcula en las
s ecuencias de comandos . Introduzca un nombre en el campo s in ttulo
que aparece a la izquierda del ins pector de propiedades .
W y H es pecifican el ancho y el alto de la pelcula en pxeles . Tambin
s e pueden emplear las s iguientes unidades : pc (picas ), pt (puntos ), in
(pulgadas ), mm (milme tros ), cm (centmetros ) o % (porcentaje del
ancho o el alto de l obje to padre). Las abreviaturas deben s eguir al
valor s in es pacio de s eparacin: por e jemplo, 3mm.
File es pecifica la ruta del archivo de la pelcula Shockwave. Haga clic
en el icono de carpeta para localizar un archivo o es criba la ruta
corres pondiente.
Align determina cmo s e alinear la pelcula en la pgina. Para
obtener una des cripcin de cada opcin.
bg es pecifica un color de fondo para la zona de la pelcula. Es te color
tambin aparecer cuando la pelcula no s e es t reproduciendo
(mientras s e carga y des pus de habers e reproducido).
Reproducir permite previs ualizar la pelcula en la vis ta de Dis eo de
la ventana de documento. Haga clic en el botn Detener para
interrumpir la pelcula y volver al marcador de pos icin de
Shockwave.
Parmetros abre un cuadro de dilogo para introducir parmetros
adicionales que s e trans ferirn a la pelcula Shockwave. La pelcula
Shockwave deber es tar dis eada para recibir es tos parmetros .
ID define el parme tro opcional ID Active X. El us o ms frecuente de
es te parme tro es la trans mis in de informacin entre controle s
ActiveX.
W s pace y H s pace es pecifican el nmero de pxeles de es pacio en
blanco que habr por encima, por debajo y a ambos lados de la
pelcula.
H 111 1111i1
Correo electrnico Cuando el us uario hace clic en un vnculo de
correo e lectrnico s e abre una ventana de mens aje en blanco
(utilizando el programa de correo as ociado al navegador del us uario).
En la ventana de mens aje de correo e lectrnico, e l campo Para s e
rellena automticamente con la direccin es pecificada en el vnculo.
Para crear un vnculo de correo ele ctrnico utilizando el comando
Ins ertar vnculo de correo electrnico:
1 En la vis ta de Dis eo de la ventana de documento, s ite el punto de
ins ercin donde des ea que aparezca el vnculo de corre o e lectrnico o
s eleccione el texto que des ea mos trar como vnculo de correo
electrnico. A continuacin, lleve a cabo una de es tas operaciones :
Elija Ins ert >email link
.
En la categora Common del panel ins ert, e l boton de email link.
2 En el campo Text de l cuadro de dilogo Ins ertar vnculo de correo
electrnico, es criba o edite e l te xto que des ea mos trar en e l
documento como vnculo de correo e lectrnico.
3 En el campo email, es criba la direccin a la que s e deber enviar e l
correo e lectrnico.
4 Haga clic en OK.
Cues tionario 6
1. - Definicin de comportamiento
2. - Lenguaje en que s e generan los comportamientos
3. - Formatos de s onidos que s oporta Dreamweaver
4. - Formatos de video que s oporta Dreamweaver
5. - Ins truccin que genera un Hipervnculo de correo
electronico
MX
CAPITULO 7
Conocer que es una bas e de datos
Crear una bas e de datos
Conocer que es una tabla
Conocer que es un campo
Conocer tipo de conexin
Conectar una bas e de datos
Vis ualizar regis tros
Filtrar regis tros
Utilizar los records et ins ertion
Utilizar records et update form
Crear una pagina de detalle maes tro
Crear un repeat region
Crear paginas de login confirm
Crear paginas de res tring page
Crear redirection page
www.icam.com.mx
111 11 11 [111111i
Una base de dat os es un conj unt o de informacin relacionada con un
asunt o o con una finalidad. En Access, una base de dat os es un archivo
que puede cont ener t ablas donde se encuent ra t oda la informacin sobre
un t ema especfico, consult as, formular ios, informes ent re ot ros. Tal como
una coleccin de msica, el cont rol de alumnos en un colegio o un
direct or io t elefnico.
Z 1111 i1 111 11 11 1i 11
Micros oft Acces s proporciona dos m todos para cre ar una bas e de
datos de Acces s , Utilizando el As is tente para Bas e de datos , o bien,
puede crear una bas e de datos en blanco y, pos teriormente , agregar
las tablas , formularios , informes y dems objetos que des ee ; s te es e l
mtodo ms fle xible, pero requiere definir por s eparado cada
elemento de la bas e de datos . Cualquiera que s ea el m todo e legido,
puede modificar y ampliar la bas e de datos en cualquier momento
pos terior a s u cre acin.
Para crear una bas e de datos en blanco exis ten los s iguientes
mtodos :
1. Men Archivo / Nuevo
2. Hacer clic s obre la opcin Bas e de datos en blanco del pane l de
tareas que aparece a la dere cha de la pantalla.
1MMM
Nuevo
i11 11 i1 111 11 11
El componente bs ico de la bas e de datos es e l regis tro. Un regis tro es
un conjunto de datos relacionados que s e tratan como una s ola
entidad. Por ejemplo, un tarje ta de ftbol podra cons iderars e un
regis tro: contiene e l nombre, la fotografa, el equipo y las es tads ticas
de un jugador. Empleando la terminologa propia de las bas es de
datos , cada uno de es os elementos de informacin recibira el nombre
de campo: cada "regis tro" de tarje ta de ftbol tiene un campo nombre,
un campo fotografa, un campo equipo y varios campos de
es tads ticas .
Al juego de regis tros que comparten los mis mos campos s e le llama
tabla, porque es te tipo de informacin puede pres entars e fcilmente
en formato de tabla: cada columna repres enta un campo y cada fila
repres enta un regis tro. De hecho, la palabra columna es s innimo de
la palabra campo, y la palabra fila es s innimo de la palabra regis tro.
Una bas e de datos puede contener ms de una tabla, cada una de las
cuales tiene un nombre exclus ivo. Es tas tablas pueden es tar
relacionadas o s er independientes entre s .
Un s ubconjunto de datos extrados de una o ms tablas recibe el
nombre de juego de regis tros . Un juego de regis tros tambin es una
tabla porque es una coleccin de regis tros que comparte las mis mas
columnas . Por ejemplo, una alineacin de un equipo de ftbol en la
que s e relacionan los nombres y las pos iciones de los jugadores en el
campo s era un juego de regis tros : cons ta de un s ubconjunto de toda la
informacin pos ible s obre los jugadores , incluidos los goles las
as is tencias , las faltas , etc.
H 1111
Para crear un juego de regis tros , s e realiza una cons ulta de bas e de
datos . Una cons ulta cons ta de criterios de bs queda. Por ejemplo, la
cons ulta puede es pecificar que s lo s e incluyan algunas de las
columnas en el juego de regis tros , o que s lo s e incluyan
determinados regis tros .
Las tablas s e componen de filas y columnas de celdas que s e pueden
rellenar con texto y grficos . Las tablas s e utilizan a menudo para
organizar y pres entar informacin. Res ulta til s aber cmo s e
denominan las divers as partes de una tabla. Columna, Fila, Ce lda.
1i1
Los campos o columnas de una Tabla identifican e l tipo de dato que s e
almacenara en dicha pos icin, as i como e l nombre de es te .
REGISTRO
Conforma toda la informacin corres pondiente a las filas de es a tabla.
M i11111i 11 11
A continuacin s e des cribe la configuracin de s is tema ms s encilla
para us uarios de Windows .
Para configurar el s is tema:
1 Si es us ted us uario de Windows 95, 98 o NT Works tation, ins tale
Micros oft Pers onal Web Server (PWS).
2 Si es us ted us uario de Windows NT Server o Windows 2000,
as egres e de que Internet Information Server (IIS) es t ins talado y en
ejecucin en s u s is tema.
IIS es la vers in completa de PWS. Ya debe es tar ins talado en s u
s is tema. Si no lo es t, ins tlelo o s olicite al adminis trador del s is tema
que s e lo ins tale.
3 Si des ea re alizar el curs o prctico para ColdFus ion, ins tale
ColdFus ion Server en el s is tema.
Para obtener ins trucciones .
4 Si des ea re alizar el curs o prctico para JSP, ins tale los s iguientes
componentes en el s is tema.
Java 2 SDK, Standard Edition, para Windows
El controlador JDBC-ODBC Bridge de Sun s e ins tala automticamente
al ins talar SDK.
Un s ervidor de aplicaciones que tenga implementada la
es pecificacin JavaSe rver Pages 1. 0 de Sun.
5 Cree una s ubcarpeta en la carpeta c:\ Inetpub\ wwwroot y llmela
MyTutorialSite.
Es ta es la es tructura de carpetas corre cta:
c:\ Inetpub\ wwwroot\ MyTutorialSite
11 111
Para configurar s itio local Dreamweaver MX:
1. - e lija la opcion de s ite> new s ite
2. - en e l cuadro de dialogo es pecifique el nombre del s itio
name: nombre del s itio
local root flder: ruta de acces o a los archivo, donde s e guardaran
todos los archivo
3. - oprima el icono con forma de flder para es pecificar la ruta una vez
s eleccionada la carpeta pres ione guardar.
Nos regres ara al s itio donde empezamos s olo hay que pres ionar OK.
11 11i
Para configurar s itio remoto Dre amweaver MX:
1 Inicie Dreamweaver y elija Site > New Site. Aparecer el cuadro de
dilogo De finir s itios .
2 Sele ccione el s itio del curs o prctico ASP, ColdFus ion o JSP
predefinido y haga clic en Editar. MX defini los s itios de l curs o
prctico durante la ins talacin.
3 Haga clic en Datos remotos y comple te e l cuadro de dilogo de la
s iguiente forma: Acces o: Local/ Ne twork Carpeta remota:
c:\ Inetpub\ wwwroot\ MyTutorialSite
4 Si des ea re alizar el curs o prctico de ASP, haga clic en Servidor de
aplicaciones y comple te e l cuadro de dilogo de la s iguiente forma:
Modelo de s ervidor: ASP 2. 0. Lenguaje de s ecuencia de comandos :
VBScript o JavaScript Extens in de pgina: . as p Acces o:
Local/ Ne twork Carpeta remota: c:\ Inetpub\ wwwroot\ MyTutorialSite
Prefijo de URL: http:/ / localhos t/ MyTutorialSite. La bas e de datos del
curs o prctico es un archivo de Micros oft Acces s 97. No es nece s ario
Micros oft Acces s para realizar el curs o prctico, aunque s neces ita un
controlador capaz de leer archivos de Micros oft Acces s 97. El
controlador permite a la aplicacin Web le er el contenido del archivo
de bas e de datos . (Para ampliar conocimientos s obre controladores de
bas es de datos .
Si es us ted ingeniero de des arrollo de ASP o ColdFus ion, deber tener
ins talado un controlador ODBC capaz de leer archivos de Acce s s 97 en
el s ervidor ASP o ColdFus ion. Si s u s ervidor Web s e e jecuta en un
s is tema Windows remoto o local, es probable que el controlador
neces ario ya es t ins talado. Para averiguar s i lo es t, elija Inicio >
Configuracin > Panel de control en Windows y bus que el icono de
ODBC Data Sources . (En funcin del s is tema, el icono tambin puede
denominars e ODBC o 32bit ODBC. ) Si no encuentra el icono,
des cargue e ins tale Micros oft Data Acces s Components (MDAC) 2. 5,
que ins talar e l controlador de Acces s . Si e l icono ODBC Data Sources
es t pres ente en el Panel de control, haga doble clic en l. Aparecer
el cuadro de dilogo ODBC Data Sources Adminis trator. Haga clic en
la ficha Drivers para obtener una lis ta de controladores ins talados en
el s is tema. Bus que el controlador Micros oft Acces s Driver, vers in 3. 5
o pos terior. Si el controlador Micros oft Acces s Driver (*. mdb) no
aparece en la lis ta, des cargue e ins tale MDAC, que ins talar el
corres pondiente controlador de Acces s . Antes de comenzar a crear e l
directorio de empleados de Compas s , deber crear una conexin con
el archivo de bas e de datos del curs o prctico, compas s travel. mdb.
Si ha ins talado Dreamweaver en un s is tema Windows , durante la
ins talacin s e es table ci en el s is tema un DSN para la bas e de datos
del curs o prctico. Deber utilizar dicho DSN s i ejecuta tambin e l
s ervidor Web en el mis mo s is tema (es decir, s i utiliza Pers onal Web
Server en Windows o s i ins tal Dreamweaver en Windows NT Server o
Windows 2000).
Si el s ervidor Web s e e jecuta en un s is tema Windows remoto, puede
definir un nombre de fuente de datos (DSN) en e l s ervidor remoto y
luego utilizar dicho DSN en Dreamweaver para cre ar una conexin de
bas e de datos s encilla. Un DSN es una es pecie de acces o dire cto a una
bas e de datos . Para obtener ins trucciones s obre cmo definir uno.
U 11 11 i11i 11 11.
Si no s e ha definido ningn DSN en el s is tema que ejecuta el s ervidor
Web, deber utilizar una cadena de conexin para cre ar la conexin.
Para crear una conexin de bas e de datos en el cas o de que s e haya
definido un DSN en el s ervidor Web:
1 en el panel de ins ert haga clic en la pes taa de application y de un
clic en el boton que dice records et aparece r e l cuadro de dilogo de
Conexiones .
2 Haga clic en define Nombre de fuente de datos (DSN) de l men
emergente.
Aparecer el cuadro de dilogo Nombre de fuente de datos (DSN). En
cas o de no parecer la ventana emergente haga clic en new.
3 En el cuadro Nombre de conexin, introduzca connCompas s .
Una prctica habitual cons is te en aadir el prefijo conn a los nombres
de conexiones para dis tinguirlos de los nombres de objetos en el
cdigo.
4 Si el s ervidor de aplicaciones s e e je cuta en el equipo local,
s eleccione Compas s Travel de la lis ta de DSN, y haga clic en ok.
5 Si el s ervidor de aplicaciones s e e je cuta en un equipo remoto,
introduzca Compas s Travel en el cuadro Nombre de fuente de datos
(DSN).
6 Haga clic en Done para finalizar la definicin de la cone xin.
La nueva conexin, con Compas s , apare cer en e l cuadro de dilogo
Conexiones .
7 Haga clic en ok para cerrar e l cuadro de dilogo Cone xiones .
M i11i 1 11 111 11 11
Para crear una conexin de bas e de datos para el curs o prctico ASP:
1 En Dreamweaver, e lija Conexiones del panel ins ert en la pes taa
application.
Aparecer el cuadro de dilogo Conexiones .
2 Haga clic en el botn Define y s e leccione Nombre de fuente de
datos (DSN) del men emergente.
Aparecer el cuadro de dilogo Nombre de fuente de datos (DSN). En
cas o de no aparecer e l cuadro de las opciones de clic en botn que
New, y del men que aparece de clic en DARA SOURCE NAME (DSN)
3 Introduzca el s iguiente nombre para la nueva conexin:
connCompas s .
Una prctica habitual cons is te en aadir el prefijo conn a los nombres
de conexiones para dis tinguirlos de los nombres de objetos en el
cdigo.
4 Sele ccione Compas s Trave l de la lis ta de DSN. Si aparece es crbala
tal cual.
Dreamwe aver cre el DSN Compas s Travel durante la ins talacin.
5 Haga clic en Tes t.
Dreamwe aver intentar conectar con la bas e de datos . Si falla la
conexin, compruebe de nuevo el DSN. Si la conexin contina
fallando, compruebe el prefijo de URL del s ervidor de aplicaciones .
Pres ione OK
6 Haga clic en Done.
La nueva conexin debe aparecer en el cuadro de dilogo Conexiones .
7 Haga clic en OK para cerrar el cuadro de dilogo Conexiones . Un
s itio local indica a Dre amwe aver e l lugar en el que es tn almacenados
todos los documentos y archivos de un s itio Web concreto en el dis co
local. Debe definir un s itio local para des arrollar una aplicacin Web
utilizando Dreamweaver.
Puede utilizar Dreamweaver para des plegar la aplicacin en un
s ervidor Web mediante la definicin de un s itio remoto. Un s itio
remoto indica a Dreamwe aver e l lugar en el que es tn almacenados
todos los documentos y archivos del s itio Web en el s ervidor Web.
Para definir un sit io remot o, realice las siguient es t areas:
Defina una carpet a publicada en el servidor Web.
Defina la carpet a del sit io remot o en Dreamweaver.
1111211 1111
Un juego de regis tros es un s ubconjunto de datos extrados de una o
varias tablas de una bas e de datos . Acta a modo de fuente de datos
para las pginas dinmicas . Deber definir un juego de regis tros que
contenga s lo los regis tros devueltos por la bs queda. En el cas o de un
conjunto s imple de pginas de bs queda/ res ultados , puede crear es te
tipo de juego de regis tros definiendo un filtro.
Deber comenzar definiendo el contorno general del juego de
regis tros .
1 En el men Site> Site file, haga doble clic en el archivo connection
s ituado bajo Carpeta local.
Se abrir en Dreamweaver la pgina de res ultados s imple para e l
directorio de empleados de Compas s .
2 En el panel Vinculaciones de datos , haga clic en e l botn de s igno
ms (+) y s ele ccione Records e t (Query (cons ulta) del men
emergente. Aparecer el cuadro de dilogo Juego de regis tros s imple.
3 En el cuadro Nombre, introduzca Res ults . Es te es el nombre del
juego de regis tros . No lo confunda con el nombre de archivo de la
pgina. En es te cas o, s e trata del mis mo nombre.
4 Sele ccione la conexin connCompas s del men emergente
Conexin.
Si no aparece en el men, haga clic en el botn Define para crearla.
5 En el men emergente Tabla, s eleccione EMPLOYEES.
6 En el rea Columnas , haga clic en la opcin Seleccionado para elegir
las columnas s eleccionadas de la table EMPLOYEES.
7 Pres ione Control (Windows ) en las s iguientes columnas de la lis ta
para incluirlas en e l juego de regis tros : EMPLOYEEID, FIRSTNAME,
LASTNAME, DEPARTMENT y EXTENSION. La pgina de res ultados
mues tra informacin de cuatro de es tas columnas . Debe incluir la
columna EMPLOYEEID porque contiene informacin que identifica a
cada regis tro individual (informacin que s er til ms adelante
cuando cree una pgina de detalle).
8 Haga clic en Prueba para comprobar el juego de regis tros .
Aparecer un juego de regis tros con datos extrados de la tabla de la
bas e de datos . Haga clic en Aceptar para cerrarlo.
De forma predeterminada, e l juego de regis tros contiene todos los
regis tros de la tabla de la bas e de datos . Deje abierto por ahora e l
cuadro de dilogo Juego de regis tros . Lo utilizar a continuacin para
crear un filtro que elimine todos los regis tros que no cumplan los
criterios de bs queda
Haga clic en Ok.
Dreamweaver aade el j uego de regist ros a la list a de fuent es de dat os
disponibles en el panel Vinculaciones de dat os. Para ver los campos
definidos para el j uego de regist ros, ample la rama del j uego de regist ros.
Arrast re cada uno de los campos hacia el area de la pagina
Guarde el trabajo (1V - V).
Z 111111 1111
para filtrar regis tros s olo arras tre los campos a la hoja y lis to
11111 i1111i 111
La pgina de res ultados debe permitir a los us uarios des plazars e
hacia delante y hacia atrs por la lis ta de res ultados s i la bs queda
devuelve ms de cinco regis tros . La pgina del curs o prctico incluye
las imgenes "Previous " (anterior) y "Next" (s iguiente) para es te fin.
Su trabajo cons is te en activar es tas imgenes de forma que, cuando el
us uario haga clic en ellas , la pgina mues tre ms res ultados (en el
cas o de que exis tan).
1 Sele ccione la imagen "Previous " en la pgina.
2 En el panel s erver behaviors , haga clic en el botn de s igno ms (+) y
s eleccione Re cords et paging > move to previous records e t.
Aparecer el cuadro de dilogo Move to previous records et.
3 En el men emergente Juego de regis tros , as egres e de que es t
s eleccionado e l juego de regis tros de res ultados y haga clic en OK.
4 Repita e l procedimiento para la imagen "Ne xt", con la diferencia de
que, en es ta ocas in, deber s e leccionar Move to next records et
5 Guarde el trabajo (File > Save).
Si come te algn error, abra el panel Comportamientos del s ervidor y
haga clic en e l botn de s igno menos (-) para borrarlo.
Si es probable que las bs quedas generen gran cantidad de
res ultados , puede aadir un contador de regis tros a la pgina para
ayudar a los us uarios a conocer e l lugar en el que s e encuentran
dentro del juego de regis tros .
H 11111 1i111i 11i
La categora de Forms del panel Ins ert contiene botones que permiten
crear formularios e ins ertar e lementos de formulario.
Los formularios s on s implemente contenedores de e lementos de
formulario; los lmites de l formulario no s on vis ibles en la ventana de
documento a menos que s e s ele ccione View > vis ual aids > invis ible
elements .
Coloque el punto de ins ercin dentro de los lmites de l formulario
antes de ins ertar e l ele mento de formulario; los elementos de
formulario s ituados fuera de las etiquetas form no aparecen en todos
los navegadores . Si intenta ins ertar un elemento fuera de l formulario,
un cuadro de dilogo le preguntar s i des ea aadir una etiqueta de
formulario alrededor de dicho elemento. Haga clic en S para crear un
formulario que contenga e l elemento o en No para ins ertar el elemento
s in formulario.
Form coloca un formulario en e l punto de ins ercin.
Tex Field coloca un campo de texto en el punto de ins ercin.
Es tablezca el nombre, e l tamao y e l valor inicial en el ins pector de
propiedades .
Buttn coloca en e l punto de ins ercin un botn con Submit como valor
predeterminado de las etiquetas name y vaule. Coloque el punto de
ins ercin dentro de los lmites del formulario antes de ins ertar el
botn; los botones s ituados fuera de l formulario no aparecen en todos
los navegadores . Utilice el ins pector de propiedades para es table cer el
nombre, la etiqueta y la accin.
Check box coloca una cas illa de verificacin en el punto de ins ercin.
Es tablezca el nombre, e l valor de activacin y e l es tado inicial en e l
Radio button coloca un botn de opcin en el punto de ins ercin.
Es tablezca el nombre, e l valor de activacin y e l es tado inicial en e l
Lis t menu coloca una lis ta o men emergente en el punto de ins ercin.
Es tablezca el nombre, e l tipo y los valores iniciales en e l ins pector de
propiedades .
File field coloca un campo de archivo en e l punto de ins ercin.
Es tablezca el nombre, e l tamao y e l valor inicial en el ins pector de
propiedades . Cons ulte Permitir a los vis itantes que carguen un
archivo en s u s ervidor.
Image field coloca un campo de imagen en el punto de ins ercin.
Es tablezca el nombre, e l tamao, e l texto alternativo y el archivo de
origen en el ins pector de propiedades .
Hidden field coloca un campo oculto en el punto de ins ercin.
Es tablezca el nombre y e l valor en e l ins pector de propiedades .
Jump menu coloca un men emergente de URL en el punto de
ins ercin. Al elegir un valor de es te men, e l us uario s e tras lada al
URL. Es tablezca los valores de la lis ta en el cuadro de dilogo que
aparece.
11111 11111
El s iguiente pas o cons is te en aadir el comportamiento de s ervidor
Borrar regis tro para actualizar la tabla de la bas e de datos cuando el
us uario haga clic en el botn Submit.
Para aadir un comportamiento de s ervidor para borrar la tabla de la
bas e de datos .
1 En el panel applcation, haga clic en la pes taa de s erver behaviors ,
haga clic en e l botn de s igno ms (+) y s eleccione Actualizar regis tro
en el men emergente. Se leccione de lete record. Aparecer el cuadro
de dilogo Borrar regis tro.
2 Utilice los mens contextuales connection y dele te from table para
es pecificar la tabla de la bas e de datos que contiene los regis tros que
s e van a borrar.
3 En el men emergente s elect record from, es pecifique el juego de
regis tros que contiene e l regis tro que s e va a borrar.
4 En el men emergente unique key column, s eleccione una columna
de clave (generalmente, la columna ID del regis tro) para identificar el
regis tro de la tabla de la bas e de datos .
Si el valor es un nmero, s eleccione la opcin Numrico.
Generalmente, las columnas de clave s lo admiten valores
numricos , pero tambin pueden aceptar valores de texto.
5 En el cuadro after deleting go to, introduzca la pgina que s e debe
abrir des pus de borrar el regis tro de la tabla.
6 En el men emergente deleting by s ubmitting, es pecifique el
formulario HTML que contiene el botn Submit que enva el comando
de borrado al s ervidor.
Dreamwe aver e legir automticamente el primer formulario de la
pgina.
Haga clic en Ok.
M 11111 1111 11i
Para aadir un comportamiento de s ervidor para actualizar la tabla de
la bas e de datos .
1 En el panel Server behaviors , haga clic en el botn de s igno ms (+)
y s ele ccione update record en el men emergente.
Aparecer el cuadro de dilogo Actualizar regis tro.
2 Utilice los mens contextuales Connectn y Table to update para
es pecificar la tabla de la bas e de datos que contiene los regis tros que
s e van a actualizar.
3 En el men emergente s elecc record from, es pecifique el juego de
regis tros que contiene e l regis tro que aparece en el formulario HTML.
4 En el men emergente unique key column, s eleccione una columna
de clave (generalmente, la columna ID del regis tro) para identificar el
regis tro de la tabla de la bas e de datos .
Seleccione la opcin Numrico s i el valor es un nmero.
Generalmente, las columnas de clave s lo admiten valores
numricos , pero tambin pueden aceptar valores de texto.
5 En el cuadro after updating to go, introduzca la pgina que s e debe
abrir des pus de actualizar el regis tro de la tabla.
6 En el men emergente get value from, elija e l formulario HTML
utilizado para editar los datos de l regis tro.
UltraDev elegir automticamente el primer formulario de la pgina.
7 Es pecifique el campo de la tabla de la bas e de datos que actualizar
cada objeto del formulario. Para e llo, s ele ccione un objeto de
formulario en la lis ta Elementos de formulario y e lija una columna de
la tabla en el men emergente Columna y e l tipo de datos
corres pondiente en el men emergente s ubmit as .
El tipo de datos indica la clas e de datos que es pera recibir la columna
de la tabla de la bas e de datos (texto, numrico, valores booleanos de
cas illa de verificacin). Por ejemplo, s i la columna de la tabla s lo
acepta valores numricos , elija Numrico en e l men emergente
s ubmit as .
Dicho men incluye dos tipos de datos de Fecha. Sele ccione el tipo de
datos Fecha MS Acce s s para las bas es de datos Micros oft Acces s y e l
tipo Fecha para cualquier otra bas e de datos .
Repita e l mis mo procedimiento para cada objeto de formulario de la
lis ta Elementos de formulario.
8 Haga clic en OK.
1111 11 1111 [11 1111i11
Bs queda de regis tros
Crear la pgina de bs queda
Una pgina de bsqueda en la Web normalmente contiene campos de
formulario en los que los us uarios introducen parmetros de
bsqueda. Cuando el us uario hace clic en el botn Bus car del
formulario, s e envan los parme tros de bs queda a la pgina de
res ultados res idente en el s ervidor. La pgina de res ultados res idente
en el s ervidor, no la pgina de bs queda del navegador, es la
res pons able de recuperar los regis tros de la bas e de datos .
Para comenzar con es ta parte de la aplicacin Web, cre e dos pginas :
una pgina de bsqueda que permita a los us uarios introducir
parmetros de bs queda y una pgina de res ultados para mos trar los
regis tros encontrados . Puede inclus o combinar las dos pginas en una
s ola. Como mnimo, la pgina de bs queda debe incluir un formulario
HTML con un botn Enviar.
Para aadir un formulario HTML a una pgina de bsqueda:
1 Abra la pgina de bsqueda y s eleccione Forms del panel ins ert de
clic en en el obje to form.
Se crear un formulario vaco en la pgina. Es pos ible que tenga que
activar los Elementos invis ibles (View > vis ual aids > invis ible
elements ) para ver los lmites del formulario, que s e repres entan
mediante lneas delgadas de color rojo.
2 Aada objetos de formulario para que los us uarios introduzcan s us
parmetros de bs queda eligiendo Objetos de formulario del men
Ins ertar.
Entre los obje tos de formulario figuran los campos de te xto, los mens
de lis tas , las cas illas de verificacin y los botones de opcin. Puede
aadir tantos obje tos de formulario como des e e para ayudar a los
us uarios a definir bs quedas precis as . No obs tante, recuerde que
cuanto mayor s ea e l nmero de parmetros de bs queda de la pgina
de bsqueda, ms compleja s er la de claracin SQL.
Para obtener ms informacin s obre el ins pector, cons ulte "Crear
formularios ", de Utilizacin de Dreamweaver o la Ayuda de
Dreamwe aver (help >us ing Dreamweaver).
3 Aada al formulario un botn Enviar (Ins ert > forms > Button).
4 Si lo des ea, puede cambiar la e tiqueta del botn Enviar
s eleccionando el botn, abriendo el panel de properties (Windows >
Properties ) e introduciendo un nuevo valor en el cuadro Etiqueta.
Por ejemplo, es te es e l ins pector de propiedades de un botn con la
etiqueta "bus car":
A continuacin, deber indicar al formulario el lugar al que debe
enviar los parmetros de bs queda cuando el usuario haga clic en el
botn Submit.
5 Sele ccione el formulario eligiendo la e tiqueta <form> en el s e lector
de etiquetas que s e encuentra en la parte inferior de la ventana de
documento, como s e mues tra en la imagen.
6 En el cuadro Accin del panel de properties del formulario,
introduzca el nombre del archivo de la pgina de res ultados que
llevar a cabo la bs queda en la bas e de datos .
7 En el men emergente mthod, elija uno de los s iguientes m todos
para determinar cmo debe enviar los datos e l formulario al s ervidor.
GET enva los datos del formulario aadindolos al URL como una
cadena de cons ulta. Dado que los URL es tn limitados a 8. 192
caracteres , no utilice e l mtodo GET con formularios largos .
POST enva los datos del formulario en el cuerpo de un mens aje.
Default us a el m todo predeterminado del navegador (generalmente,
GET).
Ya ha terminado la pgina de bs queda. A continuacin deber crear
la pgina de res ultados .
Una vez que el us uario introduzca los parme tros de bs queda, la
aplicacin deber recuperar los regis tros de la bas e de datos . Es ta
tarea la realiza la pgina de res ultados .
Es tas s on las tareas que realiza una pgina de res ultados :
Obtiene los parmetros de bs queda de la pgina de bs queda.
Conecta con la bas e de datos y bus ca regis tros .
Crea un juego de regis tros a partir de los regis tros encontrados .
Mues tra el contenido del juego de regis tros .
Si la pgina de res ultados s lo tiene un parmetro de bs queda (un
s olo campo de texto, por ejemplo), podr cre ar la pgina de res ultados
s in cons ultas ni variables SQL. Lo nico que tendr que hacer es crear
un juego de regis tros y des pus aadir un filtro para excluir regis tros
que no cumplan las condiciones es tablecidas por los parmetros de
bsqueda enviados por la pgina de bsqueda.
Si la pgina de bs queda enva ms de un parmetro de bs queda al
s ervidor, deber es cribir una cons ulta SQL para la pgina de
res ultados y utilizar los parme tros de bs queda en las variables SQL.
Des pus de que Dreamweaver ins erte la cons ulta SQL en la pgina y
que s e ejecute la pgina en el s ervidor, s e comprueba cada regis tro de
la tabla de la bas e de datos . Si el campo es pecificado en un regis tro
cumple las condiciones de la cons ulta SQL, el regis tro s e incluir en
un juego de regis tros . La cons ulta SQL crea un juego de regis tros que
contiene s olamente los res ultados de la bs queda.
Por ejemplo, el pers onal de ventas puede es tar en condiciones de
informar s obre qu clientes de un rea determinada tienen ingres os
s uperiores a un nivel concreto. En un formulario de una pgina de
bsqueda, el as ociado comercial introduce un rea geogrfica y un
nivel de ingres os mnimo y luego hace clic en el botn Enviar para
enviar los dos valores a un s ervidor. En el s ervidor, los valores s e
pas an a la declaracin SQL de la pgina de res ultados , que crea un
juego de regis tros s lo con los clientes del rea es pe cificada con
ingres os s uperiores al nive l es pecificado.
i111 11111 111 1
Una pgina maes tra es una pgina en la que s e lis tan los regis tros y
los corres pondientes vnculos de cada regis tro. Cuando el us uario
hace clic en un vnculo, s e abre una pgina detalle que mues tra
informacin adicional s obre e l regis tro. Por eje mplo, a continuacin
s e mues tra una pgina maes tra de un s itio de Intranet de una empres a
ficticia:
Cuando un usuario hace clic en uno de los iconos de vis ualizacin
vinculados , s e abre una pgina detalle:
Una pgina de res ultados es un ejemplo tpico de pgina maes tra. Sin
embargo, a diferencia de la pgina maes tra des crita en es te tema, la
lis ta de regis tros de una pgina de res ultados la determina, no us ted
como dis eador, s ino el us uario. (El us uario determina la lis ta
mediante la realizacin de una bsqueda en la bas e de datos . ) Para
obtener ms informacin s obre es te tipo de pgina maes tra.
Puede utilizars e una pgina detalle para actualizar o borrar el regis tro
mos trado. Para obtener ms informacin s obre la actualizacin y
eliminacin de pginas .
Una pgina maes tra cons ta de los s iguientes e lementos :
Un juego de regis tros .
Una diagramacin de pgina para mos trar mltiples regis tros .
Un comportamiento de s ervidor Ir a pgina Detalle para abrir la
pgina detalle y pas ar el ID del regis tro en e l que ha hecho clic e l
us uario.
Una pgina detalle cons ta de los s iguientes elementos :
Una diagramacin de pgina para mos trar un nico regis tro.
Un juego de regis tros que contengan los datos del regis tro.
Un filtro de juego de regis tros para re cuperar un regis tro concreto de
la tabla de la bas e de datos o un comportamiento de s ervidor Mover a
un regis tro concreto para des plazars e a un regis tro concreto del juego
de regis tros
Tras aadir un juego de regis tros a una pgina maes tra vaca, puede
completar el juego de pginas Maes tro/ De talle en una s ola operacin
utilizando el obje to Live Juego de pginas Maes tro/ Detalle. El objeto
Live aade los s iguientes elementos a la pgina maes tra:
Una tabla bs ica con una regin repetida para mos trar mltiples
regis tros .
Una barra de navegacin por el juego de regis tros .
Un contador de regis tros .
Un comportamiento de s ervidor Ir a pgina Detalle para abrir la
pgina detalle y pas ar el ID del regis tro en e l que ha hecho clic e l
us uario.
El objeto Live tambin crea una pgina detalle s i no la ha creado
anteriormente y aade a ella los s iguientes e lementos :
Una tabla bs ica para mos trar un nico regis tro.
Un juego de regis tros filtrado para localizar y mos trar e l regis tro en
el que el us uario ha hecho clic en la pgina maes tra.
Des pus de que el objeto Live coloque los e lementos mencionados en
las pginas , podr utilizar las herramientas de dis eo de pginas de
UltraDev para pers onalizar el dis eo de las pginas o el panel
Comportamientos del s ervidor para editar los comportamientos del
s ervidor.
Para completar el juego de pginas Maes tro/ Detalle con un
objeto Live:
1 Cree una pgina maes tra vaca y aada a e lla un juego de regis tros .
As egres e de que el juego de regis tros contiene , no s lo todas las
columnas neces arias para la pgina maes tra, s ino tambin todas las
columnas neces arias para la pgina detalle.
2 Abra la pgina maes tra en la vis ta de Dis eo en el panel de ins ert
elija mas ter detail page s e t.
Aparecer el cuadro de dilogo I nsert ar j uego de pginas Maest ro/ Det alle.
En el men emergent e recordset , asegrese de que est elegido el j uego
de regist ros que cont iene los regist ros que desea visualizar en la pgina
maest ra.
4 En el rea Mas ter page field, s e leccione las columnas del juego de
regis tros que deben vis ualizars e en la pgina maes tra.
De forma predeterminada, Dre amwe ver s elecciona todas las
columnas del juego de regis tros . Si e l juego de regis tros contiene una
columna de clave e xclus iva, como, por ejemplo, recordID,
s eleccine la y haga clic en el botn de s igno menos (-) para que no
aparezca en la pgina.
5 Si des ea cambiar el orden en el que aparecen las columnas en la
pgina maes tra, s e leccione una columna de la lis ta y haga clic en la
flecha arriba o abajo.
En la pgina maes tra, las columnas del juego de regis tros es tn
dis pues tas horizontalmente en una tabla. Al hacer clic en la fle cha
arriba, s e des plaza la columna hacia la izquierda; al hacer clic en la
flecha abajo, s e des plaza la columna hacia la derecha.
6 En el men emergente link to deatil from des de, e lija la columna del
juego de regis tros que mos trar un valor que tambin s ervir como
vnculo con la pgina detalle.
Por ejemplo, s i des ea que cada nombre de producto de la pgina
maes tra tenga un vnculo con la pgina detalle , elija la columna del
juego de regis tros que contiene los nombres de los productos .
7 En el men emergente pas s unique key, elija la columna del juego
de regis tros que contiene valores que identifican a los regis tros .
Normalmente, la columna elegida es la que contiene el nmero de ID.
Es te valor s e pas a a la pgina detalle para que pueda identificar el
regis tro elegido por el us uario.
8 Es pecifique el nmero de regis tros que deben mos trars e en la opcin
de s how.
9 En el cuadro Detail page Name, haga clic en Brows e y localice el
archivo de pgina detalle que ha creado o introduzca un nombre para
que el objeto Live la cre e automticamente.
10 En el rea Campos de pgina De talle, s eleccione las columnas que
deben vis ualizars e en la pgina detalle.
De forma predeterminada, Dre amwe aver s e lecciona todas las
columnas del juego de regis tros de la pgina maes tra. Si el juego de
regis tros contiene una columna de clave e xclus iva, como, por
ejemplo, recordID, s eleccinela y haga clic en el botn de s igno
menos (-) para que no aparezca en la pgina detalle .
11 Si des ea cambiar e l orden en el que aparecen las columnas en la
pgina detalle , s eleccione una columna de la lis ta y haga clic en la
flecha arriba o abajo.
En la pgina detalle , las columnas del juego de regis tros es tn
dis pues tas verticalmente en una tabla. Al hacer clic en la flecha
arriba, s e des plaza la columna hacia arriba; al hacer clic en la flecha
abajo, s e des plaza la columna hacia abajo.
12 Haga clic en OK.
El objeto Live crea una pgina detalle (s i no la ha creado us ted antes ) y
aade contenido dinmico y comportamientos de s ervidor tanto a la
pgina maes tra como a la pgina detalle.
13 Pers onalice las pginas maes tra y detalle para adaptarlas a s us
neces idades .
Puede pers onalizar totalmente el dis eo de ambas pginas utilizando
las herramientas de dis eo de pginas de Dreamweaver. Tambin
puede editar los comportamientos de s ervidor haciendo doble clic en
ellos en el panel Comportamientos del s ervidor.
U 11111 i1111i 1
El botn de records et navigation s tatus permite ver la pos icin actual
de la pgina que tiene la bas e de datos .
Por ejemplo
1 de 1 de 10, nos dice que es tamos en el primer regis tro de 10 que
tenemos .
ZM 11111 111i
La opcin de repeat region permite es pecificar cuantas veces s e
repetir la regin s eleccionada de una conexin de bas e de datos .
Z 11i i111i
Para es table cer un login confirm deber tener tres hojas en modo de
vis ta dis eo.
Para crear un login confirm s iga las s iguientes intrucciones
1. - realice s u conexin a una bas e de datos (ve as e tipos de conexin)
2. - cre e un formulario con las s iguientes nombres
introdus ca un form
dentro del form es criba us uario, ins erte un te xtfie ld
de nuevo dentro del form es criba contras ea e introdus ca un s egundo
textfield
ins erte un button
3. - s e leccione el textfield de la e tiqueta de contras ea y en el panel de
properties s eleccione pas word.
4. - vaya al panel de s erver behaviors pres ione le s igno (+) y de la lis ta
des plegable s eleccione us er authentification > log in us er aparecer
un cuadro de dialogo.
5. - verifique que los textfield apres an en forma odenada
6. - En el cuadro de Validate us ing connection pres ione la ventana
des plegable para s eleccionar la bas e de datos .
En el campo if login s ucceeds , go to es pecifica pagina que s e abrir en
cas o de que s ea corre cta la contras ea.
En campo de if login fails , go to:- es pecifica la pagina que s e abrir en
cas o de que la contras ea s ea errnea.
ZZ 1111i 111
Una vez terminado de crear pagina del us uario, abra el documento de
us uario o la pagina que va acceder el us uario en cas o de que s u
contras ea s ea correcta , en es te documento lo vamos a res tringir:
Para res tringir el acces o a una pgina haga lo s iguiente.
1. - abra e l documento
2. - haga la conexin a la bas e de datos
3. - una vez hecha la conexin vaya al panel de application y pres ione
la pes taa que dice s erver behaviors
4. - pres ione el s igno (+) de l men des plegable s eleccione
authentification> Res trict acces to page,
en el cuadro de dialogo active la opcin que dice Res trict bas ed on.
5. - en e l campo de if acces s denied, go ot.
Es pecifique la pagina que s e abrir.
Z 1111111i 111
puedes redireccionar una pagina pas ado un tiempo con las e tiquetas
META.
ejemplo
<head>
<meta http-equiv=refres hcontent=15;URL=www. ibm. com>
<title >pagina redireccionada a IBM a los 15 s egundos <title>
</ head>
Cues tionario 7
1. - Concepto de:
Bas e de datos
Tabla
Campo
Regis tro
2. - Definicin de records et
3. - Que es ODBC
4. - Utilera de Windows para configurar DNS de s is tema
5. - Definicin entre DNS de s is tema y DNS de usuario
6. - Que s ignifica SQL
7. - Que es un formulario
8. - Definicin entre mtodo POST y GET

Curso de Macro Media Dream Weaver MX

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Curso de Macro Media Dream Weaver MX

Cargado por

Copyright:

Formatos disponibles

MACROMEDIA DREAMWEAVER MX

Instituto de Computacin Activa de Mxico S. C. 1

También podría gustarte