Construcció de la web amb marcs

Trossejar la interfície

El procés de disseny ha acabat i comença ara el muntatge de la pàgina. Creeu una carpeta anomenada rocknet a c:\cursd98\m6\ i poseu-hi la imatge rocknet.png que heu desenvolupat a les pràctiques anteriors. Obriu la imatge amb el Fireworks MX 2004. Comproveu que al pannell Fotogramas s'ha activat el Fotograma 1. Com que heu de tallar les imatges i més endavant aplicareu efectes d'imatges de substitució, cal assegurar-se que el trossejament no deixi parts de la interfície mal col·locades. Com ja heu comprovat a la pràctica 4 del mòdul anterior, les divisions que feu en un fotograma afecten per igual tots els altres fotogrames de la imatge.

Feu clic sobre la icona Herramienta división de l'eina Web. Ja sabeu que el funcionament d'aquesta eina s'assembla a l'eina Puntero, és a dir, cal fer un clic i, mantenint premut el botó primari del ratolí, cal desplaçar-se fins allà on vulgueu que s'acabi la selecció.

Traceu divisions fins a obtenir aquest resultat:

Noteu que a les divisions heu agafat uns tros del marc de continguts i heu evitat tallar el tag line. Ho feu per prevenir els errors de representació que cometen algunes versions dels navegadors.

Feu clic al botó Aceptar i després a la finestra Exportar al botó Guardar.

Si ara feu una ullada des de l'Explorador del Windows a c:\cursd98\m4\rocknet, veureu tots aquests fitxers:

Preparar les pàgines

Partireu de la pàgina out.htm que ha generat el Fireworks. Obriu-la al Dreamweaver MX 2004.

Veureu que el fons de la pàgina apareix amb el color vermell de la interfície. Per modificar-lo, cal anar al menú Modificar I Propiedades de la página. A la finestra que s'obre, seleccioneu el color #FFFFFF al camp Fondo i feu clic al botó Aceptar.

Passeu ara un moment el ratolí pel marge superior de la pàgina. Hi ha un moment en què el ratolí es converteix en una fletxa negra que apunta cap avall i permet seleccionar una columna de la taula.

• Seleccioneu la primera columna i premeu Control + C.
• Obriu el menú Archivo | Nuevo per crear una nova pàgina.
• Deseu la pàgina buida com a esquerra.htm a la carpeta c:\cursd98\m6\rocknet.

Si no deseu ara la pàgina a la mateixa carpeta, les referències de les imatges no seran vàlides quan les enganxeu i no les veureu.

Premeu Control + V per enganxar la columna a la pàgina buida. Ja teniu la pàgina del marc esquerre. Torneu-la a desar i tanqueu la pàgina.

Repetiu el mateix procediment per fer la pàgina del marc superior. Primer, mantenint premuda la tecla Control, feu clic a la segona cel·la per seleccionar-la (si no premeu Control, només seleccionareu la imatge; cal seleccionar la cel·la i la imatge que conté).

Després, premeu Control + C. Creeu una pàgina nova i deseu-la com a superior.htm a la carpeta c:\cursd98\m6\rocknet. Premeu Control + V i deseu els canvis.

Per acabar de muntar la web i establir els vincles, hem preparat una sèrie de pàgines de continguts. Les trobareu a la carpeta ../materials/m6/rock. Copieu totes les pàgines a la carpeta c:\cursd98\m6\rocknet. Si treballeu connectats, podeu descarregar el fitxer m6.zip, que conté tots els materials necessaris per a les pràctiques d'aquest mòdul.

La pàgina de definició de marcs

Ja teniu fetes totes les pàgines de continguts i, per tant, podeu ocupar-nos de la pàgina de definició de marcs. Tanqueu totes les pàgines que tingueu obertes i treballeu en una pàgina buida.

Recordeu les explicacions de la Pràctica 1. Primer inseriu un conjunt de marcs predefinit: obriu la barra de menú Diseño | Marcos i escolliu l'opció Marcos izquierdo y superior anidado. Ja teniu la divisió en tres marcs.

Ara aneu a Archivo | Guardar conjunto de marcos como i deseu la pàgina buida com a index.htm a la carpeta c:\cursd98\m6\rocknet.

Inserir les pàgines

Inserireu a cada marc la pàgina corresponent. Aneu al menú Ventana | Marcos per obrir el pannell Marcos. Feu clic al marc superior (topFrame).

Al camp Origen del pannell Propiedades esborreu el que hi ha. Escriviu superior.htm (ja que index.htm i superior.htm són a la mateixa carpeta).

També podeu prémer el botó Buscar el archivo i seleccionar el fitxer superior.htm.

De la mateixa manera, inseriu la pàgina esquerra.htm al marc esquerre i la pàgina benvinguts.htm al marc principal.

Deseu els canvis amb Archivo | Guardar todo.

Eliminar els marges

Les mides dels marcs encara no estan ajustades. Però, a banda d'això, observeu que la imatge del marc superior està separada del marc esquerre. Això es deu als marges que els navegadors deixen entre la finestra i el contingut de la pàgina (no oblideu que els dos marcs contenen pàgines diferents). A la web de les pràctiques 1i 2 no teníeu aquesta dificultat, perquè no hi havia cap imatge que hagués de continuar d'un marc cap a l'altre.

Per evitar aquest problema, heu pres la precaució de dissenyar la interfície a 780 píxels i incloure ja els marges a la imatge. De manera que ara podeu posar tots els marges a 0 i la pàgina quedarà encaixada:

• Feu un clic a qualsevol part buida de la pàgina del marc esquerre. A la barra de títol del Dreamweaver MX 2004 hi posarà rocknet/esquerra.htm, indicant que aquesta és la pàgina activa.
• Obriu Modificar | Propiedades de la página i poseu 0 a tots els marges.

Feu el mateix amb superior.htm. La pàgina de continguts la podeu deixar com està.

Algunes versions del Netscape es mengen uns quants píxels de la part interior del marc, encara que ho hàgiu fet tot correctament. L'únic remei és no posar res essencial en aquesta franja quan dissenyeu la interfície (en aquest cas, el tag line) i endur-vos una part del marc de continguts quan trossegeu.

Ajustar els marcs

Ja només queda ajustar les mides dels marcs. Primer, cliqueu sobre la primera imatge de la taula, la que conté la paraula rock del logotip. Noteu que el pannell Propiedades dóna informació sobre les mides de la imatge. Anoteu-les en un paper, ja que corresponen a l'amplada i l'alçada que hauran de tenir els marcs.

Al pannell Marcos, seleccioneu el primer conjunt de marcs. A la dreta del pannell Propiedades veureu Selección Fila Col. i el gràfic que vam explicar a la pràctica 1. Heu de substituir el valor del camp Columna, que ara és 80, per l'amplada de la primera imatge.

Després, seleccioneu el segon conjunt de marcs i al camp Fila canvieu 80 per l'alçada de la primera imatge.

Seleccioneu Archivo | Guardar todo i ja podreu veure el resultat amb F12.

Si veieu que la zona de continguts apareix molt separada de la zona superior, podeu provar a donar valors diferents als exposats anteriorment quant a l'alçada i ajustar més les distàncies (el model té adjudicat un valor de 60). Procureu, però, no ocultar parts de la zona superior de la interfície.

Perquè a la pàgina de continguts no aparegui la barra de desplaçament lateral, heu inserit el contingut en una taula de 622 píxels d'ample. El càlcul que heu fet és 760 menys els 138 píxels del marc esquerre. Si us surt la barra, és perquè el vostre marc esquerre és més ample, i en conseqüència, caldrà reduir la taula de la pàgina de continguts.

Vincles amb mapa d'imatge

Per fer els vincles del marc superior, utilitzareu la tècnica del mapa d'imatge. El procediment és senzill: delimitar una zona rectangular al voltant del text i establir un vincle entre cada zona i la pàgina corresponent.

Seleccioneu la imatge del marc superior fent-hi un clic i observeu el pannell Propiedades. A la part inferior esquerra hi posa Mapa i hi ha una sèrie d'eines que serveixen per fer el mapa.

Les zones que dibuixareu seran rectangulars. Per tant, feu clic al primer botó (Herramienta Zona interactiva rectangular) i traceu un rectangle al voltant de la paraula Inici. La paraula queda coberta per un rectangle de color blau i el pannell Propiedades ha canviat d'aspecte:

Al quadre Vínculo del pannell Propiedades esborreu el caràcter # i escriviu-hi el nom de la pàgina: benvinguts.htm (ja que la pàgina és a la mateixa carpeta). També podeu fer clic al botó Buscar el archivo i seleccionar el fitxer benvinguts.htm.

Com que aquesta pàgina s'ha d'obrir al marc de continguts, a Destino poseu mainFrame.

Si us queda malament algun rectangle, cliqueu a la fletxa (Herramienta Puntero de zona interactiva), al rectangle i esborreu-lo amb la tecla Suprimir. Utilitzeu, també, aquesta eina per seleccionar la zona si voleu modificar el vincle.

Amb el mateix procediment, feu els vincles Mapa de la web i Enllaços. Les pàgines es diuen mapa.htm i links.htm. El vincle Altres números duria a una portada amb els diferents números de la revista. Per tant, hauríeu de posar _parent o _top a Destino.

Per fer el vincle de correu, traceu la zona, esborreu el caràcter # i escriviu mailto:hbogart@xtec.net.

Deseu els canvis amb Archivo | Guardar todo i comproveu-ne el resultat amb F12.

A l'Internet Explorer, després de fer clic en algun d'aquests vincles, notareu que hi queda un marc de selecció que fa lleig. Podeu eliminar-lo afegint onClick = "window.focus()" al codi del mapa. Per exemple:

<area shape="rect" coords="0,1,2,3" href="x.htm" target="mainFrame" onClick = "window.focus()">

Els altres vincles

Al marc esquerre només us cal seleccionar la imatge de cada botó i establir-hi el vincle corresponent:

• Feu clic al botó Elvis Presley.
• Al camp Vínculo del pannell Propiedades escriviu elvis.htm o bé premeu el botó Buscar el archivo i seleccioneu el fitxer elvis.htm.
• A Destino poseu mainFrame.

Repetiu el procés amb cada botó. Deseu els canvis amb Archivo | Guardar todo i comproveu-ne el resultat amb F12.

Al mòdul 7 creareu les imatges canviants (rollover technique) dels vincles.

Observar el codi

Com podeu observar, la definició dels dos marcs verticals correspon a les línies amb les etiquetes <FRAMESET> </FRAMESET>, que estan marcades amb el nombre 1. L'etiqueta cols="140,*" indica que hi ha dues columnes, la primera amb 140 píxels i la segona tan gran com calgui (*) per omplir la finestra del navegador.

Aquest conjunt de marcs consta de dues parts: la que està marcada amb el nombre 3 és el marc de l'esquerra, amb nom leftFrame, i té com a contingut la pàgina esquerra.htm, i la que està senyalada amb un 2, que és un altre conjunt de marcs. Aquesta vegada el conjunt de marcs (2) és horitzontal, com indica l'etiqueta rows="60,*". Hi ha dues files (rows), la primera de 60 píxels i la segona sense límit.

Les línies amb nombres 4 i 5 corresponen als dos marcs horitzontals: la primera és el marc amb nom topFrame, que conté la pàgina superior.htm, i la segona el marc mainFrame, que té el contingut principal de la pàgina i que en la definició conté la pàgina benvinguts.htm.

Per últim, hi ha una part del codi limitat per les etiquetes <NOFRAMES> i </NOFRAMES> que literalment podria significar: Si no hi ha frames, què?

Quan es van introduir els marcs, hi havia versions dels navegadors que no els sabien interpretar. Per evitar aquest problema, es posava un text alternatiu entre aquestes dues etiquetes i s'enviava a aquests navegadors. Actualment, tots els navegadors interpreten correctament els marcs, de manera que tot el codi que està marcat amb el número 6 es podria eliminar i la pàgina es visualitzaria correctament. De qualsevol manera, el Dreamweaver MX 2004 sempre ho genera quan es crea un conjunt de marcs i vosaltres ho deixareu tal com està. De fet, les normes d'accessibilitat recomanen mantenir aquestes etiquetes amb un text alternatiu.