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


L'objectiu d'aquesta pràctica és realitzar un menú desplegable on els continguts siguin enllaços a altres pàgines.

   
Desplegable amb enllaços
   
Pràctica

Creeu una pàgina nova des de Archivo | Nuevo i Pagina básica | HTML.

Poseu a l'inici de la pàgina un text descriptiu de l'activitat que realitzarà, per exemple: Desplegable amb enllaços.

Desplegable amb enllaços. (Clicar per veure el resultat final).

 

Feu dos canvis de línia i inseriu una taula amb l'opció del menú Insertar | Tabla, o bé cliqueu sobre la icona Tabla, apliqueu les dades següents:

  • Una columna, Columnas 1
  • Dues files, Filas 2
  • Ancho tabla 300 píxels
  • Grosor borde 1

A la primera fila de la taula, introduireu el títol concret d'aquest apartat. Enllaços d'educació .

A la segona fila, inseriu un control formulari, ja estudiat en la pràctica anterior, i dins d'ell un control Menú de salto.

   
 
Inserir formulari
   
 

A l'introduir el menú de salt, s'obre una finestra on s'ha de donar la informació necessària per complir l'objectiu. En concret demana:

  • Nom o etiqueta que ha de sortir en el menú desplegable
  • URL on ha d'anar al clicar sobre ell
 
Dades del control
   
 

D'aquesta manera anireu introduint, per parells de valors (nom, URL), tots els ítem que desitgeu.

  El resultat final ha de ser aproximadament aquest:
   
 
Menú desplegable
   
Atenció ! Si voleu afegir-hi altre categoria, només caldrà tornar a realitzar el procés en un altre fila de la taula, o bé, en un altre taula.
   
  Podeu centrar el control en la casella de la taula només seleccionant-lo, i anar al menú Texto | Aliniar | Centro
   
 

El codi generat pel Dreamweaver MX 2004 és una mica complicat, però també ho podeu fer manualment, afegint el següent codi en el lloc on volem situar el menú desplegable. Situeu-vos al lloc on voleu el desplegable, activeu la pestanya Código, i inseriu al codi següent, podeu fer copiar i enganxar..

   
 
<FORM NAME="f1">
<SELECT NAME="s1">
<OPTION VALUE="http://www.xtec.net.htm">XTEC
<OPTION VALUE="http://www.cat365.net/">Cat365
<OPTION VALUE="http://www.gencat.net/educacio/">Educació
</SELECT>
<INPUT TYPE="BUTTON" VALUE="Anar-hi"
  onClick="top.location.href=document.f1.s1.options
  [document.f1.s1.selectedIndex].value">
</FORM>
   
   
 
Amunt