PROJECTE

En finalitzar els treballs, heu de fer un projecte final, que consisteix en l'elaboració de la vostra web, on integrareu i posareu en pràctica els diferents aspectes (elements, recursos, tècniques, destreses, eines...) tractats al llarg del curs. El projecte constitueix l'element avaluador definitiu. Ara és el moment de tirar endavant. Ànim! PROPOSTA DE PROJECTE Abans de començar el projecte, heu de trametre un missatge al vostre tutor/a fent-li una proposta de la vostra web amb els apartats següents: Temàtica que penseu tractar (web de centre, web personal...) Descripció del contingut Planificació i esquema de la web (enllaços entre les pàgines) Relació i comentari breu de les pàgines previstes Previsió dels recursos que utilitzareu (fotografies, dibuixos, sons, formularis...) Característiques La web del projecte ha de contenir els aspectes següents: La temàtica és lliure. Podeu desenvolupar una web personal o de centre. En tots dos casos, el tema ha de tenir interès educatiu. Si preferiu fer la web de centre, treballeu un aspecte concret: els treballs de la vostra classe, les festes populars a l'escola..., de tal manera que, en acabar, pugueu integrar el vostre treball a la web del centre. La portada ha de tenir, com a mínim, el títol de la web, una imatge. El contingut ha d'estar estructurat en cinc (o més) pàgines web. Ha d'haver-hi imatges, taules, enllaços entre elles i amb altres pàgines d'Internet. Tal com s'ha treballat al llarg de les pràctiques, l'aspecte, la presentació i el disseny de les vostres pàgines ha de ser homogeni i coherent. Eviteu que les vostres pàgines es converteixin en un mostrari de lletres i de colors. Assegureu-vos de la correcció ortogràfica. Comproveu el funcionament dels enllaços.

Ancoratge

A vegades, l'autor/a d'una pàgina web organitza els continguts en seccions activables des d'una mateixa pàgina. Les àncores  són ideals per localitzar ràpidament diferents zones concretes de la pàgina.

• Obriu la pàgina 
• Col·loqueu-vos amb el cursor davant del primer apartat del vostre redactat.
• Activeu l'àncora i, a la finestra amb l'opció Nombre de anclaje, un mot de referència, per exemple Editorial  Accepteu.
• Cliqueu amb el cursor a la part del text  que voleu fer servir com a enllaç l'índex on posa Editorial. Desplaceu-vos per la pàgina fins a trobar l'àncora.
• Observeu que teniu oberta la finestra de Propiedades de la imatge. A l'opció Vínculo, hi ha un cercle i la carpeta groga . Cliqueu sobre el cercle i arrossegeu la fletxa fins a l'àncora. Us surt el text de l'ancoratge escrit al camp de text Vínculo.

• Accepteu, guardeu la pàgina i comproveu el que heu fet.

Imatges amb enllaç

 L'objectiu d'aquesta pràctica és aprendre a utilitzar les imatges per enllaçar parts diferents d'una pàgina web.

Les imatges, no només fan més amable i enriqueixen el contingut d'una pàgina web, també poden tenir altres funcions, per exemple, informar, il·lustrar i ampliar temes i continguts donant accés a altres pàgines.

Part d'una imatge fa de mapa sensible per activar pàgines diferents:

Obriu la pàgina m3_7.htm. Poseu-vos amb el cursor sobre el nom de l'autor del llibre. Activeu, amb el cursor, l'eina d'activació quadrangular del mapa situada a la part inferior esquerra de la finestra Propiedades. Seleccioneu, amb aquesta eina, només la part de la imatge on hi hagi el nom de l'autor/a del vostre llibre. Veureu que queda un rectangle actiu de color blavós i que, a l'apartat Vínculo, surt un vincle activat. Busqueu l'arxiu  m3_8a.htm a partir de la carpeta groga i accepteu. Escriviu Recomano a l'opció Alt. Guardeu . Premeu F12 i comproveu què heu fet.

Redactem sense faltes

Creeu la pàgina web m3_8a.htm.

I en aquesta pàgina recomeneu el llibre que heu llegit poseu:

Al principi de la pàgina heu de posar un índex del que hi haurà  a tota la pàgina:

editorial,
l'any d'edició,
número de pàgines,
tipus d'enquadernació,
tipus de novel.la,
l'argument,els personatges,
on passa,
altres llibres d'aquest autor i la vostra opinió etc....


Després redacteu cada punt de l'índex .



Heu de fer com a mínim 50 línees entre tots els punts.

Gràfics dins la pàgina web

 Inserir imatges envoltades de text dins la pàgina web

• Creeu el document m3_7.htm i poseu-hi el títol "El meu llibre" a partir del menú Modificar | Propiedades de la página. 
• Seleccioneu un color de fons mat (que no faci mal als ulls) i accepteu. 
• Cliqueu al botó o a Insertar | Imagen de l'opció Común. Seleccioneu la imatge m3a.jpg de la carpeta imatges. Accepteu. 
• Modifiqueu les mides de la imatge a partir de la finestra Propiedades: escriviu la mida que desitgeu, o amplieu o reduïu la imatge estirant amb el cursor un vèrtex de la imatge que heu inserit. Si voleu estirar la imatge i mantenir les proporcions, premeu la tecla de majúscules alhora que arrossegueu. 
• Escriviu, a l'opció Alt, el text que voleu que es llegeixi quan es posi el cursor sobre la imatge (com a text alternatiu). 
• Si voleu, podeu deixar la imatge sense marc, escriviu el valor 0 a Borde, o, si la voleu amb marc, seleccioneu Borde 1 per posar un marc a la imatge. 
• Centreu la imatge utilitzant el botó d'alinear de la finestra Propiedades.

Escriviu el nom de la imatge (sense l'extensió) a la part inferior esquerra, a sota de la imatge reduïda on surt el pes que fa.

• Guardeu el document. Ja teniu una imatge a la pàgina, però és difícil situar text al voltant. 
• Escriviu a la página web, utilitzant el teclat directament, un text de tres línies sobre el llibre que heu escollit al començament d'aquest mòdul. Podeu recomanar-lo, o bé explicar per què el feu servir. 
• Torneu a col·locar el cursor sobre la imatge i premeu l'opció Alinear | Izquierda: veureu que el text envolta la imatge. Proveu les altres opcions d'arrenglerar per veure quina us convé. 
• Guardeu el document. 
• Premeu F12 per veure com queda la pàgina. 
• Veureu com el text queda massa enganxat a la imatge. Seria molt convenient deixar un espai de distància al costat i per sobre entre el text i la imatge, ja que visualment l'efecte serà millor.

• Poseu les dades al quadre Espacio H 12, i 8 al quadre Espacio V de la finestra Propiedades. Si no voleu fer servir aquests valors, proveu-ho amb altres números parells i vegeu com queda.
• Guardeu la pàgina m3_7.htm a la vostra carpeta mod3.
• Premeu F12 per veure com us ha quedat la pàgina.
• Fes un hipervincle a aquesta pàgina en el portal d'entrada que ja vas fer anteriorment, a la tercera fila segona columna, poseu el text Exercici 05. 

Ubicació d'imatges dins una pàgina web

Gràfics com a fons de pàgina

Un gràfic de fons de pàgina és un gràfic que es repeteix tantes vegades com sigui la mida de la pantalla i de les dimensions del gràfic utilitzat, i que es pot definir a partir de les propietats de pàgina.

Com més difuminat i discret sigui el gràfic, més agradable visualment serà el resultat i la visualització de la pàgina; com més concret i més ric de color, la visualització serà més feixuga per part de l'usuari/ària.

Desenvolupament de la primera part de la pràctica
Seleccionar una imatge o un color com a fons de pàgina

• Creeu un document nou i guardeu-lo com a m3_5a.htm a la carpeta mod3 que heu de creat al vostre directori.
• Obriu el menú Modificar | Propiedades de la página.
• Seleccioneu Título | Codificación i escriviu el títol EXERCICI3_ubicació de gràfics. Seleccioneu Aspecto | Color de fondo: aquí seleccioneu el color que vulgueu, accepteu i vegeu el resultat clicant a F12. I guardeu .
• Fes un hipervincle a aquesta pàgina en el portal d'entrada que ja vas fer anteriorment,  a la tercera fila segona columna, poseu el text Exercici 03 

• Creeu un document nou i guardeu-lo com a m3_6a.htm a la carpeta mod3 que heu de creat al vostre directori.
• Cliqueu a Control + J o feu clic al botó Examinar de l'opció Imagen de fondo. Dins la carpeta mod3 imatges en teniu una que voleu usar anomenada  m3_4.jpg . Seleccioneu la imatge  m3_4.jpg.
• Obriu el menú Modificar | Propiedades de la página.
• Seleccioneu Título | Codificación i escriviu el títol EXERCICI4_ubicació de gràfics. 
• Fes un hipervincle a aquesta pàgina en el portal d'entrada que ja vas fer anteriorment,  a la tercera fila segona columna, poseu el text Exercici 04.

Imatges: una imatge val més que mil paraules.

Obtenció d'imatges

L'objectiu d'aquesta pràctica és aconseguir una llista de llocs on aconseguir imatges gratuïtes de manera legal.

Tal com heu llegit al punt anterior, la manera més senzilla d'evitar problemes posteriors és tenir una galeria pròpia i personal d'imatges.

Compte, també, a l'hora de fer imatges amb programes no registrats. Aquests programes deixen marca a la imatge (no visible, a ulls inexperts), i es pot resseguir un cop està penjada a Internet. Per tant, també podrien donar problemes en el cas d'utilitzar imatges elaborades des d'un programa aconseguit de forma dubtosa.

El Departament d'Educació ha facilitat als centres educatius el Dreamweaver MX 2004 i el Fireworks MX 2004. No obstant això, hi ha programari lliure de retoc gràfic, com és ara el GIMP, i llocs a Internet que ofereixen imatges gratuïtes. Igualment, també hi ha programes de retoc gràfic en suport CD-ROM plens d'imatges. Qualsevol d'aquestes imatges es pot utilitzar sense cap por i de forma gratuïta. 

Pràctica
Busqueu servidors a Internet on es puguin aconseguir imatges de forma gratuïta i feu una llista de cinc, com a mínim. Anoteu-vos l'adreça als vostres apunts.

Crea una carpeta i anomena-la mod3 i dins d'ella una que es digui imatges i guarda una imatge que t'agradi per fer un fondo amb el nom  m3_4.jpg i una altre d'un llibre que hagis llegit i l'anomenes m3a.jpg.

Pràctica 2

Pràctica 2 "Elaboració d’un portal d’entrada"

Avui fareu un portal d'entrada.

Que és?????

És el lloc d’entrada d’una web formada per múltiples pàgines.

Per aconseguir aquest objectiu, creeu una pàgina nova amb del Dreamweaver i la situeu en el servidor, al directori D:/cognomnom/index.html.
La idea és que cada una de les pàgines que aneu fent per a les pràctiques del curs estigui referenciada en aquest document, de tal forma que, fent clic sobre el nom, pugueu carregar-la al navegador.
A la pàgina hi haurà dos espais diferenciats:
Primer espai:

• En primer lloc, posareu un encapçalament on tindreu:
  • Un títol genèric
  • Un identificador (per exemple, el vostre nom)
  • Qualsevol comentari que hi voleu afegir
• Una línia de separació (en el programa Regla horizontal)

Segon espai:

• Sota la línia, posareu una taula
• A les caselles de la taula, posareu el text identificador de cada un dels treballs fets
• En aquests textos, posareu un enllaç al document en qüestió

Resultat de la pràctica aproximat sempre amb el vostre TOC PERSONAL

Per realitzar aquesta pràctica haureu de seguir les següents indicacions:

Primerament, creeu un document HTML amb el Dreamweaver.

En el lloc corresponent, escriviu el títol que desitgeu, per exemple: CURS - Disseny de pàgines web. Ja sabeu que aquest títol identifica la pàgina, però no hi sortirà imprès. És el que llegiu a la barra superior del navegador.

Situeu-vos a l'àrea de treball, per exemple, a la segona línia, i escriviu el text que farà de títol que haurà de sortir al document HTML.

Curs-Disseny pàgines web

 Apliqueu les característiques següents:

 
  Feu doble clic sobre la icona Sangría de texto (desplaça uns espais a la dreta el text). Podeu comprovar que, situats al començament d’una línia de text i picant repetidament la barra espaiadora, el text no es desplaça a la dreta. Una de les formes de fer això és amb l’opció que acabeu de fer: Sangría de texto.

En les línies següents, poseu el vostre nom,cognom, data de naixement i qualsevol informació que vulgueu afegir-hi.

 Deixeu dues linies en blanc i, seguidament, poseu una línia de separació. Recordeu, al
menú de la barra d’icones superior, l'opció HTML.

 Per tenir control del posicionament de la informació, un dels mètodes és aplicar taules. Les taules no són més que unes graelles semblants a les que es fan servir en els programes de tractament de textos.

 A la part inferior, inseriu una taula de dues columnes i vuit files, una per a cada un dels mòduls.

Per fer això, situeu-vos sota la línia, aneu a la barra d’icones superior i cliqueu sobre la icona Tabla. Escriviu les dades següents al formulari Tabla.

 Per centrar la taula, un cop estigui seleccionada, cal veure els punts negres de control en la taula i les cotes de dimensions. En crear-se, queda, per defecte, seleccionada; en el cas que no sigui així, només cal clicar sobre qualsevol línia de la taula, anar a l'opció de la barra de menús Texto, agafar l'opció Alinear i seleccionar Centro. 

 Feu que la columna de l’esquerra tingui una amplada de 130 píxels.

Això es pot fer de dues formes diferents:

1. Situeu-vos a la línia interior de la columna fins que el cursor canviï de forma i, llavors, desplaceu-lo a l’esquerra, fins que l’indicador superior indiqui que esteu a 130 píxels.
2.  Seleccioneu la primera columna (clicant sobre la fletxa que hi ha sobre la columna) i, a la finestra Propiedades, senyaleu l’amplada de 130 (An 130).

 Seguidament, a cada una de les caselles de la primera columna, poseu-hi el nom del mòdul i, a la part dreta, els exercicis corresponents, tal com veieu a la imatge següent.

 

 Doneu format a les dades introduïdes a la primera columna, és a dir, seleccioneu tota la columna i doneu les propietats següents, tal com mostra la imatge. 

 

Observant el gràfic següent, dins la taula, al mòdul dos (segona fila), anem a fer un hiperenllaç al document que s’ha fet a la pràctica 1, el qual, com recordeu, porta el nom mod01prac01.htm.

Per tant, a la segona fila segona columna, poseu el text que desitgeu que es mostri, per exemple, Exercici 01.

 

 Per fer l’hipervincle, en primer lloc, seleccioneu el text que representarà el lloc d’entrada a la pàgina nova, el text Exercici 01.

Dins la finestra Propiedades, cerqueu l'opció Vínculo. A la dreta d’aquesta paraula, hi ha una caixa per posar text, i a la dreta, una carpeta: feu-hi clic a sobre.

 jhksjdk

 S’obre una pantalla de selecció de fitxers. Us aneu movent pel vostre disc dur fins a trobar el fitxer desitjat: D:\cognomnom\mod1\ mod01prac01.htm.

Ara, només us queda guardar el treball elaborat. Compte! L’heu de guardar al directori principal del vostre treball, al mateix nivell on s’ha guardat totes les carpetes dels mòduls, des del menú Archivo / Guardar como...

Podeu fer una prova amb l’opció vista prèvia de la barra d'eines, o el que és el mateix, F12.