D72. Mòdul 3. Pràctica 5.Disseny i creació de pàgines web

Aspecte de la finestra Modificar | Propiedades de la página

Cliqueu a Control + J o feu clic al botó Examinar de l'opció Imagen de fondo. Per exemple, suposeu que dins la carpeta m3 imatges en teniu una que voleu usar anomenada m3_4.gif. Seleccioneu la imatge m3_4.gif.

Accepteu per tancar el requadre de diàleg de propietats de pàgina.

Premeu F12 per veure el resultat.

Creeu el document m3_5b.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 m3imatges. 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.

Finestra de Propiedades amb el botó per centrar la imatge activat

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.

Separació horitzontal i vertical entre el text i la imatge

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_5b.htm.

Premeu F12 per veure com us ha quedat la pàgina.

En el cas que la imatge que heu posat no us acabi de satisfer, sempre podeu eliminar-la simplement posant el cursor sobre la imatge, clicant amb el botó dret del ratolí i escollint Cortar, i la imatge s'eliminarà de la pàgina de treball sense eliminar-se de la carpeta.

Obriu amb Dreamweaver MX 2004 la pàgina m3_5b.htm que heu creat a la pràctica anterior.

Activeu la icona Tabla

del menú Común. Poseu els valors 2 files, 1 columna, i accepteu.

A l'espai de la primera fila, pinteu el fons de color diferent al fons de la vostra pàgina, de manera que contrasti, i col·loqueu el nom del títol del llibre que recomaneu.

Vista de la finestra de Propiedades de l'eina Taula

Col·loqueu a la banda esquerra de la primera columna la imatge escanejada del vostre llibre. Centreu la imatge.

Seleccioneu el text que us queda i arrossegueu-lo cap a la segona columna. Justifiqueu el text.

Activeu la segona taula posant-vos amb el cursor als marges d'aquesta taula. Doneu color de fons blanc a tota la segona taula.

Escriviu el vostre nom i adjunteu la vostra fotografia a la part de sota de tot de la recomanació. Alineeu-la centrada.

Guardeu la pàgina com a m3_5c.htm.

Premeu F12 per veure el resultat.

Les imatges no només afegeixen informació al contingut, també s'utilitzen com a enllaç molt efectiu cap a altres pàgines. Vegeu a la pràctica 6 com fer-ho.

	Ubicació d'imatges dins una pàgina web L'objectiu d'aquesta pràctica és ubicar correctament imatges i gràfics dins una pàgina web. Les imatges o els gràfics, tal com acabeu de veure a la pràctica anterior, són arxius independents que podeu utilitzar o no a la vostra pàgina web, que es criden utilitzant un codi de localització a partir del llenguatge HTML: <img src="imatges/m3_4.gif " width="162" height = "162"> El que interessa en aquest apartat del mòdul 3 és la ubicació dels gràfics a la vostra 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
	Obriu el Dreamweaver MX 2004. Seleccioneu la barra de menú Sitio i definiu la vostra carpeta on guardeu tots els exercicis, per exemple: html (d'acord amb el nom de la carpeta que teniu al servidor). Creeu un document nou i guardeu-lo com a m3_5a.htm. Obriu el menú Modificar \| Propiedades de la página. Seleccioneu Título \| Codificación i escriviu el títol mòdul 3_ubicació de gràfics. Seleccioneu Aspecto \| Color de fondo: aquí seleccioneu el color que vulgueu, accepteu i vegeu el resultat clicant a F12.

	Aspecte de la finestra Modificar \| Propiedades de la página
	Cliqueu a Control + J o feu clic al botó Examinar de l'opció Imagen de fondo. Per exemple, suposeu que dins la carpeta m3 imatges en teniu una que voleu usar anomenada m3_4.gif. Seleccioneu la imatge m3_4.gif. Accepteu per tancar el requadre de diàleg de propietats de pàgina. Guardeu la pàgina. Premeu F12 per veure el resultat.

	Gràfics dins la pàgina web

	Tal com s'ha comentat abans, el format millor per a fotografies o imatges molt riques de color és el format JPEG, mentre que per a figures geomètriques, texts, imatges molt petites, dibuixos sense gaire colors, logos, etc., el GIF és més aconsellable. Evidentment, també podeu utilitzar el format PNG si disposeu d'espai de sobres al vostre servidor, però cal vigilar el pes de les imatges i la seva visualització als navegadors més antics.

	Desenvolupament de la segona part de la pràctica
	Inserir imatges envoltades de text dins la pàgina web
	Creeu el document m3_5b.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 m3imatges. 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.

	Finestra de Propiedades amb el botó per centrar la imatge activat
	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.

	D'origen, el programa us dóna el nom més l'extensió de la imatge
	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.

	Separació horitzontal i vertical entre el text i la imatge
	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_5b.htm. Premeu F12 per veure com us ha quedat la pàgina.

	Desenvolupament de la tercera part de la pràctica
	Moure i copiar imatges dins taules
	Habitualment, una pàgina web conté informació. El gràfic serveix per il·lustrar, enriquir, o potser pot fer funcions com donar accés a altres pàgines, etc. És, per tant, molt possible que, prèviament a la il·lustració del contingut, disposeu d'un text ampli que vulgueu compartir amb l'usuari/ària que visita la vostra pàgina. En aquest cas, partiu d'un text i afegiu-hi la imatge (per fer més comprensible el text) quan la necessiteu, simplement col·locant el cursor on voleu que surti la imatge, mitjançant la icona Imágenes: Imagen. La seleccioneu i queda inserida, o bé pot ser que no tingueu la imatge just a la carpeta d'imatges del vostre lloc, sinó dins una altra carpeta del vostre ordinador. El programa Dreamweaver coneix aquesta situació i us permet canviar imatges que inicialment estan fora del lloc on esteu treballant, però us avisa que cal guardar la còpia de la imatge que esteu utilitzant dins el vostre lloc per evitar problemes posteriors. Cal anar amb compte i acceptar els suggeriments que fa el programa i procurar guardar totes les imatges a la carpeta d'imatges del mòdul amb què esteu treballant, en aquest cas, el mòdul 3 del Sitio de la vostra web. En el cas que la imatge que heu posat no us acabi de satisfer, sempre podeu eliminar-la simplement posant el cursor sobre la imatge, clicant amb el botó dret del ratolí i escollint Cortar, i la imatge s'eliminarà de la pàgina de treball sense eliminar-se de la carpeta.
	Obriu amb Dreamweaver MX 2004 la pàgina m3_5b.htm que heu creat a la pràctica anterior. Activeu la icona Tabla del menú Común. Poseu els valors 2 files, 1 columna, i accepteu. A l'espai de la primera fila, pinteu el fons de color diferent al fons de la vostra pàgina, de manera que contrasti, i col·loqueu el nom del títol del llibre que recomaneu.

	Vista de la finestra de Propiedades de l'eina Taula
	Situeu-vos amb el cursor dins la segona fila i creeu una segona taula de dues columnes i una fila. Generació d'una taula imbricada: el cursor esta situat al cercle vermell Alineeu al centre. Col·loqueu a la banda esquerra de la primera columna la imatge escanejada del vostre llibre. Centreu la imatge. Seleccioneu el text que us queda i arrossegueu-lo cap a la segona columna. Justifiqueu el text. Activeu la segona taula posant-vos amb el cursor als marges d'aquesta taula. Doneu color de fons blanc a tota la segona taula. Escriviu el vostre nom i adjunteu la vostra fotografia a la part de sota de tot de la recomanació. Alineeu-la centrada. Guardeu la pàgina com a m3_5c.htm. Premeu F12 per veure el resultat.

	Les imatges no només afegeixen informació al contingut, també s'utilitzen com a enllaç molt efectiu cap a altres pàgines. Vegeu a la pràctica 6 com fer-ho.

	En el cas que hi hagi més d'una figura en una taula, aconseguireu donar una sensació estètica molt més equilibrada si s'ajusta la mida de les imatges i feu que totes tinguin la mateixa orientació horitzontal o vertical.