Disseny i Creació de Pàgines WEB

15
Departament de Tecnologia I.E.S. Can Mas de Ripollet. Disseny i Creació de Pàgines WEB. Dreamweaver. Pràctica 0. Preparació. 1. A la carpeta TREBALL del teu llapis de memòria crea una carpeta amb el teu nom i curs: Per exemple : Alex_4C. 2. Dins d´aquesta carpeta copia el contingut de la carpeta imatgesweaber que trobaràs a la carpeta TREBALL del teu ordinador. Creació de pagines Web amb el Dreamweaber. Optativa d ´Informàtica 4rt ESO. http://blocs.xtec.cat/tecnocanmas 1

Transcript of Disseny i Creació de Pàgines WEB

Page 1: Disseny i Creació de Pàgines WEB

Departament de Tecnologia I.E.S. Can Mas de Ripollet.

Disseny i Creació de Pàgines WEB.Dreamweaver.

Pràctica 0. Preparació.

1. A la carpeta TREBALL del teu llapis de memòria crea una carpeta amb el teu nom i curs: Per exemple : Alex_4C.

2. Dins d´aquesta carpeta copia el contingut de la carpeta imatgesweaber que trobaràs a la carpeta TREBALL del teu ordinador.

Creació de pagines Web amb el Dreamweaber. Optativa d´Informàtica 4rt ESO.http://blocs.xtec.cat/tecnocanmas

1

Page 2: Disseny i Creació de Pàgines WEB

Departament de Tecnologia I.E.S. Can Mas de Ripollet.

Pràctica 1. Creació de l´entorn.

1. Obre el Dreamweaver.

A la pantalla principal apareixen dos finestres que corresponen als Objectes que es poden insertar i a les Propietats del text que introduirem més endavant.

2. Fes click a Insertar i selecciona Tabla. Modifica els paràmetres que hi figuren ( Files 2, Columnas 1, Ancho 100 ,Borde 0 ) Fes click a Aceptar.

Creació de pagines Web amb el Dreamweaber. Optativa d´Informàtica 4rt ESO.http://blocs.xtec.cat/tecnocanmas

2

Objectes Propietats

Page 3: Disseny i Creació de Pàgines WEB

Departament de Tecnologia I.E.S. Can Mas de Ripollet.

Veuràs que apareix una taula amb dues files que ocupa gairebé tota la pantalla. ( Les finestres de propietats i objectes es poden moure i les pots col·locar allà on no facin nosa )

3. A continuació situat amb el cursor al final de la taula que has creat i fes click a enter. El cursor te que quedar tal i com està en la imatge anterior. Ara inserirem una altra taula seguint el mateix procediment però la nova taula tindrà els següents paràmetres : Columnas : 1, Filas : 1, Ancho : 100, Borde : 0. El resultat serà :

Creació de pagines Web amb el Dreamweaber. Optativa d´Informàtica 4rt ESO.http://blocs.xtec.cat/tecnocanmas

3

Finestra propietats de taula

Page 4: Disseny i Creació de Pàgines WEB

Departament de Tecnologia I.E.S. Can Mas de Ripollet.

A la nova finestra ( Propietats de taula ) que hi apareix, modifica el paràmetre Al i posa Al : 380. A continuació selecciona la última taula que has creat tal i con s´indica en la següent figura : per fer-ho acosta la punta del ratolí a la taula i quan aquest es quedi amb negre fes click.

4. Amb la última taula seleccionada, ves a Modificar i selecciona Tabla.

Creació de pagines Web amb el Dreamweaber. Optativa d´Informàtica 4rt ESO.http://blocs.xtec.cat/tecnocanmas

4

Page 5: Disseny i Creació de Pàgines WEB

Departament de Tecnologia I.E.S. Can Mas de Ripollet.

A continuació selecciona Dividir Celda i selecciona Dividir columnas. En el nombre de columnas selecciona 2 i fes click a aceptar.

Amb la columna que ha quedat seleccionada ( la de l´esquerra ) realitzem la mateixa operació per obtenir 6 files. El resultat final a de ser el següent :

Ajustem ara l´amplada d´aquesta columna esquerra utilitzant el ratolí. Per fer-ho acostem la punta del ratolí en el contorn dret de la columna i quan aquest es transformi amb dos ratlles verticals paral·leles amb dos fletxes al costat, modifiquem l´amplada arrossegant el ratolí. El resultat de tot això a de ser :

Creació de pagines Web amb el Dreamweaber. Optativa d´Informàtica 4rt ESO.http://blocs.xtec.cat/tecnocanmas

5

Columna esquerra amb 6 files

Page 6: Disseny i Creació de Pàgines WEB

Departament de Tecnologia I.E.S. Can Mas de Ripollet.

5. Repetim la operació amb les dues files superiors. Les dues files les hem de dividir en 4 columnes. L´aspecte que ha de presentar és el següent :

A continuació seleccionem la primera columna de la primera taula tal i com apareix a la imatge anterior. Anem a Modificar, seleccionem Tabla i Combinar Celdas. Tot plegat t´hauria de quedar així :

Creació de pagines Web amb el Dreamweaber. Optativa d´Informàtica 4rt ESO.http://blocs.xtec.cat/tecnocanmas

6

Page 7: Disseny i Creació de Pàgines WEB

Departament de Tecnologia I.E.S. Can Mas de Ripollet.

6. A continuació inserirem una imatge que serà el Logotip de l´IES. Per fer-ho hem de situar el cursor dins de la primera casella. Després selecciona Insertar, Imagen i busca el fitxer logoiescanmas que trobaràs a la carpeta imatgesweaber. Obtindràs el següent: ( potser caldrà ajustar de nou les mides de les cel·les )

7. Anem ara a donar color i a millorar l´aspecte del portal. Per donar color a una de les caselles ens hem de situar en el seu interior i anar a la finestra Propiedades,

Creació de pagines Web amb el Dreamweaber. Optativa d´Informàtica 4rt ESO.http://blocs.xtec.cat/tecnocanmas

7

LOGOTIP

Page 8: Disseny i Creació de Pàgines WEB

Departament de Tecnologia I.E.S. Can Mas de Ripollet.

fer click en el desplegable que hi ha en el cantó inferior dret, seleccionar el desplegable de Fnd i triar el color que vulguem. El resultat pot ser :

8. A continuació anem a introduir el Text. Si ens col·loquem en l´interior de qualsevol casella ja podem escriure. Per modificar el format de la lletra hem d´utilitzar la finestra Propiedades. Seleccionem el que hem escrit i li donem les propietats que vulguem ( Negreta, Cursiva, tamany, color, etc.) . Introdueix ara el text amb els continguts que apareixen en la propera imatge.

Creació de pagines Web amb el Dreamweaber. Optativa d´Informàtica 4rt ESO.http://blocs.xtec.cat/tecnocanmas

8

Page 9: Disseny i Creació de Pàgines WEB

Departament de Tecnologia I.E.S. Can Mas de Ripollet.

9. Ara anem a fer els hipervincles cap a llocs exteriors de la nostra web. Fixa´t que hem inserit 3 imatges que són els logos de la XTEC, del portal EDU365 i del portal de la Generalitat de Catalunya. En definitiva el que volem fer es que fent click a cadascun d´aquests logos accedim directament a les seves webs. Per fer aixó, selecciona la imatge XTEC i veuràs que a la finestra de Propiedades surt en petit la imatge seleccionada. Per defecte en l´espai Origen surt la ubicació del fitxer i on posa Vínculo hem d´introduir el següent : http://www.xtec.cat i seleccionar on posa Destino la opció –blank. Amb tot això ja haurem aconseguit que la imatge tingui un vincle a aquesta adreça.

Ara cal fer el mateix amb les altres dues imatges. Els vincles per cadascuna d´elles són :http://www.edu365.com i http://www.gencat.cat.En l´apartat els meus enllaços pots insertar els teus enllaços preferits.També podem insertar un vincle de correu electrònic. Per fer-ho, has de seleccionar de la barra d´objectes, l´objecte insertar vinculo de correo electronico. T ´apareixerà una finestra en la que et dirà que introduixis el nom que vols que apareixi i l´adreça del teu correu electrònic.

Creació de pagines Web amb el Dreamweaber. Optativa d´Informàtica 4rt ESO.http://blocs.xtec.cat/tecnocanmas

9

Page 10: Disseny i Creació de Pàgines WEB

Departament de Tecnologia I.E.S. Can Mas de Ripollet.

Per fer-ho més atractiu podríem separar les meves dades personals mitjançant una barra espaiadora i a continuació insertar el vincle de correu amb una imatge o gif animat. ( veure la figura anterior ). L´aspecte final pot ser el següent :

Creació de pagines Web amb el Dreamweaber. Optativa d´Informàtica 4rt ESO.http://blocs.xtec.cat/tecnocanmas

10

Vincle de correu electrònicInsertar

regala horizonta

Page 11: Disseny i Creació de Pàgines WEB

Departament de Tecnologia I.E.S. Can Mas de Ripollet.

Guarda el fitxer que has creat amb el nom indexportal dins de la teva carpeta

10. Podem veure el resultat de tot plegat tal i com quedaria penjat a la WEB. Per veure-ho selecciona Arxivo, Vista prèvia en el Navegador i selecciona el navegador que prefereixis. Pots comprovar també que els enllaços externs funcionen o canviar l´aparença si el resultat no t´agrada.

Creació de pagines Web amb el Dreamweaber. Optativa d´Informàtica 4rt ESO.http://blocs.xtec.cat/tecnocanmas

11