Enrera
Mòdul 5
Disseny i creació de pàgines web
  Pràctica
1
2
3
4
5
   
Exercicis
Exercicis
 
 

Elaboració d'una pàgina a partir de capes

Capes

Les capes són requadres que es poden situar a qualsevol lloc de la pàgina, i tenen un tractament semblant al quadres de text que faríeu amb un processador de text. Dins una capa, es pot inserir qualsevol objecte, text, imatges, formularis, objectes Flash, connectors (plug-in), fins i tot, es pot inserir una pàgina independent.

Aquesta flexibilitat per apilar-les, moure-les per la pantalla mitjançant una línia de temps... dóna un gran control sobre el disseny que es porta a terme.

En aquest mòdul, aprendreu a utilitzar-les com un element alternatiu a les taules i també per ajudar-vos a garantir l'accessibilitat a les vostres pàgines.

   
Desenvolupament de la pràctica
   
Pràctica

Creeu una pàgina HTML nova en blanc i, des del menú Insertar, inseriu una capa:

Inserir una capaCapa inserida

Les propietats inicials d'aquesta capa nova, es fixen des del menú Edición | Preferencias. També es pot accedir a aquest panell amb les tecles Control + U.

Propietats inicials d'una capa

La capa creada tindrà, inicialment, les mides 200 x 115 píxels, sense cap color de fons ni cap imatge, i, per defecte, serà visible.

Aquestes propietats les podreu modificar quan convingui a mesura que aneu treballant.

Per modificar aquestes propietats, cal, primer, seleccionar la capa, però, quan en teniu unes quantes, és millor fer-ho des del panell que podeu obrir des del menú Ventana, o bé directament prement F2.

Evitar solapamiento

Marcant la casella Evitar solapamiento, fareu que pugueu moure-les totes per la pantalla, però sense sobreposar-se les unes a les altres.

Si feu clic sobre l'ull de sobre, afegiu a la capa el comportament d'estar amagada o visible. A partir d'aquí, podeu afegir comportaments més avançats.

Format d'una capa

Desplegueu la finestra de Propiedades per identificar cadascun dels atributs de la capa. És convenient posar un nom a cada capa per identificar-la. També, podeu canviar-li aquest nom des del panell de capes anterior fent-hi doble clic.

Propietats de la capa (nom)

Si desplaceu la capa per la pantalla, observeu que es modifiquen automàticament les coordenades. Mireu de visualitzar el regle des del menú Ver | Reglas, i comproveu la coincidència de les coordenades que us apareixen a la finestra Propiedades. Proveu, també, de modificar directament els paràmetres de posicionament Iz i Sup.

Propietats de la capa (coordenades)

Podeu modificar amb el ratolí les mesures de la capa, o bé escriure-les directament als espais An i Al. També és important saber l'ordre de col·locació que teniu fixat a Índice Z i que podeu, també, modificar com convingui.

Propietats de la capa (amplada i alçada)

Abans d'inserir text o qualsevol objecte dins la capa, podeu posar-hi un color de fons o una imatge. Fent clic sobre el requadre de Col. Fondo, de la finestra Propiedades, se us obre una finestra de colors; però fixeu-vos que el cursor ha canviat a un comptagotes, amb el qual us és possible escollir un color que hàgiu posat prèviament a la vostra pàgina. Podeu, doncs, escollir qualsevol color que tingueu en una fotografia ja inserida.

Si en lloc d'un color de fons preferiu una imatge per posar-hi text a sobre, la carpeta groga us ajuda a localitzar-la.

Propietats de la capa (color de fons)

 

   
Atenció !

Les capes es poden modificar amb molta flexibilitat i es poden col·locar al lloc de la pàgina que més convingui. Poden contenir qualsevol tipus d'objecte, text, imatges, etc.

A la pràctica següent, començareu a inserir objectes a dins de capes i a elaborar una interfície web.

   
   
 
Amunt