Índex

Podem imaginar-nos les capes com papers transparents on posem dibuixos diferents que es poden veure simultàniament. Les capes es poden col·locar en la posició adient dins la pàgina web.

L'ús principal de les capes és fer maquetació junt amb disseny per fer pàgines molt més agradables.

Hem de dir que les capes funciones bé a partir de la versió 4 del Netscape i de la versió 5 del Explorer.

Composició fotografia i text

Podem utilitzar les capes per posar un text a una imatge com veieu a la fotografia de la nena del Marroc:

Dels meus viatges per l'Àfrica

Per fer aquesta composició hem fet els següents passos:

1. Inserir una capa.
2. Inserir altra capa dins de la primera.
3. Inserir la imatge en la primera capa.
4. Escriure el text de la segona capa.
5. Col·locar la capa del text a la seva posició.

Les capes queden delimitades per un marc que podem desplaçar i dimensionar (fer més gran o més petita) per sobre de la pàgina. La seva posició és absoluta i també la seva mida, es a dir que no es mou ni es deforma quan canvien les mides de la finestra del navegador.

A la finestra de propietats haurem de posar el nom de la capa i si volem un color o una imatge de fons.

Totes les capes tenen un valor a la propietat L'índex Z. Si una capa té un índex z superior oculta les capes amb índex z inferior.

Quan tenim moltes capes a vegades és difícil torba-les ja que unes es superposen a les altres. Podem gestionar-les millor amb la finestreta de capes (Ventana/Otros/Capas):

Com treballar per fer un disseny

1. Es fa el dibuix de la pàgina en un programa de disseny com el Paint shop pro, el Corel Draw o el Photoshop. Es fa un dibuix amb les mides en pixels més usuals. Hem de pensar que la major part de les webs actuals estan fetes per a una resolució de 800x600 de pantalla.
   Un problema és que quan fem la visualització d'una pàgina en el navegador també hi han les barres d'eines del navegador, les barres de desplaçament i el marc de la finestra que ocupen espai de pantalla. Així el nostre disseny ha de tenir unes mides com a màxim de 780x430 per tal de compartir l'espai amb els elements del navegador.
2. Una vegada fet el disseny es fan rectangles d'imatge desant en format gif cadascun d'aquests rectangles.
3. Es maqueta en el Dreamweaver per mitjà de capes.

   Nota: Dins el disseny poden incloure's lletres imatges predissenyedes. Encara que no tingui vida, es pot preveure fer un menú amb les paraules d'aquest menú.

Exemples de disseny i de maquetació amb Dreamweaver

1. Tenim el disseny per a una revista en format web, fet amb un programa paint i preparat per veure-ho en el navegador:

   Sembla que aquí tenim no més una imatge. En realitat hem agut de dividir la gran imatge en tres imatges més petites que podem veure en la imatge del Dreamweaver:

   

   Imatge predissenyada en un Paint i reproduïda en el Navegador després de la seva transformació en plana web amb el Dreamweaver.

   

   La realitat: tres imatges inserides dins de tres capes, una a dalt de tot, altra a l'esquerra i altra a la dreta.

2. Un exemple més sofisticat és el de la plana principal de l'IES Mare de Deu de la Mercè, elaborada pels alumnes de 2 curs del cicle de desenvolupament aplicacions informàtiques. Com veieu en les imatges en el disseny intervenen molts marcs i per poder situar-los de forma adequada hem hagut de fer moltes petites parts del dibuix original.

   

   Imatge predissenyada en un Paint i reproduïda en el Navegador després de la seva transformació en plana web amb el Dreamweaver.

   

   La realitat: moltes imatges inserides dins de moltes capes distribuïdes per tota la pàgina.