DreamweaverCS
45
Creació de pàgines web amb Dreamweaver CS
-
Upload
pep-tecnologies -
Category
Documents
-
view
213 -
download
0
description
pag web amb dreamweaver cs
Transcript of DreamweaverCS
Creació de pàgines web
amb
Dreamweaver CS
DREAMWEAVER CS
www.xelu.net
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:
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.
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.
DREAMWEAVER CS
www.xelu.net
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.
DREAMWEAVER CS
www.xelu.net
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.
DREAMWEAVER CS
www.xelu.net
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.
DREAMWEAVER CS
www.xelu.net
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: [email protected]
e. Password: *******
DREAMWEAVER CS
www.xelu.net
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.
DREAMWEAVER CS
www.xelu.net
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.
DREAMWEAVER CS
www.xelu.net
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.
DREAMWEAVER CS
www.xelu.net
DREAMWEAVER CS
www.xelu.net
DREAMWEAVER CS
www.xelu.net
DREAMWEAVER CS
www.xelu.net
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:
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.
DREAMWEAVER CS
www.xelu.net
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 fer-
ho, 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.
DREAMWEAVER CS
www.xelu.net
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.
DREAMWEAVER CS
www.xelu.net
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."
DREAMWEAVER CS
www.xelu.net
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 .
DREAMWEAVER CS
www.xelu.net
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
DREAMWEAVER CS
www.xelu.net
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.
DREAMWEAVER CS
www.xelu.net
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.
DREAMWEAVER CS
www.xelu.net
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
DREAMWEAVER CS
www.xelu.net
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.
DREAMWEAVER CS
www.xelu.net
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”.
DREAMWEAVER CS
www.xelu.net
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).
DREAMWEAVER CS
www.xelu.net
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):
DREAMWEAVER CS
www.xelu.net
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!
DREAMWEAVER CS
www.xelu.net
DREAMWEAVER CS
www.xelu.net
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).
DREAMWEAVER CS
www.xelu.net
EXERCICI 12
En aquest exercici, canviarem l’aparença de les pàgines amb les fitxes dels autors. Per fer-
ho, 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:
DREAMWEAVER CS
www.xelu.net
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.
DREAMWEAVER CS
www.xelu.net
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:
DREAMWEAVER CS
www.xelu.net
DREAMWEAVER CS
www.xelu.net
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 FOTO
BIBLIOGRAFIA VÍDEOS
MENÚ
DREAMWEAVER CS
www.xelu.net
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>.
DREAMWEAVER CS
www.xelu.net
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.
DREAMWEAVER CS
www.xelu.net
EXERCICI 14
Anem a re maquetar l’índex dels autors perquè no ens quedi una pàgina tan vertical. Per fer-
ho 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:
DREAMWEAVER CS
www.xelu.net
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?
DREAMWEAVER CS
www.xelu.net
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.
DREAMWEAVER CS
www.xelu.net
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).
j. 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.
DREAMWEAVER CS
www.xelu.net
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í:
DREAMWEAVER CS
www.xelu.net
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ó:
DREAMWEAVER CS
www.xelu.net
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
DREAMWEAVER CS
www.xelu.net
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’autors.
DREAMWEAVER CS
www.xelu.net
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:
DREAMWEAVER CS
www.xelu.net
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.
