TUTO-BARRA DE NAVEGACIÓ (AMB IMAGEREADY) de 2n nivell amb HOTSPOTS

Bon dia. Estic treballant en l'exercici de les tres pestanyes posant concepctes diferents, el que vàrem fer quan l'escola nàutica. He fet els tres index de colors diferents, però no ser com fer per agrupar-los i que canvii el color. Bé, el cert és que estic mig clavat a les capes, no sé si el text i la pestanaya han d'anar en una mateixa capa ni com posar-les juntes. Es possible d'explicar aquí al blog el procès?
Mercès.

Josep

[Dintre de les pràctiques més avençades estem desenvolupant ja les anomenades "meta-habilitats" en les que combineu totes les tècniques més bàsiques que heu estat fent fins ara.]

La dificultat d'aquest tutorial és de nivell mitjà. Per poder fer-lo cal controlar molt bé:

Sel·lecció

Guies

Capes

HTML

L'altre dia vàreu fer una barra de navegació horitzontal de dos nivells. Aquest cop en contes d'utilitzant sectors ho vau fer amb "hotspots" que traduït vól dir "manchas calientes", nosaltres li podem dir "zones interactives". A continuació us posaré els passos per si no us enrecordeu de com ho vam fer per intentar-ho de nou.

Crearem un document nou. Les seves dimensions han de estar inscrites en aquell rectangle límit que vam comentar. No hem de sobrepassar els 780x430px (que com ja sabeu és la mida de la finestra que queda al navegador si l'usuari està fent servir una resolució de pantalla 800x600). Per altra banda la barra de navegació. Posem per exemple una mida de: 650x40px.
A continuació posarem guies per marcar referències. Una horitzontal a y=20px i les altres verticals distribuïdes de tal manera que ens serviràn de referència per fer les tres pestanyes, les quals han d'estar separades entre sí igual distància. L'amplada de les pestanyes no té per que ser igual en totes. Depenent del text que tinguin poden ser més amples o menys. Però el que sí ha de ser igual és la distància que les separa. Hem fet servir el recurs de fer sel·leccions quadrades amb "Tamaño fijo" aprofitant que les guies es peguen magnèticament per aconseguir posar les guies amb més precisió.
Amb la eina "rectángulo redondeado" amb un radi de curvatura, posem, de 10px i la paleta "Trazos" a la vista anirem creant 4 traços: un per fer la forma de la barreta i els altres per fer les pestanyes. Cada cop que facis un traç posa-li nom i desel·lecciona'l a la paleta "Trazos" fins que no estigui assenyalat de blau(pica fora de qualsevol traçat que tinguis en aquesta paleta). Així aconseguim que no es faci només un sol traçat. Ens interessa que siguin traçats diferents.
Amb Ctrol sobre el traçat barreta convertint així aquest traçat en sel·lecció. A continuació fes Ctrol+MAYS(SHIFT) sobre el traçat d'una de les pestanyes i obtindràs una sel·lecció que serà la suma de la barreta i la pestanya. Un cop tens aquesta sel·lecció amb aquesta forma pinta sobre una capa nova. Repeteix aquesta operació obtenint com a resultat 3 capes, les quals estàn pintades amb la suma de barreta i cada pestanya.
En capes per sobre Col·loca el text que va a cada pestanya i també els textos de les subseccions de cada pestanya.

Animació del procés fins aquí:

Clicka aquí per veure l'animació del procés.

Vista de la finestra capes just abans d'escriure els textos:

I havent escrit els textos de les pestanyes.

Fixeu-vos a continuació que he afegit els textos de les seccions en capes diferents i les he empaquetades amb carpetes. [Cliqueu sobre la imatge per ampliar]. Us recordo que les carpetes també tenen un ull cosa que ens permet fer visibles o ocultar de cop totes les capes que estiguin a dins.

Fixeu-vos que en

Si haguèssim treballat en photoshop fins ara i no estiguèssim a ImageReady encara pasem a aquest programa apretant al botó inferior de la barra d'eines.
Si estàs al ImageReadyCS2 tingues a mà les finestres Contenido de Web i Mapa de Imágenes.
Posa zones calentes (o "HotSpots") sobre les pestanyes amb la eina "Mapa de imágenes".

[Cliqueu a la imatge per ampliar i veure l'animació del procés].

Mireu a continuació quin aspecte té la finestra Contenido de Web un cop hem creat aquestes "zones calentes". [Convindria que canvièssim de nom a aquestes zones per identificar-les més ràpidament i per treure l'accent de la paraula "Mapa de imágenes" que no és convenient de cara al pas que fa cap a pàgina web el ImageReady ja que posaria caràcters en el HTML que se surten de ASCII, que com ja sabeu no és recomenable que sigui al codi font d'una pàgina segons W3C encara que tinguem la sort de tenir nosaltres un navegador tolerant. No sabem mai si el navegador que tingui l'usuari serà tant tolerant.]
A continuació anirem a la finestra capes i posarem l'ull a la carpeta de la primera secció que hem fet, en aquest cas la categoria "cursos". Tanmateix tancarem els ulls de les altres carpetes: la de sortides i la de botiga.
Un cop només veiem la carpeta de la categoria principal cursos posarem més "hotspots" a cada una de les subseccions d'aquesta categoria.

Observeu què li passa a la finestra Contenido de Web.

Han aparegut més "hotspots"(que he resaltat en blau).
A continuació a la finestra Contenido de Web tancarem els ulls de les hotspots assenyalades en blau a la figura anterior. Per altra banda a la finestra capes tancarem l'ull de la categoria general cursos i obrirem l'ull de la categoria general sortides.
Repetirem el procés des del punt 10 fins el punt 11, i creant hotspots, però aquest cop amb les subseccions de la categoria sortides. Tornarem a tancar els ulls d'aquestes hotspots a la finestra contenido de web, tancarem l'ull de la carpeta sortides, obrirem l'ull de la carpeta botiga i repteriem el procés des del punt 10 fins el punt 11 però aquest cop amb la categoria general botiga.
Un cop ja hem creat totes les hotspots amb la eina que les crea () sel·leccionarem amb la eina de sel·leccionar hotspots () una per una i a la finestra Mapa de Imagen:

anirem omplint els camps per que aquestes hotspots facin de link. [Recordeu que les hotspots són zones d'una imatge en les que podem posar links. El camp Destino és l'atribut "target" de les etiquetes A, les dels links. En aquest cap definim on volem(en quina finestra, frame o iframe nomenada prèviament) que es representi el URL. Aquí és on intervindrà el que sabeu de HTML. Si encara no ho enteneu no us amoineu per que al Dreamweaver ho acabareu de veure.] Podem posar a les pestanyes principals les seguents URL per exemple: cursos.html, sortdies.html i botiga.html.
Tanmateix a les altres hotspots que hem creat i que corresponen a les subseccions hem de posar les URL en aquesta finestra. Amb això ja us espavilareu vosaltres amb el que sabeu de HTML ja que si feu servir URLs relatives en cada document aquestes URL podràn variar. [No us hi "mateu" amb això encara ja que amb Dreamweaver això serà molt més fàcil de fer ja que també permet crear "hotspots" de mapes d'imatge. Simplement que sapigueu que a ImageReady i lo que sabeu d'HTML ho podeu fer].

Un cop hem posat totes les URL a totes les hotspots ens dispoem a guardar optimizada como per obtenir tres imatges amb mapes d'imatge, o sigui amb Hotspots. Però per poder fer això abans hem de fer cada cop el següent:
1. Intercanviar l'ordre de les capes pastibarra1, pastibarra2, pastibarra3
  per a obtenir colors diferents per cada categoria principal. I també deixarem cada cop un ull per carpeta a la finestra capas a fí que només es vegin els textos de les subseccions.
[Cliqueu aquí per veure l'animació]
1. I a la finestra Contenido de Web cada cop posarem els ulls de les hotspots que volguem que es vegin en funció de la categoria principal que estem.

Al final fent Guardar Optimizado como hem hagut d'exportar tres documents per les categories principals almenys que els haurem anomenat respectivament: cursos.html, sortides.html i botiga.html