IES de Gironella
Àrea de Matemàtiques
CV FEM UN PROJECTE WEB
 
TRUCS

Informació Imatges GIF amb el fons transparent

Tal com s'explica als mòduls introductoris les imatges en format GIF poden tenir el fons transparent. Aquest tipus d'imatges s'insereixen de la mateixa manera que les altres. La seva utilitat és bàsicament estètica i per facilitar la modificació de les pàgines. Vegeu l'exemple:
 
Imatge GIF sense transparència Imatge GIF amb transparència

Fixeu-vos que en canviar el fons, la imatge que no té transparència i es visualitza malament.

 

L'objectiu d'aquesta pràctica és crear una imatge en format GIF amb colors transparents.

El format d'imatge GIF té dos subformats diferents: el format GIF 87a, amb el que no es poden fer transparències, i el format GIF 89a, que és el subformat que necessiteu per poder realitzar un GIF transparent.

Una altra qüestió a tenir molt en compte és la següent: els programes gràfics tenen normalment un color de primer pla ("foreground") i un altre de fons ("background"). Per aconseguir la transparència amb el Paint Shop Pro haureu de forçar al programa gràfic perquè el seu color de fons sigui precisament el color que vulgueu fer transparent.

Amb el Paint Shop Pro creeu una finestra nova amb Archivo | Nuevo i trieu com a Color de segundo plano: azul (per exemple), cliqueu el color de tinta que deu ser negre i trieu un color marró.

Us quedarà així:

Per dibuixar una elipse premeu el botó i després per triar els paràmetres següents:

ara ja podeu dibuixar una elipse i després triant el color negre fiqueu el text "Endavant" a l'interior de l'elipse.

Finalment deseu el fitxer en el format GIF amb l'opció Archivo | Guardar como... del menú. Mireu que el guardeu amb el subformat GIF 89a. Per comprovar-ho cliqueu el botó Opciones...

Ara assegureu-vos que teniu seleccionat com a color de fons (o també anomenat de 2n pla) el color blau, que serà el color al qual li voleu donar transparència. (Seleccioneu-lo amb i el botó dret del ratolí)

A continuació aneu Colores | Configurar transparencia | Config. el valor de transp. según el color actual de 2º plano.


Podeu visualitzar la transparència amb Colores | Ver transp. de paleta. Si inseriu aquesta imatge en una pàgina web la zona blava no es veurà quedarà el color de fons original de la web

 

Atenció

Només les imatges GIF poden tenir un color transparent. Les imatges JPG no tenen transparència.


 
 

Informació Imatges GIF animades

Les imatges animades són un conjunt d'imatges fixes agrupades en un sol fitxer GIF que el Navegador s'encarrega de mostrar com si es tractés d'una pel·lícula.
 
Escola Els Pins Matemàquines: un cordill i un escaire
Nena
Pilota
Camió
Un cordill i un escaire

Amb excepció d'alguns usos educatius o il·lustratius, aquestes imatges animades són innecessàries i resulten repetitives. A més, fan que les pàgines es rebin més lentament: si una imatge GIF ocupa 10 Kb, una imatge GIF animada amb 8 quadres ocupa 8 vegades més.

Si malgrat tot en feu servir, procureu que el cicle de l'animació s'aturi després d'un nombre limitat d'iteracions.
 
 

Atenció

Si voleu crear imatges animades necessiteu el Animation Shop que és un programa complementari del Pain Shop Pro.

 

Informació

Imatges de substitució

Passeu el ratolí, sense fer clic, per sobre de la imatge de la dreta

Per aconseguir auest efecte cal tenir dues imatges preparades (dos fitxers GIF / JPG) i clicar l'opció Insertar imagen de substitucion de la finestra d'objectes.

 

Fixeu-vos que també podeu posar un vincle al camp ir a URL.

 

Informació

Imatges de fons

El color de fondo de la pàgina es pot canviar a Modificar | Propiedades de la página | Fondo.

El fondo a part de ser un determinat color també pot ser una imatge. Es pot establir una imatge de fons a Modificar | Propiedades de la página | Imagen de fondo.

Si la mida de la imatge no ocupa totalment la pantalla (com és l'habitual), apareix repetidament de manera amosaïcada.
Així si el fitxer bolaroja.gif es posa d'imatge de fondo, la pàgina web es veuria així

Com podem observar el resultat d'aquest exemple no és gaire llegible, les tonalitats del fons són molt fortes, contrsatades amb blanc i llavors cap color de font de text queda agradable a la vista. Convé posar una imatge de fons clara que contrasti amb un color de text fosc (o a l'inrevés). En qualsevol cas cal evitar gran varietat de formats de pàgines en un projecte web i intentar aconseguir una uniformitat entre elles.

 

Informació

Amb el Paint Shop Pro trieu un color clar de tinta, premeu l'eina i després per obrir la finestra de control, accediu a Punta de pincel i canvieu els paràmetres que apareixen fins aconseguir la textura que desitgeu. Ara ja podeu pintar amb l'esprai. Seleccioneu un tros de la imatge, Copiar i Pegar como nueva imagen us hauria de quedar un quadre com el de la dreta.

Creeu ara una pàgina web i poseu com a imatge de fons la que acabeu de crear.
Comproveu si el text de color negre es llegeix sense dificultat sobre aquest fons, en cas negatiu opteu per un altre color de text.

 

Informació

Inserció de la data

Si cliqueu l'opció Insertar fecha de la finestra d'objectes us insertarà la data actual del dia en què esteu editant la pàgina.

La data s'actualitzarà si feu alguna modificació de qualsevol tipus un altre dia amb el Dreamweaver. Així sempre hi posarà la data del dia que es realitzaren els últims canvis.