Les pàgines que vas fer en l'anterior unitat no estaven malament... per a un nen de primària. Que tal si comencem a enfocar el tema com a adults? Tornarem a construir la nostra botiga virtual però amb un nivell més alt.
Aquesta és la pàgina que has d'aconseguir al final de la unitat:
Les lletres que formen el títol de la pàgina són lletres animades. Més endavant ja ho veuràs.
- Abans de començar, crea un nou Lloc Web amb el nom "Unitat2" i en una carpeta també anomenada "Unitat2".
1.1. PLANIFICA LA PÀGINA AMB TAULES.
- Crea un document nou.
- Suposo que no cal que t'expliqui com fer el fons de la pantalla negre. Així que... FES-HO!
El primer que has de tenir clar en crear una pàgina web és saber com és de gran.
- Desplega Ver < Reglas < Mostrar.
Al voltant de la teva finestra han aparegut unes regles que et serviran d'ajuda per anar encaixant els diferents elements de la teva web.
És important que sempre deixis aquestes regles activades. Seran d'ajut.
També és important que et fixis en l'extrem inferior de la finestra:
Aquí et mostra la mida de la finestra amb que estàs treballant. Normalment ho has de tenir entre 760x420 i 955x600. D'aquesta manera, el que veus en la pantalla serà molt semblant al que es veurà en la majoria de monitors actuals.
MOLT BÉ! Un cop em après a situar-nos en les dimensions de la pantalla, ja podem començar a planificar la nostra pàgina Web.
Abans d'anar a buscar la pàgina que t'he presentat abans, plantejem-nos un objectiu més modest:
Observa que la pàgina, en el fons, no és més que una taula. Bé, en realitat són taules dins d'altres taules.
Segueix els següents passos per crear aquestes taules:
- En la part superior canvia la Barra Común per la Barra Diseño:
- En la nova barra d'eines que t'apareix, indica que vols treballar en mode Diseño.
- A continuació prem el botó Tabla de diseño per començar a dibuixar la taula. Dibuixa una taula de mida qualsevol:
- En la barra de propietats (part inferior de la pantalla) ajusta les mides de la taula tal i com la tenim pensada 900x500:
- Construeix la resta de sub-taules tal i com et mostro en l'animació:
Un cop hem creat l'estructura bàsica en taules. Anem a definir les caselles on introduirem els elements:
- Dibuixa les caselles amb el botó Dibujar Celda de Diseño. Fes-ho com t'indico en l'animació.
La diferència entre i és que:
Amb dibuixem taules amb un control absolut sobre les seves dimensions.
Dins d'una taula podem crear una sub-taula.
Amb dibuixem caselles que han d'ajustar-se a les mides de la taula. Malgrat poden assignar-li unes dimensions inicials el programa les pot canviar si requereix ajustar les caselles.
Dins d'una casella NO podem inclure sub-taules ni sub-caselles.
- Finalment torna a canviar la Barra d'Eines de "Diseño" a "Común".
- Guarda amb el nom d'arxiu "index.html".
1.2. AJUSTA LES MIDES DE LES IMATGE.
Ara ens prepararem per començar a omplir la taula d'imatges.
- En la següent figura pots anar clicant sobre les imatges per descarregar-les. Tingues en compte que cada lletra del títol és una imatge.
Decarrega-les dins de la teva carpeta Arrel.
- Un cop tens totes les imatges, construeix una pàgina com la següent:
Observa que si visualitzes la web en l'explorador, el títol "ELCULENLAIRE" apareix animat (perquè les lletres són gifs animats). Però en el DreamWeaver no. Tingue-ho sempre clar. El DreamWeaver serveix per editar i, per tant, les animacions i altres pijadetes no s'hi visualitzen.
Fins aquí no hi ha cap problema perquè encaixa tot dins de les caselles. Però què passa si una imatge és massa gran?
- Prova d'insertar la imatge en el seu lloc. Com que es massa gran es farà lloc dins de la taula desmuntant-ho tot. PERÒ TRANQUIL. NO CRIDIS ENCARA AL PROFESSOR!!! QUE TÉ MOLTA FEINA!!!!
Ara tens això, oi?
Ok, doncs selecciona la imatge i prem sobre el botó :
S'obre el FireWorks, conegut programa de maneig d'imatges, i et pregunta:
- Selecciona "Utilizar este archivo".
Un cop tens la imatge oberta en el FireWorks, ja pots modificar la seva mida:
- Desplega el menú Modificar < Lienzo < Tamaño de la imagen.
- En el quadre que s'obre indica que la imatge ha de tenir 300 px d'amplada (amplada de la taula que havies creat).
- Quan ho hagis fet, clica sobre el botó "Listo":
Automàticament, l'ordinador ha tornat al DreamWeaver i ja ha modificat la mida de la imatge. No? Què dius? Que en la pantalla continua essent una imatge gran i, a sobre, de pitjor qualitat? LLAVORS ÉS QUE HO HAS FET BÉ, però et falta una cosa:
- Prem sobre el botó Restaurar Imagen i la imatge es mostrarà en la seva mida real.
Segurament, ara encara tindràs la web d'aquesta manera:
Però què passa? Es que no hi ha manera de que et quedi bé?
Tranquil, ja ho tens bé, el problema és que el que veus no és real (quina excusa més bona, no?).
- Selecciona Ver < Actualizar vista diseño.
Ara sí que veus la pàgina web REAL.
I ara arriba el típic moment en que un alumne es vol fer el listillo i diu: "Jo modifico la mida directament en el Dreamweaver desplaçant els marcadors que hi ha en la imatge. Que és més fàcil." DONCS AIXÒ ESTÀ PROHIBIT!!! I et dono 2 motius:
- Encara que canviis la mida de la imatge, l'arxiu original és el mateix i continua ocupant un espai excessiu en la carpeta.
- Modificar la mida d'una imatge directament en el Dreamweaver és reduir MOLT la seva qualitat. MOLT MÉS QUE SI HO FEM AMB EL FIREWORKS COM T'HE EXPLICAT.
- Guarda amb el nom d'arxiu "index.html".
ACTIVITAT 2.1. - INCLOU LA POSTA DE SOL.
Seguint el mateix procediment, posa la imatge de la posta de sol en l'espai inferior de la pàgina web:
- Guarda amb el nom d'arxiu "index.html".
1.3. MODIFICA LES PROPIETATS DE LA TAULA.
Permet-me un petit parèntesis abans d'entrar en el darrer apartat d'aquesta unitat.
Fins ara t'he explicat com creat taules amb l'eina de "Diseño". Aquesta eina és molt útil si tens molt clar com vols que sigui la teva pàgina Web. Si no la tens clara, millor no et posis a fer-la i et posis a pensar una mica més. Exacte, pensar: aquella cosa que fas quan et quedes amb la mirada perduda:
El fet és que, de vegades, l'eina que t'he explicat per crear taules pot no ser-te útil. Així que t'explico una altra manera de fer-ho. Tu mateix, en cada cas, ja triaràs l'opció que més t'agradi o et convingui.
- Crea un document nou.
- Selecciona Insertar < Tabla. (Si no et deixa és que encara tens l'opció de "Diseño" activada, revisa els passos anteriors del tutorial per veure com desactivar-la).
En el quadre de diàleg que t'apareix pots configurar la taula al teu gust.
- Crea les diferents taules que t'indico (i escriu text a dins) amb les diferent configuracions:
Crea una taula tant ampla com la finestra on es visualitzi:
Crea una taula de 100 px d'amplada.
Fa visible el borde de la taula:
1
2
3
4
Deixa un petit espai en blanc entre la línia de la casella i el text:
1
2
3
4
Deixa una separació entre les línies de cada casella:
1
2
3
4
- Inserta una fila enmig de l'última taula creada fent: "clic dret" < Tabla < Insertar filas o columnas.
1
2
3
4
- Uneix les caselles 1 i 2 seleccionant-les totes dues i fent: "clic dret" < Tabla < Combinar celdas.
12
3
4
- Divideix la casella 4 en dos caselles més petites fent: "clic dret" < Tabla < Dividir celda...
12
3
4
- Finalment, inserta una taula a sota de la casella 4. Situa el cursor allí i fés: Insertar < Tabla.
12
3
4
- Guarda amb el nom d'arxiu "provaTaules.html".
ACTIVITAT 2.2. - PRACTICA LA MODIFICACIÓ DE TAULES.
Ara que ja has vist com funcionen les eines per configurar les taules, torna a construir la pàgina principal de "ELCULENLAIRE" amb aquest sistema.
Probablement veuràs que et costa més i, fins i tot, que no et queda tan bé el resultat. Però les eines que t'he explicat et seran útils en moltes ocasions així que no ha estat temps perdut.
- Guarda amb el nom d'arxiu "index2.html".
1.5. DIVIDEIX UNA IMATGE EN PARTS.
Tornem a recuperar l'arxiu "index.html" i el desenvoluparem més.
Passarem d'això: a això:
Notes la diferència? Observa que, en la segona imatge, la figura del skatter arriba fins a darrera de la imatge samarreta.
Si dibuixem les línies de la taula veuriem això:
COM POT SER QUE UNA IMATGE VAGI D'UNA CASELLA A UNA ALTRA? Això és el que aprendrem en aquest apartat.
Però abans, hem de preparar les imatges.
- Ves a la teva carpeta arrel i fés una còpia de les imatges i . Més que rés, per protegir els originals.
- En el document "index.html" selecciona la imatge i activa l'edició amb el FireWorks.
- Un cop en el FireWorks, traça un marc de selecció rectangular i configurar'l per que sigui "Fundido" i a 50.
- Inverteix la selecció amb Seleccionar < Seleccionar inverso i esborra el que hi ha fora del marc.
- Selecciona Modificar < Lienzo < Color del lienzo i indica que vols el color negre com a color de fons.
- Prem "Listo" per tornar al DreamWeaver.
- Repeteix els passos amb la imatge per convertir-la en .
Un cop retocades les imatges, et quedarà una pàgina com aquesta:
Molt bé, ara que ja tenim les imatges bé, les podem ESBORRAR de la web:
Pensaràs que m'he tornat boig, però confia en mi...
Recorda que la imatge del skatter ha de passar per darrera de les línies de la taula. Doncs per aconseguir-ho, el que farem es convertir la imatge en FONS DE TAULA. De fet construirem la següent imatge amb el FireWorks i la posarem de fons de les taules.
Som-hi!
- Obre el FireWorks i crea un document nou de 900x400 (les dimensions de la taula) i amb el fons de color NEGRE.
- Selecciona Archivo < Importar i situa les imatges així:
Si recordes, en la pàgina Web haviem creat varies taules.
El fons que volem crear ha d'anar en les taules 1 i 2. El que farem ara és:
Dividir la imatge en 2 parts:
Aquesta part la posarem com a fons de la Taula 1.
Aquesta part la posarem com a fons de la Taula 2.
- Tenim les imatge muntades en el FireWorks. Ara prem el botó per crear Divisions i activem el botó per visualitzar-les.
- Creem una primera divisió de 300x400 (mides de la Taula 1).
- Creem una segona divisió de 600x400 (mides de la Taula 2).
- Guardem la imatge amb el nom "fonsTaules.png".
- Ajustem el format d'optimització a JPEG i fem Archivo < Exportar indicant clarament que volem exportar les divisions.
El programa ha creat les 2 imatges separades.
- Tornem al DreamWeaver.
- Situem el cursor en la Taula 1 i posem el fons de taula corresponent, probablement s'anomenarà "fonsTaules_r1_c1.jpg" (és el nom que ha creat el FireWorks).
- Situem el cursor en la Taula 2 i posem el fons corresponent, "fonsTaules_r1_c2.gif"
El resultat ha de quedar:
- Guarda la pàgina sense canviar el nom "index.html"
ACTIVITAT 2.3. - ARA TÚ.
Crea un disseny com el que t'he proposat en l'index en una de les pàgines que tens creades de la unitat anterior. Recorda que has creat un lloc web nou, per tant, hauràs de copiar els arxius que vulguis modificar.
ATENCIÓ: SEMPRE QUE COPIÏS UNA WEB HAS DE COPIAR L'ARXIU "HTML" I LES IMATGES.
Tria la pàgina que vulguis i aplica tot el que has après!
Si t'animes pots fer-ho en totes les pàgines, però no és obligatori.
1.6. HAS DE SER MÉS ENDREÇAT.
Bé, quan hagis acabat amb tot el que t'he demanat, és probable que tinguis un lloc similar a aquest:
Tot just tenim unes poques pàgines i ja comencem a acumular material. Cal ser una mica polit i anar creant subcarpetes dins del nostre lloc arrel.
El millor seria haver-ho previst d'entrada, però no ho em fet! Què podem fer ara... De moment et diré el que NO podem fer:
NO pots anar a la teva carpeta arrel, començar a crear subcarpetes i canviar els arxius d'una ubicació a una altra. Tots els enllaços i imatges deixarien de funcionar!!!
Si vols fer això ho has de fer des de la mateixa finestra que et mostra el Dreamweaver. Així, després de cada canvi d'ubicació et preguntarà:
"Quieres actualizar los vínculos?"
I tu diràs, "Sí quiero" o també pots dir "Actualizar".
Observa la següent animació i repeteix els passos que et resumeixo:
- Crea una carpeta "Imatges" i mou totes les imatges que SÍ utilitzes en el seu interior.
- Crea una carpeta anomenada "Provisional" i mou totes les imatges i arxius que (de moment) no utilitzaràs. Quan les vulguis utilitzar, abans de fer-ho, recorda que les hauràs de transportar a la carpeta "Imatges".
PROJECTE FINAL UNITAT 2: Crea el teu propi disseny.
En la unitat anterior vas iniciar un Lloc Web que seria el projecte general del curs. En aquesta fase del projecte has de:
1) Millora el maquetat de la portada del teu projecte a partir del que has après en aquesta unitat. En els següents exemples tens una orientació sobre el que valoraré (llegeix els comentaris en vermell):
2) Crea una pàgina anomenada "indexFoto.htm". En aquesta pàgina hi redactàs una breu descripció i un enllaç a les 3 activitats fotogràfiques que has realitzat. Valoraré:
L'estètica de la pàgina ha de ser de l'estil de la portada (menys elaborada però de l'estil).
L'estructura i les descripcions han de ser clares, precises i ordenades. I sense faltes d'ortografia.
1.1. PLANIFICA LA PÀGINA AMB TAULES. 
Aquí et mostra la mida de la finestra amb que estàs treballant. Normalment ho has de tenir entre 760x420 i 955x600. D'aquesta manera, el que veus en la pantalla serà molt semblant al que es veurà en la majoria de monitors actuals.
Observa que la pàgina, en el fons, no és més que una taula. Bé, en realitat són taules dins d'altres taules. 
per començar a dibuixar la taula. Dibuixa una taula de mida qualsevol:
. Fes-ho com t'indico en l'animació.
en el seu lloc. Com que es massa gran es farà lloc dins de la taula desmuntant-ho tot. PERÒ TRANQUIL. NO CRIDIS ENCARA AL PROFESSOR!!! QUE TÉ MOLTA FEINA!!!!
:
- Selecciona "Utilizar este archivo". 
ACTIVITAT 2.1. - INCLOU LA POSTA DE SOL.
. Més que rés, per protegir els originals.
per convertir-la en 
.
i la posarem de fons de les taules.
Aquesta part la posarem com a fons de la Taula 1.
Aquesta part la posarem com a fons de la Taula 2.
- Situem el cursor en la Taula 1 i posem el fons de taula corresponent, probablement s'anomenarà "fonsTaules_r1_c1.jpg" (és el nom que ha creat el FireWorks).
Tot just tenim unes poques pàgines i ja comencem a acumular material. Cal ser una mica polit i anar creant subcarpetes dins del nostre lloc arrel.