Cahier Dreamweaver : Atelier 9

Un puzzle à l'aide des calques
Tous les articles Dreamweaver
Création des calques

Comme souvent, notre atelier va commencer par la création des calques. Pour obtenir notre puzzle complet, il nous en faut cinq au total. Le premier contient le fond de la page, c'est-à-dire le plan de Paris :

  1. Sélectionnez l'outil Dessiner un calque dans la palette Objets.

  2. Tracez un calque à n'importe quel endroit de votre page.

  3. Sélectionnez l'outil Insérer une image et choisissez l'image qui va servir de fond à votre puzzle.

  4. Sélectionnez ce calque en entier dans la fenêtre Document.

  5. Remplacez les valeurs G et S du calque par 0px et 0px dans l'inspecteur de Propriétés.

  6. La spécification de ces coordonnées est indispensable. Pour que notre puzzle fonctionne correctement, il faut que les pièces soient placées à des endroits précis, décrits par des coordonnées. Notre fond doit donc être fixe et placé lui aussi sur des coordonnées précises.



    Figure 1 : La position du calque
Chacune des pièces du puzzle va également être créée sur un calque. La méthode est très simple :

  1. Sélectionnez l'outil Dessiner un calque dans la palette Objets.

  2. Tracez un calque en dehors de votre image de fond.

  3. Insérez à l'intérieur de votre calque l'ensemble des données (images et textes) qui constituent la pièce de votre puzzle.

  4. Dans notre cas, chaque pièce du puzzle est composée d'un simple texte.

  5. Redimensionnez le calque soit à l'aide de ses poignées de redimensionnement, soit à l'aide des attributs H et L (Hauteur et Largeur) de l'inspecteur de Propriétés.

  6. Placez ces pièces à leur emplacement final, c'est-à-dire à l'endroit même où vos visiteurs devront les placer pour gagner la partie.

  7. Cette manipulation vous fera gagner du temps pour la suite de l'atelier.



    Figure 2 : Les dimensions du calque
Répétez ces opérations pour l'ensemble des pièces du puzzle.

Attention
  Nommez vos calques

Prenez soin de bien nommer vos calques lors de leur création. Vous les retrouverez d'autant plus facilement au moment de vos retouches ou de l'ajout d'effets.



Sommaire 1 2 3 4 5 Ordre des calques