Creació de pàgines web II
Disseny de pàgines web.



Tractament d'imatges.
Les imatges que incloeu en documents HTML han d'estar en format .GIF o .JPG Teniu en compte a més que si la pàgina web ha d'incloure moltes imatges i els arxius corresponents són molt grans tardarà molt de temps en carregar-se en el navegador, i és possible que la persona que la visita es cansi i passi a un altre servidor. Es recomana que la suma del tamany de tots els arxius que conformen una pàgina web no excedeixi aproximadament els 50 KB. Podeu utilitzar programes com el PaintShop Pro (trobareu una versió d'avaluació al CD-ROM del curs, o també el podeu descarregar de l'adreça http://www3.jasc.com per a convertir a GIF o JPG les imatges que es trobin en un format diferent o per canviar els factors que influeixen en el seu tamany: dimensions, resolució i nombre de colors.
En una imatge els factors que més afecten al tamany de l'arxiu són: el format, el tamany, la resolució i el nombre de colors utilitzats. Com a exemple, convertireu la imatge grafiti1.bmp en grafiti1.gif

  • Posau en funcionament el programa PaintShop Pro i obriu la imatge (està en la carpeta Imatges del directori de treball \Curs HTML) amb File, Open... (Archivo, Abrir...). Triau
    • l'arxiu i feis clic a OK

  • Si colocau el cursor del ratolí sobre la imatge, a la part inferior de la pantalla podreu observar les dimensions de la imatge i el seu nombre de colors, que, en el nostre cas és de 16 milions.
  • Reduïu els colors de la imatge amb: Colors, Decrease color Depth (Colores, Reducir la profundidad del color), triau 256 colors i per últim feis clic a OK (Aceptar). Comprovau que la qualitat de la imatge no ha disminuït apreciablement.


  • A continuació reduirem les seves dimensions amb: Image, Resize (Imagen, Modificar tamaño) i al requadre corresponent a les dimensions escriviu 250 per a l'amplada i 174 per a l'alçada. Feis clic a OK (Aceptar)
.

Al darrer trimestre caldrà fer la publicació d'un treball en format web sobre qualsevol dels temes proposats a la pàgina Treballs 3Trimestre.html
  • Podeu preparar per això unes 5 imatges que guardareu en format .gif o .jpg a la carpeta de treball C:\Web Centre\Materials\Batxiller\Curs HTML\Projectes\Genoma i que servirà després al grup que publiqui qualsevol tema relacionat amb el Genoma Humà.
  • Podeu emprar per exemple el Google com a cercador i reduir el tamany de les imatges a un format comu, per exemple amplada 140 píxels, amb el Paint Shop que teniu instal·lat dins l'aula.


Gràfics transparents.

Observau el gràfic segell.gif que representa l'escut de la Comunitat Autònoma. Degut que el gràfic se superposa al fons de la pàgina, es destaca el seu requadre blanc sobre el fons. Per fer que aquest requadre desaparegui hem de fer el gràfic 'transparent'.
Això és possible només amb gràfics del tipus .GIF i l'efecte que s'aconsegueix el podeu veure obrint al navegador qualsevol pàgina que el contengui.

Per a convertir el gràfic executau el programa Gif Construction Set, que heu de tenir instal·lat al vostre ordinador, i que trobareu al CD- ROM del curs, o a l'adreça http://ftp.ecani.com/alchemy/gcsp20.exe. Les instruccions que es donen a continuació són vàlides per a la versió del programa que es troba en el CD-ROM del curs:

  • Feis: File, Open i obriu l'arxiu segell.gif que es troba al subdirectori IMATGES del vostre directori de treball.

  • Feis ara: Insert, Control i Edit i després marcau la casella que diu Transparent colour. Seleccionau el botó i apareixerà una finestra amb el gràfic segell.gif

  • Feis clic a qualsevol lloc del requadre blanc del gràfic.

  • Per acabar, feis clic a File i Exit i quan el programa vos demani si voleu guardar els canvis realitzats feis clic a Yes i a Ok per acabar.


  • Per comprovar l'efecte, obriu de nou la pàgina que heu creat insertant la imatge corresponent en el navegador. En acabar, tancau el navegador i passau a l'activitat següent.


Imatge de Fons.

 Podeu emprar qualsevol editor web per inserir una imatge de fons de pàgina. Cerqueu una imatge que us agradi i la guardeu a la vostra carpeta de treball amb el nom tapiz.jpg. Posau la imatge tapiz.jpg (està a la carpeta Curs HTML\Imatges) de fons de la pàgina dins una pàgina de prova. Feis:
'
  • Amb Netscape Redactor: Format, Colors i propietats de la pàgina, Colors i fons de la pàgina, i on diu Imatge de Fons, Imatge:, escriviu Imatges/tapiz.jpg
  • Amb FrontPage Express: Formato, Fondo..., i on diu Imagen de fondo escriviu Imatges/tapiz.jpg
  • Amb Macromedia Dreamweaver: Modify (Modificar), Page properties... (Propiedades de la página...) i on diu Background image (Imagen de fondo) escriviu Imatges/tapiz.jpg

Dins aquesta finestra podeu fer diversos canvis a la pàgina: color del text, del fons, color dels vincles, etc. Investigau i provau-los, i si no sabeu per a què serveix alguna cosa, sempre podeu demanar ajuda a la tutoria (és la seva feina). En acabar, tancau la finestra i visualitzau la pàgina en el navegador.

Gràfics animats

Segurament heu observat a un bon nombre de pàgines web que apareixen alguns gràfics amb la imatge en moviment: es tracta dels anomenats gràfics animats o gif animat.
Podeu trobar llocs a internet que ofereixen gratuïtament gran quantitat d'aquests gràfics (com per exemple a http://www.multimediapalace.com/). També podeu provar amb algun cercador com www.google.com o www.alltheweb.com de telejar la recerca 'Gràficos animados' i segur que us apareixen un munt d'adreces. Els podeu recuperar per utilitzar-los a les vostres pàgines. Per a inserir un gràfic animat es fa com amb una imatge estàtica.

També podeu fer servir el programa de l'exercici anterior per crear els vostres gif animats. Per a fer això, heu de disposar prèviament de les imatges individuals que s'hauran de combinar per donar sensació de moviment (com si fossin els fotogrames d'una pel·lícula). En aquesta activitat heu de construir un d'aquests gràfics superposant les imatges: b1.gif, b2.gif, b3.gif, b4.gif, b5.gif, b6.gif, b7.gif i b8.gif que teniu a la carpeta IMATGES

Abans de començar podeu fer servir el programa Paint Shop Pro per veure les imatges i així entendreu millor com s'obté el resultat final. A continuació tancau tots els programes que estiguin oberts i executau el Gif Construction Set i feis: File, Animation Wizard..., i acceptau els suggeriments que vos fa el programa, fent clic al botó Next cada vegada (en total unes 5 vegades), fins que aparegui el requadre Selected files: Aleshores heu de fer clic al botó Select i obtindreu una finestra a la que heu de triar el primer arxiu, que es troba al subdirectori IMATGES i es diu b1.gif i fer clic a Abrir. Continuau amb la selecció d'arxius en el mateix ordre amb què han d'aparèixer a l'animació: b2.gif, b3.gif,..., b8.gif i feis clic cada vegada a Abrir. Quan hagueu seleccionat el darrer feis clic a Cancelar i a continuació: Next, Done i esperau que es construeixi l'arxiu. Quan el programa acabi feis: File, Exit, Yes i donau-li un nom, per exemple: animado.gif, feis clic a Guardar i Ok. Ja teniu creat el vostre arxiu gif animat. Si voleu veure el resultat obriu-lo en el navegador. Podeu inserir-lo en una pàgina web com qualsevol altra imatge.

Links a altres arxius.

 A les vostres pàgines podeu incloure hiperenllaços no només a altres pàgines web, sinó també a arxius de so, vídeo, comprimits, executables, etc.
Enllaços a arxius de so, vídeo, comprimits, executables,... Obriu una pàgina nova a l'editor web. Aquesta pàgina inclourà un enllaç a un manual d'HTML que està en formato d'arxiu comprimit manual.zip , de manera que quan algú visiti la pàgina i faci clic sobre l'enllaç aparegui una finestra que permeti que el visitant pugui 'descarregar' l'arxiu i guardar-lo al seu ordinador.
El procediment és molt simple, heu de fer com si es tractàs d'un enllaç normal: seleccionau amb el ratolí el text 'MANUAL.ZIP' i posau un enllaç a l'arxiu manual.zip.
Si aquest arxiu es trobàs a una altra carpeta o a un altre servidor, hauríeu d'incloure la ruta completa Provau d'incloure un altre enllaç a dins de la mateixa pàgina a un arxiu de so que teniu al directori de treball CURSHTML: fanfare.wav Passau a l'exercici següent sense tancar la pàgina que estau modificant.

Exemple amb l'arxiu de so : Fanfare.wav

Marcs (frames).
Podeu tenir una pàgina web dividida en diverses finestres rectangulars que contenen una pàgina web distinta cadascuna d'elles. Cadascuna d'aquestes finestres rep el nom de 'marc' o 'frame'. Podeu veure un exemple amb el codi HTML que teniu baix:
Fixau-vos que en realitat la pàgina index.htm que conté el codi que veieu està formada per les pàgines continguts.htm (esquerra) i portada.htm (dreta). Així mateix, a la dreta de cadascuna d'elles hi ha una barra de desplaçament que afecta només a una de les finestres, que són independents. D'aquesta manera podem tenir tots els enllaços de les pàgines que formen la web en una pàgina que es diu continguts.htm i quan fem clic en algun d'ells veurem en el marc de la dreta la pàgina corresponent.

Per últim, fixau-vos que per tenir una pantalla dividida en dos marcs necessitam tres arxius (un d'ells, en aquest cas index.htm, conté únicament els codis que indiquen quants marcs s'han de veure quan carregam la pàgina, quin espai ocupa cadascun d'ells i quines pàgines apareixeran inicialment en cadascun d'ells), per a una pantalla dividida en tres marcs necessitarem quatre arxius, etc.
En aquesta activitat creareu la pàgina index.html, que serà la que contengui la definició del nombre de marcs que han d'aparèixer (en aquest cas dos) i del contingut inicial de cadascun d'ells. Els editors Netscape Redactor i FrontPage Express no disposen d'una opció per crear marcs. Per tant, si feis servir algun d'aquests dos editors, haureu d'introduir el codi HTML a mà. Us servirà per publicar el vostre treball, del que haureu creat previament una portada.html que conte el títol del treball i algunes referencies, juntament amb alguna imatge convenientment seleccionada que tengui relació amb el tema.
Suposem que tenim també pensat l'index de continguts del tema dins la pàgina continguts.html que contindrà també la majoria de links a les altres pàgines del treball a publicar.
Copieu doncs el codi que teniu baix, fiqueu-lo dins una nova pàgina html. Feu les modificacions oportunes al títol, fons de la pàgina,...etc. i guardau-la amb el nom índex.html



Mapes sensibles

Un Mapa és una imatge que conté diferents enllaços en funció de la "zona" de la imatge en què fem clic. Els codis que indiquen l'aparició d'un mapa o imatge sensible són:




Per activar el mapa hem d'indicar la imatge a mostrar, indicant que aquesta imatge és tractada per un mapa. Per a fer això hem d'escriure per exemple el codi següent:( en el nostre cas treballarem amb una imatge que es diu mapa_file.gif )

Proveu vosaltres mateixos el mapa que teniu a continuació fent clic a diverses zones, us portarà a les diferents parts dels materials del curs.


Utilitzeu vosaltres mateixos un codi semblant al que teniu escrit baix per emprar un mapa sensible amb una imatge que haureu triat per afegir a la Portada.html del vostre treball del darrer trimestre.

Els mapes sensibles donen qualitat i interactivitat a les pàgines web, però la seva elaboració manual és molt laboriosa, sobre tot per establir les coordenades de les zones sensibles.

El Macromedia Dreamweaver disposa d'aquesta opció, però no així el Netscape Redactor ni el FronPage Express. Amb aquests dos editors s'ha de fer servir un programa especial anomenat Mapedit i que podeu trobar al CD-ROM del curs o a Internet a l'adreça http://tucows.uam.es/imap95.html, o incloure el codi HTML a mà. De fet hi ha moltes alternatives, per exemple el que heu vist abans està fet amb l'editor que teniu disponible a l'aula AceHTML 5.
Si voleu veure un altre exemple creat amb aquest editor,
  • Engegau el programa.
  • Obriu la pàgina Mapa_sensible.html que es troba a la carpeta .../Curs HTML/Recuros.
  • Aneu a la opció Images/ tercer botó ... i veureu com està fet.