D72. Mòdul 3. Pràctica 4.Disseny i creació de pàgines web

Mòdul 3

Disseny i creació de pàgines web

Pràctica

Exercicis

Retoc d'imatges

L'objectiu d'aquesta pràctica és aprendre a retocar imatges i a posar-les a punt per a una pàgina web.

Qualsevol programa, sistema o pàgina web està organitzada en carpetes. Les carpetes ordenen els elements que contenen. L'ordre és essencial per localitzar el material de forma ràpida i per aconseguir referències precises, fàcils d'interpretar utilitzant, en aquest cas, el Dreamweaver MX 2004.

Totes les imatges que prepareu les haureu de posar sempre dins una carpeta general d'imatges. Dins aquesta carpeta, podeu col·locar tantes carpetes classificatòries com vulgueu, sempre, però, anomenant la carpeta general de forma que recordeu que allà hi ha imatges.

No obstant, no n'hi ha prou a tenir guardades les imatges dins la carpeta corresponent. Cal preparar-les. També cal anomenar les imatges i donar-les el format més adient segons un criteri objectiu indiscutible: reduir al màxim el temps de descàrrega de la pàgina. És a dir, cal fer tots els retocs necessaris perquè la vostra pàgina web sigui agradable a la vista, tingui qualitat, i les imatges no alenteixin la seva càrrega.

Per anomenar les imatges, igual com a tots els materials web, cal emprar minúscules, sense accents, sense caràcters especials i mantenir-les dins una carpeta. Tot això té la finalitat de facilitar la localització de les imatges a partir del llenguatge HTML, que és el llenguatge pel qual es visualitza la pàgina web al navegador. Aquest llenguatge utilitza un codi de referència per a cada imatge que col·loqueu.

Per exemple, si programeu de forma entenedora: busqueu la imatge m3_4.jpg, que té les mides 240 d'amplada i 320 d'alçada, aleshores se us mostra aquesta imatge. En anglès, buscar és search, amplada width i altura height, o sigui, en llenguatge HTML, el codi de referència seria una línia que diria:

<img src="imatges/m3_4.gif " width="162" height = "162">

Exemple d'imatge gif

Desenvolupament de la pràctica

Prepareu una imatge per a la vostra pàgina web.
Activeu el Fireworks MX2004. Obriu la carpeta m3imatges del material de treball del curs D72. Localitzeu el fitxer m3_1.jpg o m3_1a.jpg.
Com podeu veure, cal treballar-hi abans de poder considerar aquestes figures com a útils per penjar a una pàgina web. Cal reduir les mides, enquadrar, posar la figura vertical, clonar si cal, i també optimitzar-les.

Punts per desenvolupar

Activeu el Fireworks. Obriu la imatge que hagueu escollit (m3_1.jpg o m3_1a.jpg).
Activeu el menú Modificar | Transformar i l'opció que millor us vagi per aconseguir posar la figura vertical.
Donat el cas, per veure tota la imatge que voleu transformar, haureu d'anar al menú Modificar | Lienzo | Tamaño de la imagen i, a continuació, anar a Modificar | Transformar | Transformación libre.
Col·loqueu-vos amb el cursor a prop dels vèrtexs de la imatge i, quan surti la fletxa ondulada, feu girar gradualment fins que aconseguiu una figura vertical.

Imatge mal enquadrada

Eina de transformació lliure

Seleccioneu l'eina anomenada Herramienta Recortar dins les eines gràfiques.

Poseu el cursor sobre la figura, seleccioneu-la i deixeu l'aire (espai que es dóna a la imatge perquè no sembli massa ajustada) que cregueu que li dóna l'aspecte que buscàveu. Cliqueu dues vegades sobre el ratolí col·locat dins la figura i retalleu a voluntat (si no ha sortit el resultat esperat, sempre podeu tornar enrere des del menú Edición | Deshacer Recortar el documento, o bé, si activeu el menú Ventana | Barra Herramentas | Modificar, apareixen aquestes icones , cosa que ho fa molt més senzill).
Si us falta fons, sempre podeu clonar la imatge activant Herramienta sello . Per clonar, activeu el botó de clonar i poseu-vos amb el cursor sobre la part que voleu copiar. Premeu la tecla Alt (Fireworks MX), en el cas del Fireworks MX 2004 no cal, i situeu-vos amb el ratolí sobre l'aspecte que voleu clonar i apliqueu amb el cursor, com si tinguéssiu un pinzell, la part que us falta.
Guardeu la figura resultant dins la vostra carpeta d'imatges amb el nom m3_2.jpg.
Minimitzeu la pantalla de treball.
Comproveu quin tipus d'imatge heu guardat: quin format té, quines mides fa, quant pesa? Això ho podeu fer col·locant el cursor sobre la imatge que heu guardat o a partir de llegir a Propiedades la informació que preciseu.
Maximitzeu el Fireworks. Activeu Ventana | Optimizar, escolliu la configuració jpg archivo más pequeño, qualitat 40% i exporteu la figura resultant amb el nom m3_2a. Compareu el resultat entre la figura anterior i aquesta. Anoteu les mides que fa i quant pesa.
Torneu al Fireworks. Augmenteu la qualitat de la imatge fins al 75%. Exporteu amb el nom m3_3a. Compareu el resultat amb les dues figures anteriors i decidiu quina opció és la més rentable per penjar una imatge en una pàgina web.
Si no ho heu fet abans, reduïu les mides de la figura activant el menú Modificar | Lienzo | Tamaño del imagen amb les dades: An:240, Al:320.
La imatge resultant hauria de ser semblant a una d'aquestes:

Desactiveu l'opció Restringir proporciones i podreu estirar o reduir la imatge amb el cursor com vulgueu.

Restringuir les proporcions de la imatge

Exporteu la figura com a m3_4.jpg.

Un cop preparades les imatges, cal col·locar-les al seu lloc dins una pàgina web. Vegeu la pràctica 5 sobre la ubicació d'imatges.

L’opció d'exportació ràpida , és a dir, la fletxa que hi ha a la banda superior dreta del document, també es pot utilitzar, no obstant, és millor primer fer les coses a poc a poc i entenent per què feu cada cosa al seu moment.