DreamweaverCS by pep tecnologies

Creació de pàgines web amb Dreamweaver CS

DREAMWEAVER CS

EXERCICI 1 Anem a crear la nostra primera pàgina web. Per fer-ho, segueix els següents passos: 1. Executa el programa Macromedia Dreamweaver. 2. Veuràs que ja apareix una pàgina web en blanc. 3. Sense donar format a la lletra, escriu el següent text:

KEN FOLLET Ken Follett, fill de Martin i Veenie, va néixer a Cardiff, Gal·les, on va viure fins que la seva família es va traslladar a Londres quan tenia 10 anys. Va ser quan els seus pares, fundamentalistes cristians, li van prohibir anar al cine i veure la televisió que va desenvolupar un primerenc interès per la lectura, tot i així fou un estudiant normal i corrent fins que va arribar a l'adolescència. El 1967 va ingressar a la University College of London, on va estudiar filosofia i es va implicar en moviments d'esquerres. Es va casar amb la seva primera muller, Mary, el 1968. Un cop graduat, a la tardor del 1970, Follett es va matricular a un curs de periodisme de tres mesos i va aconseguir feina com a reporter al Sout Wales Echo de Cardiff. Després de tres anys a Cardiff va tornar a Londres per treballar de reporter al Evening Standard. Al considerar aquesta feina poc gratificant, va deixar el periodisme per passar-se a l'edició i es va convertir, a finals dels 70, en el subdirector de gestió de l'editorial Libros Everest. Follett va començar a escriure relats, al principi només per afició, a les tardes i als caps de setmana. L'èxit li va arribar amb la publicació, el 1978, de Storm Island (La illa de les tempestes), que el va fer internacionalment famós. Des d'aleshores totes i cada una de les seves novel·les s'han convertit en un èxit de ventes, i un gran número d'elles han estat portades al cinema. Follett es va involucrar a finals dels anys 70 amb les activitats del Partit laborista. Al llarg de les seves activitats polítiques va conèixer a Barbara Follett, una treballadora del Partit Laborista, que el 1982 es va convertir en la seva segona muller. Barbara fou escollida membre del Parlament el 1997, representant a Stevenage, i fou reescollida el 2001. El mateix Follett és un fidel partidari dels laboristes.

4. Fixa’t amb que quan prems la tecla ENTER per fer un salt de línia, Dreamweaver fal un doble salt de línia. Per poder fer-ne un de simple, recorda que es fa amb la combinació de tecles CTRL + ENTER. 5. Guarda aquesta pàgina fent ARCHIVO->GUARDAR.

www.xelu.net

DREAMWEAVER CS

6. Crea una carpeta que porti pel nom “biblioteca”. A dins d’aquesta, crea’n una altra que porti per nom “autors”. Recorda que els noms que posem als documents i carpetes a l’hora de fer una pàgina web no poden estar escrits en majúscules, no poden contenir accents, espais, dièresis, apòstrofs... Per tant, a vegades s’hauran de fer errades ortogràfiques per poder escriure els noms dels arxius i carpetes. 7. Dins de la carpeta “autors”, guarda el document amb el nom “ken_follet”. Fixa’t que Dreamweaver ja col·loca automàticament l’extensió “.html” en el teu document.

www.xelu.net

DREAMWEAVER CS

EXERCICI 2 Anem a definir el SITIO (LLOC - SITE). Amb això, Dreamweaver ens donarà tot un seguit d’avantatges que podrem utilitzar a partir d’aquest moment. Per definir el nostre LLOC, segueix els següents passos: 1. Ves al menú Sitio -> Nuevo Sitio.

2. A la finestra que apareix, hauríem de triar la pestanya BÁSICAS de la part superior. 3. A la primera finestra que apareix, com a nom del lloc li posarem BIBLIOTECA. Seguidament premerem SIGUIENTE. 4. A la següent finestra hi ha d’haver seleccionat el NO, NO QUIERO UTILIZAR LA TECNOLOGIA DEL SERVIDOR. Aquesta opció és la correcte. Premem SIGUIENTE. 5. Premem l’icona de la carpeta groga i escollim la carpeta arrel on tenim guardada la pàgina web. Seguidament premem SIGUIENTE. 6. En el desplegable de com ens volem connectar al servidor remot, escollirem la primera opció que diu NINGUNO. Nosaltres utilitzarem el FileZilla per aquest propòsit. Premem SIGUIENTE.

www.xelu.net

DREAMWEAVER CS

7. Ja hem acabat. Premem FINALIZAR. 8. Si ho heu fet tot bé, ha d’aparèixer un panell a la banda dreta amb tots els arxius i carpetes corresponents al nostre LLOC.

www.xelu.net

DREAMWEAVER CS

EXERCICI 3 Anem a penjar en el servidor la nostra primera pàgina web. Per fer-ho utilitzarem el programa FileZilla i seguirem els següents passos:

1. Engeguem el programa FileZilla. 2. Anem al menú Fitxer -> Administra els llocs. 3. Es tracta de que creem una connexió permanent entre el nostre servidor i el nostre ordinador. D’aquesta manera ens serà més fàcil actualitzar la pàgina. En la pantalla següent li hem de donar les següents dades que t’haurà subministrat el professor: a. Nom del lloc: nom que identificarà el teu servidor. b. Servidor: ftp.strato.com c. El tipus d’entrada ha de ser NORMAL. d. Usuari: ftp_alumne@xelu.net e. Password: *******

www.xelu.net

DREAMWEAVER CS

4. Un cop acabem de definir el lloc, premem CONNECTA i la pantalla ens queda partida en dues parts. A la part esquerra hi tenim el nostre ordinador (lloc local) i a la dreta el nostre servidor (lloc remot).Tot el que arrosseguem de la banda esquerra a la banda dreta quedarà publicat a Internet. Per tant, arrosseguem la pàgina que acabem de crear i esperem que estigui del tot pujada. 5. Ara anem a l’adreça de la nostra pàgina web utilitzant un navegador i comprovem que tot funciona com ens esperàvem.

www.xelu.net

DREAMWEAVER CS

EXERCICI 4 Per poder començar a donar format al text i als diferents elements de la nostra pàgina, utilitzarem els ESTILS CSS. De fet, funcionen com altres programes que treballen amb estils. Nosaltres començarem definint 2 estils per la nostra pàgina: • .titol: ha de ser lletra grandeta, negreta i alineada a l’esquerra. El color us el deixo al vostre gust. • .costext: la lletra hauria de ser d’un tamany 12, sense cap efecte (ni negreta, ni cursiva...), justificada i de color negre.

Per poder definir aquests estils, recorda que has de seguir els següents passos: 1. Com que són els primers estils que definim, primer de tot hem de crear una fulla d’estils, que guardarem amb el nom estils.css a la carpeta ESTILS que penjarà directament de l’arrel de la nostra pàgina web. Aquesta fulla se’ns crearà directament quan intentem fer la definició del primer estil.

2. Un cop creada, aquesta fulla d’estils quedarà vinculada a la nostra única pàgina (ken_follet.html). 3. A partir d’aquí, podem crear els altres estils que de moment necessitem.

www.xelu.net

DREAMWEAVER CS

4. Els diferents apartats a l’hora de crear uns estils són els següents. El professor t’indicarà quins són d’utilitat en aquest moment.

www.xelu.net

DREAMWEAVER CS

www.xelu.net

DREAMWEAVER CS

www.xelu.net

DREAMWEAVER CS

www.xelu.net

DREAMWEAVER CS

EXERCICI 5 Aplica els estils creats en l’exercici anterior de tal manera que la pàgina escrita anteriorment quedi com l’exemple de sota. Per fer-ho, segueix els passos següents:

www.xelu.net

DREAMWEAVER CS

1. Ombreja el text corresponent i selecciona l’estil adequat a la paleta propietats.

2. Canvia les propietats de la pàgina perquè quedin com a l’exemple de sota:

3. Torna a guardar el document fent Archivo - > Guardar. 4. Finalment, ves a observar el codi HTML de la pàgina que acabes de crear. Per ferho, ves al menú Ver -> Código y diseño. Veuràs que la finestra es divideix en dos parts. A la part de dalt pots veure tot el codi HTML corresponent a la pàgina web de la part de sota. Si ombreges qualsevol part de la pàgina web de sota es marcarà el codi HTML de la part superior.

www.xelu.net

DREAMWEAVER CS

EXERCICI 6 Abans de poder avançar en coneixements, necessitem més pàgines per poder-les enllaçar. Per tant, crea les següents pàgines i guarda-les, respectivament, amb el nom de “stephen_king.html”, “ferran_torrent.html” i “merce_rodoreda.html” a la carpeta “autors”. Aplica els mateixos estils que amb la pàgina d’en Ken Follet. Podeu fer servir els trucs que vulgueu per tal de no haver d’escriure tant... Penseu que jo no ho he pas fet, he anat a Internet a la Viquipèdia i...

STEPHEN KING (21 de setembre de 1947) és un escriptor d'Estats Units conegut per les seves novel·les de terror. Els seus llibres solen estar a la llista de best-sellers. Les històries de Stephen King tenen com a protagonistes personatges de classe mitjana, un nen, o la majoria de vegades, un escriptor. Els personatges viuen la seva vida normal, però els fets sobrenaturals i circumstàncies estranyes canvien el curs de la història. King manifesta un coneixement ambiciós del gènere del terror, tal i com mostra en el seu llibre de no ficció anomenat Danse Macabre, que registra un ordre cronològic de nombroses dècades de treballs notables sobre literatura i cine. Escriu a més llibres que no podrien ser catalogats en el gènere del terror, com les novel·les The Body i Rita Hayworth and Shawshank Redemption (adaptades posteriorment a la pantalla gran com a Stand By Me i The Shawshank Redemption respectivament), a l'igual que La milla verde. Stephen King va escriure sota el nom de Richard Bachman en molts dels seus llibres on la història estava basada en un terror més mental que físic. "The Long Walk" n'és un exemple.

www.xelu.net

DREAMWEAVER CS

FERRAN TORRENT (Sedaví, l'Horta, 30 de maig de 1951). Escriptor i periodista. És un dels escriptors valencians actuals més reconeguts i que més ven. Des dels seus inicis ha sigut conscient dificultats culturals i lingüístiques del País Valencià, però, en certa manera, el seu èxit representa la culminació de la normalització lingüística als territoris de parla catalana. Un dels trets més característic dels seus escrits és que fa ús de les variants valencianes. El gènere que més ha treballat és el de la novel·la negra. A més, col·labora cada dissabte i diumenge al programa de ràdio La Primera Pedra de RAC1 des de fa diversos anys. Educat en un col·legi de jesuïtes, va començar la carrera de Dret però la va deixar. Es dedicà durant anys a treballar en qualsevol faena: venedor, representant comercial i d'altres oficis, fins que l'èxit literari li va facilitar dedicar-se només a escriure. Aquesta cita és una bona mostra del seu caràcter i manera d'enfrontar la vida: "Sempre m’han posat nerviós els puristes de tota mena: els de la llengua, els de literatura i els de tot. La veritat és que m'inspira més un antre que un ateneu. I m'ho passe millor, més ben dit, molt millor entre dones de qualsevol tipus que entre savis i intel·lectuals. Preferisc els bordells a les cadires d'una acadèmia. Els intel·lectuals i els polítics són les espècies que més m'avorreixen."

www.xelu.net

DREAMWEAVER CS

MERCÈ RODOREDA Filla única d'un matrimoni amant de les lletres, la seva infantesa va estar marcada per la figura del seu avi matern, Pere Gurguí, que li va inculcar un profund sentiment catalanista que la va acompanyar durant la resta de la seva vida. El 1928, i amb només vint anys, es va casar amb el seu oncle, Joan Gurguí, catorze anys més gran que ella, amb qui el 1929 va tenir Jordi, el seu únic fill. El seu matrimoni va ser un fracàs. Rodoreda va buscar una vàlvula d'escapament que li permetés fugir d'una vida massa monòtona. Aquest escapament el va trobar en la literatura. Va començar col·laborant en diverses publicacions com La Veu de Catalunya, La Publicitat o Mirador. Va escriure també quatre novel·les que anys més tard va descartar, ja que les considerava fruit de la seva inexperiència. Només va salvar Aloma (1937). Tot i això, la va reescriure l'any 1969 convertint-la en una obra completament diferent. En esclatar la Guerra Civil Espanyola, Rodoreda va col·laborar amb el Comissariat de propaganda de la Generalitat. L'any 1937 es va separar del seu marit.[1] L'any 1939 es va exiliar a França. Creia que l'exili seria per poc temps, i per això va deixar el seu fill a Barcelona, a càrrec de la seva mare, Montserrat Gurguí. Es va instal·lar, juntament amb altres intel·lectuals i escriptors catalans, a Roissy-en-Brie, a les rodalies de París, d'on va haver de fugir en esclatar la Segona Guerra Mundial. Després d'un llarg pelegrinatge per França, va marxar cap a Suïssa, en concret a la ciutat de Ginebra, juntament amb el seu company sentimental Armand Obiols, pseudònim del crític literari Joan Prat. Fou en aquesta ciutat on va escriure la seva obra més aclamada, La plaça del Diamant (1962), considerada la novel·la més important de la narrativa catalana de postguerra. Ambientada en el barri barceloní de Gràcia, la novel·la explica la història de la Colometa, una dona com tantes d'altres a qui la guerra destrossà la vida i les il·lusions. La plaça del diamant és alhora una novel·la històrica, psicològica i de costums. De la seva època a Suïssa és també la novel·la El carrer de les Camèlies (Premi Sant Jordi 1966), el recull La meva Cristina i altres contes (1967) i les Flors de debò, de Viatges i flors.

www.xelu.net

DREAMWEAVER CS

EXERCICI 7 Per poder fer la pàgina principal des de la qual es podrà accedir a la pàgina individual de cadascuna de les quatre biografies dels autors, farem servir la seva fotografia com a enllaç. Per tan, primer hem d’aconseguir les fotos, després redimensionar-les i optimitzar-les i finalment col·locar-les al lloc corresponent. Per fer tot això, segueix els passos següents:

1. Amb l’ajuda del cercador Google (www.google.com) busca les quatre imatges i guarda-les al disc dur, cada una d’elles amb el nom de l’autor (recorda que no pots fer majúscules ni espais en blanc!). 2. Obre el programa Photoshop (és el que farem servir sempre per optimitzar les fotografies i redimensionar-les). 3. Obre una de les fotos (Archivo -> Abrir) 4. Agafa l’eina de retallar. A la barra de dalt de tot, al requadre AMPLADA i ALÇADA, escriu 250px i 370px respectivament. 5. Ara enquadra el tros de foto que ens interessi i prem enter. La foto ja estarà retallada a la mida que necessitem. 6. També ho podríem haver aconseguit a través del menú Imagen -> Tamaño de imagen. Selecciona altura 370 (en píxels) i prem OK .En aquest cas però, veiem que com que l’amplada va lligada amb l’alçada no aconseguirem que totes les fotos

www.xelu.net

DREAMWEAVER CS

tinguin exactament el mateix tamany. Si ho volem fer, després d’això haurem de canviar les mides a Imagen -> Tamaño del lienzo (això si que ens retallarà la part sobrant).

7. Guarda la imatge anant a Archivo -> Guardar para web... Selecciona format JPEG i qualitat Alta i prem GUARDAR.

www.xelu.net

DREAMWEAVER CS

8. Observa que el programa et dóna el tamany que ocupa en KB un cop guardada. 9. Guarda-la dins la carpeta “autors” dins de la carpeta “imatges” amb el nom de l’autor corresponent en cada cas. 10. Al final hauràs de tenir 4 imatges de 4 autors dins de la carpeta, totes elles amb les dimensions correctes.

www.xelu.net

DREAMWEAVER CS

EXERCICI 8 Anem a fer la pàgina principal que ens servirà d’índex per la nostra pàgina d’autors. La pàgina hauria de quedar com segueix (aproximadament). El document l’hauries de guardar amb el nom “index_autors.html”, juntament amb les 4 pàgines html dels autors.

Biblioteca d’autors KEN FOLLET Nascut a Cardiff, Gal·les el 5 de juny de 1949

STEPHEN KING Nascut el 21 de setembre de 1947

www.xelu.net

DREAMWEAVER CS

FERRAN TORRENT Nascut a Sedaví, l’Horta el 30 de maig de 1951

MERCÈ RODOREDA Nascuda a Barcelona, el 10 d’octubre de 1908

Crea els estils necessaris per poder implementar la pàgina i aplica’la: •

.titol_index: títol general amb una línia a la part de sota i centrat

•

.titol_index_autor: igual que el titol però centrat.

•

.subtitol_index_autor: lletra petita, negreta i centrada.

•

.foto_contorn: contorn d’1 píxel per a les fotos.

www.xelu.net

DREAMWEAVER CS

EXERCICI 9 Anem a enllaçar la pàgina “index_autors.html” amb les pagines “stephen_king.html”, “ken_follet.html”, “ferran_torrent.html” i “merce_rodoreda.html”. Per fer-ho, segueix els següents passos:

1. Obre la pàgina “index_autors.html”. 2. Selecciona la imatge de l’autor Ken Follet. 3. A la paleta propietats, selecciona la carpeta groga al costat de la casella “vínculo”.

www.xelu.net

DREAMWEAVER CS

4. Apareixerà una finestra que ens permetrà seleccionar amb quin arxiu volem enllaçar. Seleccionem l’arxiu HTML corresponent i premem ACEPTAR. 5. Repeteix el mateix per la resta d’imatges. 6. Guarda el resultat. Recorda que els enllaços no es poden provar directament des de DREAMWEAVER. Com que estem creant una pàgina web, els enllaços només funcionaran des d’un navegador. 7. Per tan, per veure el resultat en el navegador premem F12 des de Dreamweaver tenint la pàgina que volem visualitzar carregada a la pantalla. Això ens obrirà el navegador per defecte i ens mostrarà la pàgina com si estigués penjada en el servidor. Per definir més navegadors de prova, anem al menú Editar -> Preferencias i seleccionem la pestanya “vista previa en el navegador” (o similar).

www.xelu.net

DREAMWEAVER CS

EXERCICI 10 Anem a retocar els estils des de la vista de codi. Resulta que tenim un problema: els estils que creem queden guardats a la fulla d’estils estils.css, però les propietats de la pàgina les haig d’anar definint cada cop que en creo una de nova. Podem fer que les propietats de la pàgina vagin a la fulla d’estils? La resposta és SI! 1. Actualment, la nostra fulla d’estils hauria de tenir el següent aspecte:

2. Si anem a la vista de codi d’una de les pàgines on hem definit les propietats de la pàgina, trobarem el següent (ens interessa la part emmarcada):

www.xelu.net

DREAMWEAVER CS

3. Es tractarà d’agafar aquesta part i fer-ne una còpia a la fulla d’estils. El document estils.css ha de quedar de la següent manera:

4. Ara ja només ens quedarà esborrar tot rastre de les propietats de la pàgina al document html de l’autor. Hauríem d’esborrar tot el que està emmarcat en la imatge de més a sota. D’aquesta manera, aconseguim que cada pàgina nova que creem i vinculem a la fulla d’estils ja tingui, per defecte, les propietats de la pàgina que volem. No t’oblidis de guardar els canvis en els dos documents!

www.xelu.net

DREAMWEAVER CS

www.xelu.net

DREAMWEAVER CS

EXERCICI 11 En aquest exercici, enllaçarem totes les pàgines que hem creat fins ara entre elles. Així, un cop les visitem no haurem de fer servir el botó ATRÁS del navegador. Segueix els següents passos: 1. Obre els quatre arxius HTML corresponents als autors. 2. Al final de cadascun d’ells, hi posarem un índex de la mateixa manera que es veu a la figura de sota.

3. Anem a crear els enllaços. Seleccionem el text que volem fer servir d’enllaç, i a la paleta propietats, al costat de la casella Vínculo, agafem el punt de mira adjacent i sense deixar de prémer el botó esquerra del ratolí, anem a buscar l’arxiu al qual volem enllaçar a la part dreta a la paleta ARCHIVOS. 4. Fem el mateix per tota la resta d’enllaços i guardem totes les pàgines. Prova-ho al navegador (F12).

www.xelu.net

DREAMWEAVER CS

EXERCICI 12 En aquest exercici, canviarem l’aparença de les pàgines amb les fitxes dels autors. Per ferho, inserirem una taula i hi afegirem la fotografia de l’autor. La pàgina ha de quedar, més o menys, com segueix:

Per fer-ho: 1. Discuteix amb els teus companys de classe quina taula necessiteu per poder fer l’exercici. Pots dibuixar el resultat aquí a sota:

www.xelu.net

DREAMWEAVER CS

2. Discuteix amb els teus companys de classe quants estils nous heu de crear per poder gestionar aquesta taula. Apunta el resultat consensuat aquí a sota.

3. Finalment, aplica la solució que heu acordat. Primer crea tots els estils i després crea la taula i la omples. Els estils que no hagin quedat correctament definits els pots modificar. 4. Fes el mateix per a la resta d’autors.

NOTA: De fet veuràs que hem començat la casa per la teulada, en el sentit que és complicat retocar una pàgina que ja té uns estils per transformar-la en una altra maquetada amb taules i amb uns estils diferents.

www.xelu.net

DREAMWEAVER CS

EXERCICI 13 Com que hem començat la casa per la teulada, anem a reencaminar la nostra biblioteca i a fer les coses bé.

Els passos correctes per dissenyar el nostre apartat d’autors seria: 1. Pensar quina taula necessitem per maquetar i crear-la en un HTML blanc. 2. Omplir la taula amb els textos i imatges que necessitem. 3. Vincular la full d’estils (botó de les cadenes). 4. Pensar i crear tots els estils que necessitem. Com que no hem fet pas gaire feina fins ara, el que podem fer (i segur que ens simplificarà la vida) és eliminar els estils que hem creat fins ara i començar de 0. 5. Aplicar els estils a les diferents parts de la nostra pàgina. 6. Guardar el resultat. 7. Per fer un altre autor, podem fer servir el primer que creem de model. Per fer-ho, fem un Guardar como i li canviem el nom. Això és com si tinguéssim una plantilla pels autors. Ara només ens quedarà esborrar les parts que no volem i posar les noves. Per tant, gairebé podem començar borrant les pàgines dels autors que tenim fetes i començant de nou.

Aprofitant que ho remenem tot, anem a completar una mica més la fitxa de cada autor. Hi afegirem la bibliografia i uns vídeos relacionats amb ell trets del YouTube. La idea general de com ha de quedar és la següent:

www.xelu.net

DREAMWEAVER CS

www.xelu.net

DREAMWEAVER CS

La taula que necessitem per dur a terme l’exercici seria la següent (8 files i 5 columnes):

Nosaltres la transformarem en una cosa semblant a aquesta, mitjançant estils i l’eina de la barra de propietats que ens permet ajuntar cel·les.

NOM DE L’AUTOR

BIOGRAFIA

BIBLIOGRAFIA

FOTO

VÍDEOS

MENÚ

www.xelu.net

DREAMWEAVER CS

Per tant, hauríem de crear els següents estils: •

.titol2: a la pestanya TIPO triar Arial, tamany 24, negreta i el color que vulguis

•

.foto_contorn: a la pestanya BORDE triar estil sòlid, d’1 píxel d’amplada i el color que vulgueu (igual per a tots).

•

.cos_text_700: a la pestanya TIPO triar Arial, tamany 12 i color negre. A la pestanya BLOQUE, l’alineació del text ha de ser justificada. A la pestanya CAJA triar amplada 660 i en el relleno posar 20 a les quatre caselles. A la pestanya BORDE triar color vermell pels 4 i gruixudaria 1 per el de dalt, el de sota i el de la dreta. El de l’esquerra l’heu de fer de 6 píxels. Tots els bordes han de ser sòlids.

•

.cos_text_350: per la biografia i els vídeos. El mateix que el cos_text_700 però a CAJA triar 310 i en el relleno posar 20 a les quatre caselles.

•

.menu: a la pestanya TIPO triar Arial, tamany 14, negreta i el color que vulguis.

Fixeu-vos que els noms dels estils que hem definit són més genèrics que quan ho fèiem anteriorment. La raó és que així podem reutilitzar-los per altres pàgines.

Finalment, tots aquests estils ja no els aplicarem directament sobre el text, sinó que ho farem sobre la casella que ocupa el text. Una casella d’una taula en HTML és la marca <td>.

www.xelu.net

DREAMWEAVER CS

Les instruccions que venen a continuació són per poder incrustar vídeos de YouTube a la teva pàgina web: 1. Ves fins a la pàgina de YouTube (www.youtube.es). 2. Amb l’ajuda del buscador, troba un vídeo relacionat amb l’autor que t’agradi. 3. Còpia (CTRL+C) el codi per poder incrustar el vídeo.

4. Amb el codi copiat, ves al Dreamweaver i situa’t en el lloc de la pàgina on vols que aparegui el vídeo. 5. Parteix la pantalla per poder veure el codi HTML i enganxa el que has copiat a la zona superior de la pàgina (en la part que es veu el codi). El resultat hauria de ser una cosa similar a la de la imatge de sota. Aquí podem veure una casella d’una taula amb un títol i dos vídeos de YouTube un a cada paràgraf.

www.xelu.net

DREAMWEAVER CS

EXERCICI 14 Anem a re maquetar l’índex dels autors perquè no ens quedi una pàgina tan vertical. Per ferho també utilitzarem taules i estils. La pàgina hauria de quedar més o menys com es pot veure en la imatge inferior:

La taula necessària per fer l’exercici és la següent:

www.xelu.net

DREAMWEAVER CS

TÍTOL DE LA SECCIÓ

EXPLICACIÓ 1

FOTO 1

FOTO 2

EXPLICACIÓ 2

EXPLICACIÓ 3

FOTO 3

FOTO 4

EXPLICACIÓ 4

Els estils que necessitarem seran: •

.titol1: a la pestanya TIPO triar lletra Arial, tamany 24, negreta i el color que vulguis. A la pestanya BLOQUE triar alineació del text centrada. A la pestanya BORDE fer només el borde de sota puntejat, de gruixudària 2 píxels i del color que vulgueu.

•

.subtitol: a la pestanya TIPO triar lletra Arial, tamany 16, negreta, cursiva i color gris. A la pestanya BLOQUE, triar alineació del text centrada. A la pestanya CAJA, escollir amplada de 250 píxels i un relleno de 20 píxels per cada una de les 4 caselles.

Discutim: on haurem d’aplicar els estils, al text o a la casella?

www.xelu.net

DREAMWEAVER CS

EXERCICI 15 En aquest exercici, prepararem un HTML molt senzill que de moment servirà d’índex a la nostra pàgina web. Hauria de quedar una cosa d’aquest estil:

Per fer-ho, seguim els següents passos: 1. Creem un HTML en blanc i el guardem a l’arrel de la nostra web amb el nom index.html 2. Creem l’estil .peu_pagina per les lletres grises de sota. A la pestanya TIPO triem lletra Arial, tamany 10 i color gris. A la pestanya BLOQUE triem alineació del text centrada. 3. Escrivim els textos i hi apliquem els estils. 4. Fem un enllaç cap a la pàgina AUTORS. De moment els llibres els deixem sense enllaçar. 5. Guardem el resultat. 6. Engeguem el FileZilla, ens connectem al servidor, esborrem el que hi tenim i hi pengem la pàgina actualitzada. Ara, com que ja tenim una pàgina d’índex, la nostra pàgina ja serà visible directament introduint la nostra adreça en un navegador.

www.xelu.net

DREAMWEAVER CS

EXERCICI 16 En aquest exercici deixarem preparada la pàgina que ens farà d’índex de la secció de llibres. Segueix els següents passos:

1. Busca fotografies de la portada dels següents llibres: a. Los pilares de la tierra (Ken Follett). b. Un mundo sin fin (Ken Follet). c. El tercer gemelo (ken Follett). d. Apocalipsis (Stephen King) e. El resplandor (Stephen King) f.

Carrie (Stephen King)

g. Gràcies per la propina (Ferran Torrent) h. Un negre amb un saxo (Ferran Torrent) i.

No emprenyeu al comissari (Ferran Torrent).

La plaça del diamant (Mercè Rodoreda)

k. Mirall trencat (Mercè Rodoreda) l.

Aloma (Mercè Rodoreda).

2. Guarda totes aquestes fotos amb un nom sense espais, ni accents ni caràcters estranys en una nova carpeta dins de la de imatges amb el nom LLIBRES. 3. Obre les fotos amb Photoshop i retalla-les totes a 125x180px. Fes servir l’opció Guardar para web per poder optimitzar-les en quan al seu pes. 4. Obre un HTML blanc i guarda’l amb el nom index_llibres.html 5. Vincula la fulla d’estils amb el botó de les cadenes.

www.xelu.net

DREAMWEAVER CS

6. Crea una taula de 14 files i 1 columna. 7. Posa els noms dels autors i el títol de la secció. Aplica-hi els estils corresponents. 8. Arrossega les fotos de manera que els llibres de cada autor quedin de costat. Defineix una separació horitzontal de 10 píxels pel llibre del mig. Aplica l’estil corresponent a cada foto perquè hi aparegui un contorn. 9. Guarda el resultat. Hauria de quedar més o menys així:

www.xelu.net

DREAMWEAVER CS

EXERCICI 17 Anem a preparar cada una de les pàgines amb els llibres per cada un dels autors. El model seria el que teniu a continuació:

www.xelu.net

DREAMWEAVER CS

Per poder resoldre l’exercici, seguiu els següents passos:

1. Obriu un document HTML blanc i guardeu-lo amb el nom llibres_ken_follett.html 2. Enllaceu la fulla d’estils mitjançant el botó de les cadenes. 3. Creeu la següent taula:

LLIBRES

KEN FOLLETT

LLIBRE 1

FOTO

LLIBRE 2

FOTO

LLIBRE 3

FOTO

www.xelu.net

DREAMWEAVER CS

4. En aquest exercici no necessitarem crear mĂŠs estils per maquetar la taula ja que amb els creats en exercicis anteriors en tenim prou. 5. Anem a Internet (per exemple a la Wikipedia) i busquem les descripcions dels llibres. 6. Omplim la taula amb les descripcions dels llibres i les fotos. 7. Apliquem els estils per posar-ho tot a lloc. 8. Guardem el resultat i fem el mateix per a la resta dâ&#x20AC;&#x2122;autors.

www.xelu.net

DREAMWEAVER CS

EXERCICI 18 Anem a crear els enllaços entre l’índex dels llibres i els llibres de cada autor de la següent manera:

El cas és que no només enllaçarem amb la pàgina dels llibres de l’autor corresponent si no que a més a més ens situarem a l’altura de la pàgina del llibre concret. Per fer-ho, seguim els següent passos:

www.xelu.net

DREAMWEAVER CS

1. En la pàgina dels llibres de cada autor, posarem una ANCORA a davant del títol de cada llibre. Això ens permetrà fer el salt dins de la mateixa pàgina. A cada àncora li posarem un nom sense espais, sense accents i sense caràcters estranys. 2. A la pàgina amb l’índex dels llibres, farem un enllaç de cada llibre amb la pàgina dels llibres de l’autor. Després retocarem l’enllaç afegint a darrera #nom_ancora_desti on el nom de l’ancora de destí és el que li hem posat al crear-la. 3. Guardem i provem el resultat en el navegador.