D72. Mòdul 2. Pràctica 4. Nom del curs

Mòdul 2

Disseny i creació de pàgines web

Pràctica

Exercicis

	Elaboració d’un portal d’entrada Com podeu veure, el fet d’accedir a les vostres pàgines és una mica envitricollat, ja que us heu de recordar de tot l’itinerari o camí on està la pàgina que desitgeu mostrar al navegador. Si ja resulta molest el fet de recordar-se d’un nivell de directori, imagineu-vos si n'hi ha més! Per evitar això, podeu establir una pàgina HTML on tingueu els documents referenciats per hiperenllaços, de tal manera que, clicant-hi a sobre, us enviï directament. Aquest tipus de pàgines reben el nom de portals, ja que són 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 /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ó

	Desenvolupament de la pràctica

	Elaboració d'un portal d'entrada: Visualització de la pràctica feta Primerament, creeu un document HTML amb el Dreamweaver. En el lloc corresponent, escriviu el títol que desitgeu, per exemple: CURS D72 - 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. Portal d'entrada curs D72 - Disseny de 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, l'especialitat 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: 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. 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 mod01prac02.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. S’obre una pantalla de selecció de fitxers. Us aneu movent pel vostre disc dur fins a trobar el fitxer desitjat: C:\cursd72\mod2\ mod01prac02.htm. Un cop feta l'operació, ja tindreu fet l’enllaç. Cal observar el que s’ha escrit dins l'opció Vínculo. El que hi ha dins la caixa de text, ho podeu interpretar com segueix: “Des d'on ets, obre un directori que es diu mod2, que tens al teu abast, i a dins, obre un fitxer que es diu mod01prac02.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. Ara, només cal que envieu aquest treball al servidor remot. El nom del fitxer ha de ser index.htm. No cal dir que aquesta operació esborrarà el fitxer index.htm que hi havia anteriorment, posat pels gestors de l'Àrea TIC. Per fer això, només s'ha d'agafar el fitxer i arrossegar-lo al seu destí dins el directori html, al mateix nivell de les carpetes del mòdul, tal com ja heu vist anteriorment. Visualitzeu, ara, novament el resultat.