m5: elaboraciÓ de taules i capes › ~carnal2 › dw › ej_taules › taules_i_capes.pdf · dret...

Mòdul 5 Página 1 de 25

M5: ELABORACIÓ DE TAULES I CAPES

TAULES

Les taules representen una eina de treball molt potent que facilita el control sobre l'estructura vertical i horitzontal de les pàgines HTML i permeten disposar dades, text, imatges i efectes a la pàgina web, garantint-ne una visualització correcta. Les taules tenen tres elements bàsics: Files (espai horitzontal), Columnes (espai vertical i Cel·les (contenidors que s'originen en les interseccions de les

files i les columnes).

És molt recomanable utilitzar la vista de Disposición per al disseny de pàgines. Aquesta vista facilita

la utilització de taules com a estructura subjacent quan s'elabora el disseny de la pàgina.

CREAR UNA TAULA

La finalitat d'aquesta pràctica és la creació d'una taula a partir de les dades estadístiques d'ús del correu electrònic a la web del XTEC.

Obriu el Dreamweaver. Apareixerà una pàgina en blanc. Definiu-ne l'aspecte general amb l'opció de la barra de menú Modificar I Propiedades de la página. Poseu el títol de la pàgina Ús del correu electrònic i doneu les directrius (color de fons, text, colors dels vincles, marges...) que desitgeu. Per exemple:


Una vegada heu canviat les propietats de la pàgina, teclegeu a la part superior de la pàgina el títol de la taula (lletra Arial, mida 2, color negre i negreta): Estadística de correu electrònic (professorat i centres docents) i a continuació passeu a inserir una taula.

Per inserir la taula, feu clic al botó Tabla de la categoria Común de la barra Objetos:

També podeu activar el menú Insertar I Tabla:

Una vegada feta una de les dues accions anteriors, apareixerà el quadre de diàleg Insertar tabla. Aquest quadre de diàleg sempre manté els valors de la configuració més recent introduïda per a una taula. Ompliu el quadre amb els valors següents:

Si especifiqueu l'amplada de la taula amb píxels i no amb percentatge, eviteu que aquesta canviï de mida i es redimensioni al navegador produint efectes no desitjats. L'aspecte de la taula serà aquest:


Teclegeu els valors següents a la taula que acabeu de crear:

Any Missatges enviats (milers) Volum (Mb) de missatges enviats Missatges rebuts (milers) Volum (Mb) de missatges

rebuts

1996 257 2.775 447 3.923

1997 1.235 24.565 2.257 35.846

1998 2.654 79.780 4.455 96.671

1999 4.058 163.644 5.391 158.613

2000 6.369 333.284 6.730 274.702

Veureu que el Dreamweaver redimensiona automàticament les cel·les adaptant-les al text que s'escriu (generalment s'amplien en horitzontal per donar cabuda a la paraula més llarga i, a continuació, s'amplien en vertical) i el col·loca per defecte arrenglerat a l'esquerra. Comproveu com es visualitza la pàgina amb els navegadors.

Creeu la carpeta m5 a c:\mpidal05. Deseu la pàgina a l'interior d'aquesta carpeta amb el nom estadistica.htm.

MODIFICAR L'ASPECTE D'UNA TAULA

Aquest apartat de la pràctica ens ajudarà a conèixer com canviar l'aparença i els components de la taula mitjançant la configuració de les seves propietats.

El Dreamweaver, una vegada creada la taula, permet modificar-ne l'aparença i l'estructura, i afegir-hi contingut; eliminar, dividir, combinar, afegir files i columnes; modificar les propietats de taula, columna, fila i cel·la (alineació, color...) i dels elements que es trobin al seu interior (text...), etc.

Per seleccionar tota la taula i aplicar els canvis que desitgeu, podeu optar per fer clic al cantó superior dret de la taula o a qualsevol punt del contorn dret o inferior, o bé fer clic a la taula i escollir de la barra de menú Modificar I Tabla I Seleccionar tabla. Per fer aquest canvi de configuració, el programa disposa de l'eina Inspector de propiedades.

Si no teniu activada aquesta finestra, obriu el menú Ventana I Propiedades. Per veure totes les

propietats, feu clic a la fletxa d'ampliació, situada al cantó inferior dret.

Podeu modificar i/o donar valors a cadascun d'aquests camps:

Taula per introduir un nom per a la taula. Filas i Cols per modificar el nombre de cadascuna. An i Al per especificar l'amplada i l'alçada amb píxels o com a percentatge de la finestra del

navegador. Escriviu 100 al camp An i activeu l'opció %. Observeu com la taula s'ha ajustat a


l'amplada de la finestra del programa. Si canvieu l'amplada d'aquesta finestra, la taula s'adaptarà mantenint el percentatge que heu indicat. Torneu a escriure els valors de la taula en 450 píxels.

Alinear, per especificar com cal arrenglerar la taula amb altres elements del mateix paràgraf (text, imatges...).

Els botons Borrar alto de fila i Borrar ancho de columna per esborrar tots els valors

d'alçada de fila i amplada de columna de la taula.

Els botons Convertir ancho de tabla a píxeles per convertir l'amplada de la taula expressada en percentatge a píxels i Convertir ancho de tabla a porcentaje per convertir l'amplada de la taula expressada en píxels a un percentatge de la finestra del navegador.

Rell. celda per especificar el nombre de píxels que hi ha entre el contingut i el límit de la cel·la (encoixinament).

Esp. celda per especificar el nombre de píxels que hi ha entre les cel·les de la taula. Modifiqueu el valor 1 i substituint-lo per 0.

Borde per especificar l'amplada del contorn de la taula en píxels. Recordeu que la majoria de navegadors mostren el contorn com una línia tridimensional quan el seu valor és superior a 0. Modifiqueu el valor 0 susbtituint-lo per 1.

Col. borde per seleccionar el color de contorn per a tota la taula. Feu clic sobre el camp i seleccioneu el valor de color #000099 (també podeu escriure directament aquest codi hexadecimal). Observeu el canvi.

Col. fondo per seleccionar el color de fons de la taula. Feu clic sobre el camp i seleccioneu el valor de color #FFFFCC. Visualitzeu el canvi.

Aquesta opció també permet establir una imatge com a fons de la taula. Recupereu la imatge correu.gif i deseu-la a la carpeta c:\mpidal04\m5 junt amb l'arxiu estadistica.htm que ja teniu. Feu clic sobre la icona carpeta Buscar archivo, que es troba a la dreta del camp Img. S'obre el quadre de diàleg Seleccionar imagen. Seleccioneu l'arxiu correu.gif. Visualitzeu l'aspecte de la taula. Deseu la pàgina estadistica.htm.

Haureu observat que la imatge encaixa, ja que té la mateixa mida que la taula. Si voleu posar una altra imatge més petita a l'interior de la taula, es produirà la repetició automàtica de la imatge fins que l'ocupi tota. Podeu fer la prova repetint els passos per inserir una imatge explicats anteriorment. Utilitzeu en aquest cas l'arxiu sobre.gif. Una vegada visualitzeu l'efecte, torneu a inserir la imatge correu.gif i deseu la pàgina estadistica.htm.

MODIFICAR L'ASPECTE DE COLUMNES, FILES I CEL·LES

Una vegada configurades les propietats de la taula, podeu modificar l'aparença de columnes, files i cel·les seleccionant cadascun d'aquests components.

Per seleccionar una cel·la, situeu-hi el punter del ratolí a l'interior i feu-hi clic. Per seleccionar més d'una cel·la, repetiu el procés i arrossegueu el cursor fins a una altra. Si voleu seleccionar una fila o una columna, el procediment és l'indicat anteriorment, arrossegant el cursor horitzontalment o vertical.


Per seleccionar un conjunt de cel·les no contigües, pressioneu la tecla Control i mantenint-la

premuda feu clic a l'interior de les cel·les que voleu seleccionar.

Un cop feta la selecció, la finestra Propiedades permet aplicar format tant a l'element seleccionat com al seu contingut. Observeu que segons la selecció que s'ha fet, l'aspecte d'aquest quadre de diàleg manté uns elements comuns i uns altres que canvien:

Podeu modificar i/o donar valors de la selecció realitzada a cadascun d'aquests camps:

Horiz i Vert, menús emergents per configurar l'alineació horitzontal o vertical de la selecció. An i Al, per especificar en píxels l'amplada i l'alçada de l'element seleccionat. Per utilitzar

percentatges, introduïu el símbol % darrere del valor. Fnd, per especificar una imatge o un color de fons de la selecció. Recupereu l'arxiu

estadistica.htm. Col·loqueu el punter del ratolí sobre la cel·la superior esquerra i arrossegueu el cursor cap a la dreta fins al final de la taula. Haureu seleccionat l'opció Fila. Cliqueu sobre el camp i seleccioneu el valor de color #FFCC66 (també podeu escriure directament aquest codi hexadecimal). Visualitzeu el canvi.

Col·loqueu ara el punter del ratolí sobre la cel·la ocupada per l'any 1996. Arrossegueu el cursor cap a baix fins al final de la taula. Haureu seleccionat l'opció Cel·la (fixeu-vos que no s'activa l'opció Columna, ja que no heu seleccionat la cel·la superior dreta). Feu clic sobre el camp i seleccioneu el valor de color #FFFFCC. Visualitzeu el canvi. Deseu la pàgina estadistica.htm.

Borde, per especificar el color que assigneu al contorn de la selecció. No aj., per evitar que el text s'ajusti. Enc., per aplicar el format d'encapçalament de la selecció. El botó Combinar celdas, per combinar la selecció i crear una cel·la. Aquesta acció agruparà

totes les dades de les cel·les seleccionades. Feu una prova amb una cel·la de la columna de la dreta. No salveu els canvis.

El botó Dividir celdas per dividir una cel·la en files o columnes. Feu una prova amb la primera cel·la de la columna de l'esquerra. No salveu els canvis.

També podeu modificar i/o donar valors als elements que es troben a l'interior de columnes, files o cel·les:


Formato per definir formats de text tipus H1,H2... mitjançant una llista desplegable. També permet modificar el tipus de font, mida, color, negreta, cursiva, arrenglerament, sagnia... del text que es trobi a la selecció.

Seleccioneu el contingut de la fila superior de la taula de la pàgina estadistica.htm. Activeu la llista desplegable corresponent al tipus de font i seleccioneu Arial, Helvética...; al camp Tam seleccioneu 2. Feu clic al botó Negreta i al botó Alinear al centro. Visualitzeu els canvis.

Repetiu els pasos anteriors activant tota la resta de cel·les de la taula. En aquest cas, no feu clic al botó Negreta. Deseu la pàgina estadistica.htm, que oferirà aquest aspecte:

Vínculo, per definir un enllaç. Dest., per indicar el marc de destinació de l'hipervincle.

El Dreamweaver proporciona la possibilitat d'aplicar un esquema de disseny predefinit a la taula. Seleccioneu tota la taula de l'arxiu estadistica.htm. Accediu a la barra de menú Comandos I Formatear tabla. Apareixerà un quadre de diàleg on podreu escollir tot un ventall de dissenys predefinits i modificar alhora cadascun dels camps. Una vegada tingueu feta la selecció, feu clic al botó Aceptar o Aplicar i observeu els canvis que s'han produït.


M5: ELABORACIÓ D'UNA PÀGINA A PARTIR DE TAULES (II)

ESTRUCTURA DE LA PÀGINA

A l'hora de definir l'estructura interna d'una pàgina, i, per tant, la disposició dels seus components (text, imatges...), la utilització de taules amb una amplada fixa pot evitar visualitzacions deficients i efectes no desitjats. Ja heu pogut comprovar a l’activitat anterior d’aquest mòdul com una taula elaborada mitjançant valors percentuals s'adaptava a la mida de la finestra i de la resolució de manera automàtica, fet que modificava la disposició del text limitant el control sobre l'aspecte del disseny realitzat.

Actualment, les resolucions més utilitzades pels usuaris són 800 x 600 o 1.024 x 768 píxels. Amb l'increment de prestacions dels equips informàtics, la resolució més baixa (640 x 480 píxels) representa cada vegada un nombre més minoritari d'usuaris.

Per canviar la resolució de pantalla aneu a Inici I Configuració I Tauler de control. Seleccioneu la icona Pantalla i la pestanya Paràmetres. Especifiqueu la mida a Àrea d'escriptori. La resolució i la profunditat de color depenen de les prestacions de la vostra targeta gràfica, de la mida del monitor i de la versió del Windows. Aquests canvis poden implicar reiniciar l'ordinador.

CREAR UNA PÀGINA A PARTIR DE TAULES

La finalitat d'aquesta pràctica és la creació d'una pàgina índex d'informació sobre el projecte edu365.com a partir d'una estructura generada amb taules.

Obriu el Dreamweaver. Apareixerà una pàgina en blanc. Definiu l'aspecte general de la pàgina amb l'opció de la barra de menú Modificar I Propiedades de la página. Poseu el títol de la pàgina Projecte edu365.com i doneu les directrius següents de color de fons, text, colors dels vincles, marges...:

Observeu que en aquesta ocasió cal especificar el valor dels marges esquerre i superior, així com l'amplada i l'alçada d'aquests. D'aquesta manera, la taula que inseriu es trobarà ajustada perfectament als costats de la pàgina i es visualitzarà de la mateixa forma amb els navegadors Explorer i Nestcape.

El navegador Explorer interpreta aquesta ordre amb el següent codi font: <leftmargin="0" topmargin="0">, mentre que el Netscape, per representar-la, interpreta: <marginwidth="0" marginheight="0">. Així, si utilitzeu Mostrar vista código, veureu la línia corresponent a l'etiqueta

<body> de la vostra pàgina on estan recollits els valors que heu donat:


<body bgcolor="#FFFFFF" text="#000000" link="#000000" vlink="#000000" alink="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" >

Per visualitzar el codi font de la pàgina, feu clic al botó Mostrar vista código.

A continuació, passeu a inserir una taula mitjançant el botó Tabla de la categoria Común de la barra Objetos o activeu el menú Insertar I Tabla. Apareixerà el quadre de diàleg Insertar tabla. Modifiqueu els valors que apareguin (recordeu que el quadre de diàleg sempre manté els valors de la configuració més recent introduïda per a una taula) pels següents:

A partir d'aquesta taula, creareu tota l'estructura de la pàgina. Per treballar amb més comoditat, feu clic sobre el contorn de la taula i una vegada aparegui la finestra Propiedades escriviu 100 al camp Al. També podeu fer aquesta acció arrossegant el contorn inferior de la taula amb el cursor o des del codi font amb Mostrar vista código. La taula ara té una alçada de 100 píxels.

Deseu la pàgina a la carpeta c:\mpidal048\m5 amb el nom edu365.htm.

Taules enniuades o imbricades

Una taula imbricada o enniuada(en castellà, anidada) és una taula que es troba a l'interior d'una altra taula o cel·la ja existent. Podeu configurar una taula imbricada com qualsevol altra taula, tot i això, la seva amplada es veurà limitada per l'amplada de la taula o cel·la on la col·loquem.

Podria semblar una opció més simple inserir cel·les i combinar-les segons l'estructura de la pàgina a l'interior de la taula. Hi ha una raó important per no utilitzar aquesta possibilitat. Si s'introdueix contingut a les cel·les, com ara un text llarg, aquest forçaria els límits i provocaria que la taula es desajustés pels laterals. Una taula no pot forçar mai una altra taula a desplaçar-se, mentre que una cel·la sí.

Creareu una sèrie de taules imbricades unes a l'interior de les altres per donar forma a l'estructura interna de la pàgina: Seleccioneu la taula creada a l'arxiu edu365.com. A la finestra Propiedades de la taula, ompliu el camp Col. Fondo amb el valor #0482BC. Inseriu una taula amb els valors següents: Filas 1,


Columnas 1, Ancho 600 píxeles, Borde 0, Relleno de celda 0, Espacio de celda 0. Repetiu aquesta operació fins a crear un total de 3 taules.

Un manera força ràpida per repetir accions com l'anterior consisteix a fer clic a sobre de l'acció que es vol repetir de la finestra Historial i després fer clic al botó Reproducir.

Col·loqueu el punter del ratolí sobre la primera de les taules inserides i feu clic. Inseriu la imatge edu1.gif. Per fer-ho, podeu activar el menú Insertar I Imagen o fer clic al botó Insertar imagen de la barra Común.

Definireu ara l'estructura de la zona central de la pàgina. Inseriu a la taula 2 una taula amb els valors següents: Filas 1, Columnas 3, Ancho 600 píxeles, Borde 0, Relleno de celda 0, Espacio de celda 0.

Aquestes tres columnes tenen la mateixa mida (200 píxels cadascuna). Cal que la columna central tingui una amplada de 350 píxels. Col·loqueu el cursor sobre la columna central. A la finestra Propiedades de cel·la, ompliu el camp An. amb el valor 350. Si utilitzeu la Vista de disposición que es troba a la barra Común I Ver I Vista de disposición, observareu l'amplada de cadascuna de les

columnes (125-350-125 píxels).

http://jasper.xtec.es:7451/cdweb/dades/actu/actual_matform/materials/td98/materials/m5/edu1.gif


La columna de l'esquerra contindrà els elements de navegació pels continguts de la web, la columna central la presentació gràfica del projecte amb una imatge, i la columna de la dreta l'accés a altres recursos vinculats al tema.

Situeu el cursor a l'interior de la columna central i inseriu-hi una taula amb els valors següents: Filas 3, Columnas 1, Ancho 350 píxeles, Borde 0, Relleno de celda 0, Espacio de celda 0. Col·loqueu el cursor sobre la primera d'aquestes cel·les i a la finestra Propiedades de cel·la ompliu el camp Al amb el valor 100. Escriviu Les noves tecnologies al servei de l'educació (lletra Arial, mida 4, color

#FFCC66, negreta i centrat). A la segona cel·la inseriu la imatge edu2.gif.

Per definir el contingut de la columna de l'esquerra, inseriu-hi una taula a l'interior amb els valors: Filas 29, Columnas 1, Ancho 125 píxeles, Borde 0, Relleno de celda 2, Espacio de celda 1, Color Fnd. #663366. Repetiu aquesta acció a la columna de la dreta amb els valors: Filas 12, Columnas 1, Ancho 125 píxeles, Borde 0, Relleno de celda 2, Espacio de celda 1.

Recupereu l'arxiu taulaedu.rtf i teclegeu el contingut a cadascuna de les taules que acabeu de crear.

Modifiqueu l'aspecte de les cel·les de cadascuna de les taules (recordeu que per seleccionar cel·les i aplicar els canvis que desitgeu, podeu utilitzar la finestra Propiedades) amb els valors següents:

Cel·les de la taula esquerra: amb el text: Presentació; Què és?; Tecnologia; Informació; Comunicació; Suport a l'estudi; XTEC: Color Fnd. #FFCC66, Formato Arial, Helvética..., Tam. 2, Color de texto #000000, Alinear a la izquierda; la resta, Color Fnd. #9999CC, Formato Arial, Helvética..., Tam. 1, Color de texto #FFFFFF, Alinear a la derecha.

Cel·les de la taula dreta: Color Fnd. #CCCCCC, Formato Arial, Helvética..., Tam. 2, Color de texto #000000, Alinear al centro.

Per poder fer les operacions anteriors d'una manera més ràpida, podeu seleccionar alhora les cel·les que hagin de tenir un aspecte comú i una vegada seleccionades aplicar les propietats de manera conjunta. Per fer-ho, només cal que col·loqueu el cursor sobre una de les cel·les i l'arrossegueu fins a seleccionar les cel·les que desitgeu. Quan les cel·les on voleu donar les mateixes característiques no es troben contigües (per exemple, algunes de la taula de l'esquerra), pressioneu la tecla Control i mantenint-la pressionada feu clic sobre totes les cel·les que vulgueu modificar. Després, apliqueu les propietats mitjançant la finestra Propiedades.

Observareu que hi ha tot un seguit de cel·les a la taula de la zona dreta on no heu posat text. Cal eliminar-les. Feu clic a l'interior d'una d'aquestes cel·les buides (recordeu que com que treballeu amb una taula amb una sola columna el programa interpreta que cada una de les cel·les és una fila) i accediu a la barra de menú Modificar I Tabla I Eliminar fila. Repetiu l'acció fins a eliminar-les totes.

Aquesta ha de ser l'aparença de cadascuna de les taules:


http://jasper.xtec.es:7451/cdweb/dades/actu/actual_matform/materials/td98/materials/m5/taulaedu.rtf


A continuació, inseriu la imatge edu3.gif a sota de la taula situada a la dreta. Centreu-la.

Per acabar la pràctica, inseriu la imatge edu4.gif a la Taula 3.

Aquest és el resultat de la pràctica:

Salveu l'arxiu edu365.com i comproveu que es visualitza correctament.




M5: ELABORACIÓ D'UNA PÀGINA A PARTIR DE CAPES

Capes

Les capes són bàsicament contenidors de codi HTML. Com a tals poden contenir al seu interior una pàgina independent en HTML, text, imatges, formularis, objectes Flash, connectors (plug-in)... proporcionant la possibilitat de dotar la pàgina d'un major grau de dinamisme .

La gran flexibilitat per disposar-les a qualsevol lloc de la pàgina, apilar-les, moure-les per la pantalla mitjançant una línia de temps..., dóna un gran control sobre el disseny que es porta a terme.

Tot i això, cal recordar que les capes només són visualitzades correctament pels navegadors Explorer i Netscape de versions 4.0 i posteriors. En versions anteriors, el contingut de les capes es veu de manera desordenada sense tenir en compte els punts de referència on es troben disposades les capes a la pàgina. Si es desitja que qualsevol visitant visualitzi la pàgina tal com s'ha dissenyat, és aconsellable fer el disseny mitjançant capes i posteriorment convertir aquestes capes en taules, encara que aquesta conversió limitarà alguna de les possibilitats dinàmiques que les capes ens proporcionen.

La codificació divergent dels navegadors Explorer i Netscape fa que cadascun d'ells hagi elaborat etiquetes específiques per a les capes: div, span, layer i ilayer. Això provoca en ocasions problemes de visualització també en versions 4.0 o posteriors. Per evitar al màxim aquesta conflictivitat, quan inserim capes a la nostra pàgina, el Dreamweaver insereix l'etiqueta HTML <div> corresponent a aquestes capes al codi. Per defecte, el programa utilitza aquesta etiqueta que garanteix una visualització correcta a la majoria de visitants de la pàgina. Per comprovar que aquesta és l'opció predeterminada, accediu al menú Edición I Preferencias I Categorías I Capas.

Observeu que no hi ha definit cap color de fons per a la capa que es crea; això fa que aquesta actuï com a transparent. D'altra banda, cal que l'opció Compatibilitat con Netscape 4 es trobi activada.


Crear una pàgina informativa a partir de capes

La finalitat d'aquesta pràctica és la creació d'una pàgina d'informació sobre la XTEC dintre del projecte edu365.com de la pràctica 2 a partir d'una estructura generada amb capes.

Obriu el Dreamweaver. Apareixerà una pàgina en blanc.

Definiu l'aspecte general de la pàgina amb l'opció de la barra de menú Modificar I Propiedades de la página. Poseu el títol de la pàgina, XTEC, i doneu les directrius següents de color de fons, text, colors dels vincles, marges...:

Observeu que heu d'incorporar una imatge de fons a la pàgina. Recupereu la imatge fonscapes.gif per inserir-la. Visualitzeu la pàgina i deseu l'arxiu amb el nom xtec.htm a la carpeta c:\mpidal04\m5.

Activeu l'opció de la barra de menú Ver I Cuadrícula I Editar cuadrícula. Configureu les propietats al quadre de diàleg. Després, per visualitzar la quadrícula que heu configurat, torneu a la barra de menú Ver I Cuadrícula i feu clic a Mostrar cuadrícula.

La quadrícula permet ajustar fàcilment els continguts visuals que incorporem amb el Dreamweaver i és de gran utilitat quan es treballa amb capes. Per aprofitar la possibilitat d'ajustar de manera automàtica les capes a la quadrícula, cal activar l'opció Ajustar a cuadrícula del quadre de diàleg anterior.

Creareu una sèrie de capes amb text i imatges per dotar de continguts la pàgina.

Per crear una capa, feu clic al botó Dibujar Capa de la categoria Común de la barra Objetos i arrossegueu-lo per dibuixar la capa a la finestra del document:

../../../../D98/materials/m5/fonscapes.gif




També podeu activar el menú Insertar I Capa:

Un cop feta una d'aquestes operacions, tindreu la capa col·locada a la part superior esquerra de la pàgina.

Modificar l'aspecte de les capes. Inserir imatges i text

Aquest apartat de la pràctica ens ajudarà a conèixer com canviar l'aparença i els components modificant-ne la configuració de les propietats.

Per seleccionar tota la capa i aplicar els canvis que desitgeu, feu clic sobre el contorn de la capa fins que s'activi.

Per fer els canvis de configuració i controlar les propietats de les capes, el programa disposa de l'eina Inspector de propiedades i de la finestra Capas.

La finestra Capas mostra les capes en forma de llista de noms. Permet seleccionar les capes i modificar-ne l'ordre en què es troben.

Activeu l'opció Evitar solapamiento si no està activada.

L'opció Evitar solapamiento ha d'estar activada si voleu convertir les capes del document en taules perquè sigui visualitzat correctament amb els navegadors 3.0. De tota manera, algunes accions permeten superposar capes fins i tot tenint activada aquesta opció (si inseriu la capa des del menú, introduïu números a Inspector de propiedades o feu capes imbricades). Si això succeeix,

arrossegueu les capes superposades per separar-les.

Canvieu ara les propietats de la capa mitjançant la finestra Propiedades:


ID de capa, per introduir el nom de la capa. Cal posar un nom d'identificació fàcil, que ajudi a trobar la capa ràpidament a la finestra Capas. Poseu en aquest camp el nom Títol. Utilitzeu només caràcters alfanumèrics (no utilitzeu caràcters especials com ara espais, guionets...). Cada capa ha de tenir un nom exclusiu.

Iz i Sup, ens indica la posició de la capa respecte de l'angle superior esquerre de la pàgina. Escriviu 37 px i 20 px, respectivament.

An i Al ens indica l'amplada i l'alçada de la capa. Escriviu 416 px i 34 px, respectivament. Índice Z determina l'índex z o ordre d'apilament de la capa. Com que aquesta és la primera

capa que heu creat, es reconeix com a número 1. Vis. indica l'estat de visualització de la capa. Mantingueu l'estat per defecte. Im. fondo. permet inserir una imatge de fons a la capa. Col. fondo. determina el color de fons de la capa. Escriviu en aquest camp el valor #FFCC66. Etiqueta indica l'etiqueta HTML que s'utilitzarà. Per evitar incompatibilitats, utilitzeu <div>. Desb. determina què succeeix si el contingut de la capa excedeix de la seva mida. Entre

d'altres opcions, incorpora la possibilitat d'afegir barres de desplaçament. Deixeu en blanc el camp. D'aquesta manera, la capa adaptarà la mida del contingut que inseriu.

Activeu la capa i visualitzeu els canvis que heu introduït. A continuació, situeu el cursor a l'interior de la capa i feu clic. Escriviu el text La Xarxa Telemàtica de Catalunya. Seleccioneu el text. S'activarà la finestra Propiedades on cal que introduïu els valors següents: tipus de lletra Verdana, Arial, Helvética...; al camp Tam seleccioneu 5. Cliqueu el botó Negreta i el botó Alinear al centro. Visualitzeu els canvis.

Creeu una segona capa amb qualsevol dels procediments comentats. Les propietats d'aquesta segona capa són les següents:

Una vegada tingueu la taula creada, passeu a inserir-hi la imatge xtec1.gif a l'interior. Col·loqueu el cursor a l'interior de la capa logo1 i feu clic. Aneu al menú Insertar I Imagen i seleccioneu l'arxiu. Comproveu mitjançant el botó Vista previa/depurar en explorador que la línia blanca horitzontal de la imatge sembla enllaçada amb la línia blanca vertical del fons. En cas que no sigui així, podeu desplaçar la capa seleccionant-la i després arrossegant-la o, per fer-ho de manera més precisa, ajudeu-vos de les tecles de fletxa del teclat (amb cada pulsació desplaçareu un píxel la capa). Aquest és l'aspecte que ha de presentar:

El pas següent és inserir una nova capa amb les propietats:

../../../../D98/materials/m5/xtec1.gif


Comproveu que la capa explica1 es troba arrenglerada a la part inferior de la capa logo1 i separada

de la franja blava del fons. Desplaceu la capa, si cal, ajudant-vos visualment amb la quadrícula.

Amb la capa explica1 col·locada, inseriu el text Capa text 1 que trobareu a l'arxiu capestext.rtf. Per fer aquesta operació, només cal que seleccioneu tot el text i feu clic a la barra de menú del Word Edición I Copiar. A la finestra del Dreamweaver activeu la taula explica1 i col·loqueu el text amb Edición I Pegar.

És possible que la capa es redimensioni en inserir el text. Seleccioneu novament el text inserit. S'activarà la finestra Propiedades. Modifiqueu-ho al quadre de diàleg amb els valors: tipus de lletra Verdana, Arial, Helvética...; al camp Tam seleccioneu 1, Color de texto #000000. Feu clic al botó Alinear a la izquierda. La capa haurà recuperat la mida original. Visualitzeu els canvis.

A continuació, inseriu una nova capa que tindrà pràcticament les mateixes propietats de la capa logo1. Anomeneu-la logo2:

Fixeu-vos que independentment del nom de la capa i el valor índice Z, a la finestra Capas l'únic que realment canvia és la seva situació a la pàgina. Per tant, també podeu copiar capes ja existents i enganxar-les si voleu mantenir-ne les propietats. Després, només cal modificar el nom i recol·locar la capa allà on vulgueu.

Un cop creada la capa logo2, inseriu-hi la imatge xtec2.gif a l'interior. Accediu al menú Insertar I Imagen i seleccioneu l'arxiu. Feu la mateixa comprovació que amb la capa logo1.

Per acabar la pràctica, inseriu una nova capa que anomenareu explica2. Aquesta vegada activeu la capa explica1, copieu-la des del menú Edició I Copiar. Enganxeu la nova taula amb el menú Edició I Pegar.

El Dreamweaver col·loca la capa sobre l'original. Activeu la capa explica1 i arrossegueu-la fins a col·locar-la a sota de la capa logo2. Veureu com la capa s'ha duplicat. Des de la finestra Propiedades, canvieu el nom i el valor índice Z pel valor 5.

Seleccioneu el text de la capa explica2 i elimineu-lo. Inseriu el text Capa text 2, que trobareu a l'arxiu capestext.rtf. Seleccioneu el text inserit. S'activarà la finestra Propiedades. Modifiqueu les propietats amb els valors: tipus de lletra Verdana, Arial, Helvética...; al camp Tam seleccioneu 1, Color de texto #000000. Feu clic al botó Alinear a la izquierda.

Visualitzeu els canvis i deseu l'arxiu xtec.htm a la carpeta c:\mpidal04\m5:

../../../../D98/materials/m5/capestext.rtf

../../../../D98/materials/m5/xtec2.gif

../../../../D98/materials/m5/capestext.rtf


M5: CAPES IMBRICADES

Imbricar capes

A la pràctica anterior, heu treballat amb capes tractades de manera individual. En algunes ocasions pot resultar interessant crear capes a l'interior d'unes altres per agrupar-les, de la mateixa manera que s'insereixen taules a l'interior de taules.

Obriu el Dreamweaver. Recupereu la pàgina xtec.htm elaborada a la pràctica anterior que es troba a la carpeta c:\mpidal04\m5. És possible que per defecte el programa no us permeti imbricar les capes. Accediu al menú Edición I Preferencias I Capas i activeu l'opció de la casella de verificació Anidar I Anidar al crear en una capa. A la finestra Capes, si l'opció Evitar solapamiento està activada, desactiveu-la.

Creeu una nova capa arrosegant el botó Dibujar capa de la categoria Común de la barra Objetos a l'interior de la capa explica1. Situeu la nova capa a la part inferior dreta de la capa explica1. Aquesta capa ha de tenir 50 px al camp An. i 50 px al camp Al. Anomeneu-la informe. Inseriu-hi la imatge full.gif.

Per saber si la capa creada està imbricada, podeu verificar-ho a la finestra Capas. Si la nova capa està imbricada correctament, veureu com la capa informe es troba a l'interior de la capa pare explica1.

Aquest tipus de vinculació entre capes us resultarà de gran utilitat a les vostres pàgines quan utilitzeu dissenys complexos, formats a partir d'objectes i múltiples imatges, ja que els canvis que es facin a la capa pare, per exemple, la seva posició, afectaran també les capes imbricades.

Deseu la pàgina a la carpeta c:\mpidal04\m5 amb el nom anidaxtec.htm i comproveu-ne la

visualització amb els navegadors.

Recordeu que si voleu convertir aquest tipus de pàgina elaborada amb capes imbricades en taules, la visualització d'aquesta conversió no serà correcta en navegadors de versions 3.0, ja que l'opció Evitar solapamiento es troba desactivada.

Animació de capes (HTML dinàmic)

El DHTML o HTML dinàmic s'utilitza per poder canviar les propietats d'ubicació o d'estil d'elements HTML mitjançant una sèrie de seqüències de comandaments. El Dreamweaver utilitza aquest recurs per fer canvis a les propietats de les capes i imatges d'una pàgina.

Per fer aquestes animacions, no és necessari utilitzar ni miniaplicacions (applets) del Java, ni controls ActiveX, ni connectors (plug-in)... Les líneas de tiempo del Dreamweaver fan servir codi JavaScript per, entre altres possibilitats, canviar la posició, la mida, la visibilitat i l'ordre d'apilament d'una capa al llarg d'un temps.

Recordeu, però, que les funcions de capa de les líneas de tiempo només funcionen en els navegadors de versions 4.0 o posteriors.

../../../../D98/materials/m5/full.gif


Crear una animació a partir d'una capa

L'objectiu d'aquesta pràctica és fer l'animació d'una capa mitjançant l'eina de la qual disposa el Dreamweaver a partir del treball fet a la pràctica anterior d'aquest mòdul.

Obriu el Dreamweaver. Recupereu l'arxiu xtec.htm que es troba a c:\mpidal04\m5. A la finestra Capas, si l'opció Evitar solapamiento està activada, desactiveu-la.

Creeu una nova capa arrosegant el botó Dibujar capa de la categoria Común de la barra Objetos o activant el menú Insertar I Capa. Definiu les propietats següents:

Comproveu que la capa quadre1 es troba ocupant aquesta posició:

Repetiu l'operació creant una altra capa amb les propietats següents:

La capa quadre2 haurà d'estar situada d'una manera similar a l'anterior, però en aquesta ocasió a la intersecció de la imatge de la capa logo2 amb la línia blanca.

Ara la pàgina està preparada per aplicar un efecte visual posant una animació a una capa que creareu a continuació. Aquesta capa ha de tenir les mateixes propietats que la capa quadre1, exceptuant els valors següents: ID quadre3, Col.Fondo # FFCC66, Índice Z 8, Vis default.

Comproveu que la capa quadre3 es troba situada justament sobre la capa quadre1. Amb la capa quadre3 activada, feu clic al menú Modificar I Organizar I Traer al frente. Deseu l'arxiu a la carpeta c:\mpidal04\m5 amb el nom animaxtec.htm.

Per fer l'animació de la capa quadre3, cal que aquesta estigui seleccionada. Feu clic al menú Ventana I Líneas de tiempo. Apareixerà una finestra on podeu definir les propietats de l'animació

que cal desenvolupar:

../../../../D98/d98m5/d98m5p3/m5p3.htm


Escolliu Modificar I Línea de tiempo I Agregar objeto a línea de tiempo o arrossegueu la capa seleccionada a l'interior de la finestra Líneas de tiempo. Veureu com apareix una barra de color al primer canal de la línea de tiempo que mostra el nom de la capa.

Feu clic sobre el marcador del cuadro clave 1 que és a l'extrem esquerre de la barra. A la pàgina, desplaceu la capa quadre3 sobre la capa quadre2 (aquest serà el lloc de la pàgina on la capa acabi l'animació). Apareixerà una línia que indica la ruta de l'animació.

Per veure una vista prèvia de l'animació, manteniu pressionat el botó Reproducir de la finestra Línea de tiempo. Per afegir altres capes i imatges a la línea de tiempo i per crear animacions més complexes, només cal repetir el procediment exposat.

Aquesta animació que heu elaborat necessita encara altres instruccions per poder ser visualitzada als navegadors. Activeu l'opció Reproducción automàtica de la finestra Línea de tiempo. Aquesta acció farà que l'animació s'activi de manera automàtica en el moment en què el navegador obri la pàgina.

Per aconseguir que l'animació executi un bucle, feu clic a l'opció Bucle de la finestra Línea de tiempo. Bucle insereix l'acció Ir a fotograma en línea de tiempo al Canal Behavior després de l'últim fotograma de l'animació (en aquest cas correspondria al fotograma 16).

Podeu editar les característiques del bucle des de la finestra Comportamientos. Obriu la finestra Comportamientos amb el menú Ventana I Comportamientos. Feu clic dues vegades sobre la barra blava onFrame16 I Ir a un fotograma... i apareixerà el quadre de diàleg Ir a un fotograma en la línea de tiempo.

Escriviu 4 al camp Bucle i feu clic a Aceptar. Aquestes són les vegades que es repetirà l'animació.

El tipus d'animació i la seva finalitat determinarà el nombre de repeticions d'aquesta. És recomenable administrar aquest recurs evitant elements massa repetitius que puguin arribar a interferir en el disseny final de la pàgina.

Deseu l'arxiu animaxtec.htm i comproveu-ne el funcionament amb els navegadors.

Animació amb ruta curvilínia

L'animació que heu fet, com heu pogut comprovar, segueix una ruta rectilínia. Fareu una petita pràctica complementària per veure com dotar una capa d'una ruta que descrigui una trajectòria curva.


Obriu el Dreamweaver. Recupereu l'arxiu xtec.htm. Recordeu que és convenient desactivar a la finestra Capes l'opció Evitar solapamiento si aquesta es troba activada.

Creeu una nova capa arrosegant el botó Dibujar capa de la categoria Común de la barra Objetos o activant el menú Insertar I Capa. Definiu les propietats següents:

Comproveu que la capa arroba es troba alineada al costat de la capa titol. Inseriu la imatge amov.gif a l'interior de la capa que heu creat.

Seleccioneu la capa arroba i feu clic al menú Ventana I Líneas de tiempo. Escolliu Modificar I Línea de tiempo I Añadir objeto a línea de tiempo o arrossegueu la capa seleccionada a l'interior de la finestra. Feu clic sobre el marcador del cuadro clave 1 que es troba a l'extrem esquerre de la barra. A la pàgina, torneu a seleccionar la capa arroba. Feu clic al menú Modificar I Línea de tiempo I Registrar ruta de capa. Arrossegueu la capa per la pantalla desplaçant-la seguint la trajectòria que desitgeu. Per exemple, aquesta:

Observeu com a la Línea de tiempo apareix la Barra de animación i els Cuadros claves de la trajectòria realitzada.

Activeu l'opció Reproducción automàtica de la finestra Línea de tiempo si voleu que l'animació s'activi de manera automàtica en el moment en què el navegador obri la pàgina. Poseu el valor 3 al camp de l'opció Bucle de la Línea de tiempo i accepteu.

Deseu l'arxiu a la carpeta c:\mpidal04\m5 amb el nom arrobaxtec.htm i comproveu que funciona correctament amb els navegadors.

Podeu modificar la velocitat de l'animació, el moment d'inici i altres paràmetres amb Modificar I Línea de tiempo I... sempre que estigui activada la Barra de animación de l'objecte.

../../../../D98/materials/m5/amov.gif




M5: TAULES I CAPES

Quina és l'opció correcta?

A l'hora d'elaborar una pàgina, l'elecció de la utilització de taules o capes ha d'estar vinculada als objectius fixats en el moment de dissenyar-la. Voleu que tots els usuaris puguin accedir a ella o bé l'adreceu a usuaris amb navegadors més actualitzats?

El Dreamweaver permet treballar amb més facilitat amb capes. Una bona opció és treballar-hi i transformar-les posteriorment en taules per permetre la visualització correcta del disseny en la gran majoria de navegadors. Recordeu, però, que per fer aquesta conversió sense que apareguin posteriorment efectes indesitjats, cal evitar la superposició de capes.

Conversió de capes a taules

L'objectiu d'aquesta pràctica és fer la conversió d'una pàgina estructurada mitjançant capes a taules.

Obriu el Dreamweaver. Recupereu la pàgina xtec.htm que es troba a la carpeta c:\mpidal04\m5. Aquesta estructura la seva informació mitjançant la utilització de capes no superposades, fet que permetrà la transformació en taules.

Per fer la transformació, accediu al menú Modificar I Convertir I Capas en tabla. En seleccionar-ho, apareixerà la finestra Convertir capas en tabla, on haureu de definir els valors següents:

Más preciso: permet crear una cel·la de taula a cada capa, juntament amb les cel·les addicionals necessàries per conservar l'espai entre capes. És de gran utilitat. Activeu-lo.

Mínimo: fa la funció de contraure les cel·les buides disminuint el nombre de files i columnes de la taula. No és aconsellable.

Usar GIF transparentes: les cel·les que no tinguin continguts les converteix en gifs transparents, mantenint d'aquesta manera la mida original de la composició de les capes i garantitzant que la taula aparegui amb les mateixes amplades en tots els navegadors. Activada, no permet editar la taula resultant arrossegant files o columnes. De tota manera, és una opció imprescindible. Activeu-la.

Evitar superposición de capas: limita les posicions de les capes quan es creen, mouen o canvien de mida per evitar que se superposin. Activeu-la. Feu clic a Aceptar.

No podeu convertir una sola capa en taula. Per fer la conversió de capes en taules, cal aplicar-la a totes les capes de la pàgina.

Observeu com les capes de la figura de l'esquerra han estat transformades en una taula a la figura de la dreta, amb les seves corresponents cel·les, files i columnes.


Estructura amb capes Estructura amb taules

Feta la conversió, garantireu que la pàgina sigui visualitzada correctament en la gran majoria de navegadors, independentment de la seva versió. També podríeu manipular tots els components de la taula mitjançant la finestra Propiedades.

Deseu la pàgina resultant a la carpeta c:\mpidal04\m5 amb el nom capataula.htm i visualitzeu-ne el resultat.

Conversió de taules a capes

L'objectiu d'aquesta pràctica és fer la conversió d'una pàgina estructurada mitjançant taules a capes.

Obriu el Dreamweaver. Recupereu la pàgina edu365.htm que es troba a la carpeta c:\mpidal04\m5, la informació de la qual s'estructura mitjançant la utilització de taules.

Per fer la transformació, aneu al menú Modificar I Convertir I Tablas en capa. Apareixerà la finestra Convertir tablas en capa, on haureu de definir els valors següents:

Evitar solapamiento de capas: limita les posicions de les capes quan es creen per evitar-ne l'encavalcament. Resulta imprescindible.

Mostrar panel de capas: una vegada s'han creat les capes, mostra la finestra de capes automàticament. Activeu l'opció, tot i que també podríeu fer-ho més endavant.

Mostrar cuadrícula i Ajustar a cuadrícula: permeten utilitzar la quadrícula per facilitar la col·locació de les capes. Una vegada tingueu les taules creades, és convenient ocultar-les des de la barra d'eines Ver I Cuadrícula.

No podeu convertir una sola taula en capa. Per fer la conversió de taules a capes cal aplicar-la a totes les taules de la pàgina.


Observeu com les taules de la figura de l'esquerra han estat transformades en capes a la figura de la dreta:

Estructura amb taules Estructura amb capes

Feta la conversió, podeu fer els ajustaments necessaris, ja que, per exemple, les cel·les buides no es converteixen en capes si no tenen color de fons. Si a la pàgina d'origen teniu cura de dotar les cel·les d'aquesta característica, evitareu haver de cercar altres opcions per reproduir l'aspecte del treball.

En aquest cas, per imitar el mateix aspecte de la pàgina convertida, desactiveu l'opció Evitar solapamiento de capas de la finestra Capas. Haureu de crear una capa amb les característiques següents: An. 600px, Al. 743px i Col.Fondo #0482BC i situar-la justament sobre totes les ja creades. Activeu la capa i canvieu l'ordre de disposició d'aquesta amb Modificar I Organizar I Enviar al fondo. Feu clic a fora de la capa i veureu el resultat.

Deseu la pàgina resultant a la carpeta c:\mpidal04\m5 amb el nom taulacapa.htm i visualitzeu-la amb els navegadors (observareu algunes petites diferències entre ells).


M5: EXERCICI: INTERFÍCIE DE LA WEB DEL PROJECTE

Als mòduls anteriors heu presentat als professors un esquema de l'organització jeràrquica de la web del projecte i un esbós de la interfície. Ara ha arribat el moment de construir la interfície de la vostra web.

Cal insistir en un parell d'aspectes que ja vam mencionar. En primer lloc, el disseny i construcció d'una web no es pot improvisar, sinó que requereix un procés de reflexió que ja us hem obligat a iniciar als mòduls anteriors. En segon lloc, és l'organització jeràrquica dels continguts, establerta prèviament, la que ha de determinar la interfície, i no a l'inrevés.

En els tres últims mòduls hem vist diferents maneres de resoldre la interfície. Abans de posar-vos a fer-la, cal que decidiu si utilitzareu taules o marcs, ja que això pot condicionar el disseny. Al final de la pràctica 2 del mòdul 4 vam fer una sèrie de reflexions que us han d'ajudar a prendre la decisió que més convingui a les característiques del vostre projecte.

Un cop recorregut aquest camí, podem anar per feina. Els passos que cal seguir són:

Amb els coneixements adquirits al llarg dels mòduls anteriors i els suggeriments que us hagi fet el tutor, heu de revisar i perfilar l'esbós en paper de la interfície que vau fer al mòdul anterior.

A continuació, traslladem aquest esbós al Fireworks. Ja heu experimentat a les pràctiques que la creació d'una interfície amb el Fireworks no és cosa de cinc minuts, ni ho seria encara que dominéssim molt el programa. Cal dedicar-hi bastant temps. No us oblideu de crear al Fireworks els canvis contextuals de la interfície en capes independents i fotogrames. En acabar, deseu la imatge en format del Fireworks (*.png), per conservar les capes i poder fer

ampliacions o actualitzacions en el futur.

Després cal desar còpies de la interfície en format GIF o JPEG. És convenient fer proves abans per veure quin format i nivell de qualitat ens convé. En JPEG experimenteu diferents nivells de compressió, sempre amb la idea de reduir la mida del fitxer sense massa pèrdua de qualitat. Penseu que la segona característica més valorada en una web és la velocitat. La primera és el contingut.

Quan ja tingueu les còpies (una per a cada estat o canvi contextual), trossegeu-les amb el Fireworks.

Finalment, partint de les pàgines que genera el Fireworks, cal construir la pàgina a partir de la qual fareu totes les pàgines de la web.

Si opteu per les taules, construïu una pàgina per a cada secció, de manera que funcionin els vincles a cada secció i s'apreciïn els canvis contextuals que heu definit. No cal que poseu altres vincles ni continguts.

Si heu optat pels marcs, establiu vincles en algunes pàgines buides perquè el/la tutor/a pugui comprovar-ne el bon funcionament.

Cal observar, en tot cas, que no teniu obligació de seguir els models que heu anat veient al llarg d'aquests últims mòduls. Podeu imitar-los o prescindir-ne completament. Tampoc l'ús de la tècnica de trossejament d'imatges és obligatori.

../../../../D98/d98m4/d98m4p2/m4p2.htm

m5: elaboraciÓ de taules i capes › ~carnal2 › dw › ej_taules › taules_i_capes.pdf · dret...

Documents