Enrera
 Mòdul 8
Disseny i creació de pàgines web
  Pràctica
1
2
3
4
5
   
Exercicis
Exercicis
 
 

Obrir una finestra d'informació al navegador


En alguns casos, és necessari que un enllaç obri una nova finestra dels navegadors amb informació complementària: així no es perd de vista la pàgina principal. És un recurs que s'utilitza sovint.
 
 

Per això, només s'ha de fer l'enllaç amb el fragment de codi següent:

   
  
<A HREF="http://..."
  onClick="window.open('http://...','finestra',
  'directories=0,height=240,location=0,menubar=0,
  resizable=0,screenX=100,screenY=100,scrollbars=0,
  status=0,toolbar=0,width=320'); return false;">
Nova finestra
</A>
   
  Fixeu-vos que s'afegeix un paràmetre nou a l'etiqueta <A HREF= ....>. Quan es faci clic (onClick) sobre l'enllaç, s'obrirà una finestra nova (window.open). Els tres valors de window.open són l'adreça de la pàgina, un nom que servirà per referenciar la finestra creada, i els valors que defineixen la mida i l'aspecte de la finestra nova.
 
Per als paràmetres següents, n és un valor lògic que indica cert (1) o fals (0). Quan el valor és fals, no es fa l'acció.
   
 
directories=n
 		Mostra (o no) la barra d'eines personal.
location=n Mostra (o no) la barra d'eines d'ubicació.
menubar=n Mostra (o no) la barra de menús.
toolbar=n Mostra (o no) la barra d'eines de navegar.
scrollbars=n Mostra (o no) les barres de desplaçament.
resizable=n Es podrà canviar (o no) la mida de la finestra.
status=n Mostra (o no) la barra d'estat.
 
   
  Per als paràmetres següents, n és un valor en píxels.
   
   
height=n Alçada de la finestra.
width=n Amplada de la finestra.
screenX=n Distància a la part esquerra de la pantalla.
screenY=n Distància a la part superior de la pantalla.
   
  És imprescindible escriure l'etiqueta en una sola línia, sinó no funciona. A més, els paràmetres dels atributs de la finestra han d'anar tots seguits, separats per comes i sense espais.
   
  Incorporeu aquestes etiquetes utilitzant la Vista código de la barra d'eines del Dreamweaver. 

El programa disposa d'una opció per fer aquest efecte des de la finestra:
Ventana I Comportamientos I Abrir ventana del navegador. L'elaboració d'aquest es tractarà al curs de disseny de pàgines web avançat.

   
   
Obrir una nova finestra dels navegadors
   
Pràctica

Creeu un document nou amb el Dreamweaver MX 2004 (Archivo | Nuevo i Página básica | HTML).

Introduïu el text següent a la pàgina creada:

   
 

Cursos D72:

Finestra d'ajut

  El resultat al navegador serà el següent:
 
 

Guardeu el document al vostre espai de treball amb el nom exercici_a.htm.

Amb aquest pas, ja teniu creada la finestra d'ajut (la que s'obrirà amb unes característiques estipulades per l'ordre de la URL, la finestra "filla").
   
  Seguidament, creeu la finestra que cridarà a l'anterior (la finestra "mare").
   
 

Creeu un document nou amb el Dreamweaver MX 2004 (Archivo | Nuevo i Página básica | HTML).

Introduïu el text següent a la pàgina creada:

   
 

Demostració d'apertura d'una finestra:

s'obrira una finestra d'ajut
   
 

Situeu-vos davant s'obrirà... i aneu a la visualització de codi font des de la pastanya Código, tal com s'ha fet a la pràctica anterior.

Escriviu el text següent (podeu utilitzar copiar i enganxar).

 

<a href="exercici_a.htm" onclick="window.open('exercici_a.htm','w','directories=1,
height=200,location=0,menubar=0,resizable=0,screenX=100,screenY=100,scrollbars=0,
status=0,toolbar=0,width=200'); return false">Clicant en aquest enlla&ccedil; </a>:
   
 

Feu un cop d'ull a la línia que estableix la URL. Els ítems ja han estat explicats al paràgraf anterior.

El nom del fitxer que serà cridat és: exercici_a.htm. Observa que el nom s'ha de posar dues vegades.

Al final de la línia surt el literal on estarà l'enllaç.

   
 

Demostració d'apertura d'una finestra:

Cliqueu per obrir una finestra d'ajut: s'obrirà una finestra d'ajut

 
   
 

Torneu al mode de visualització de disseny i guardeu el fitxer, des de l'opció Archivo | Guardar como..., amb el nom exercici05.htm.

Compte!: els dos documents han de ser dins el mateix directori (carpeta).
 

 
Atenció ! Si necessiteu més enllaços d'aquest tipus, només cal repetir el procés.

 
   
   
 
Amunt