Dreamweaver MX 2004 à partir de zéro(4)
Auteur：Eve Cole
Date de mise à jour：2009-05-31 21:02:51
L'utilisation de calques <BR> Un calque est une zone d'une page Web. Il peut y avoir plusieurs calques dans une page Web. Son plus grand charme est que chaque calque peut se chevaucher et vous pouvez décider si chaque calque est visible. en même temps, possibilité de personnaliser les relations hiérarchiques entre les couches. Après avoir maîtrisé la technologie des couches, vous pouvez fournir de puissantes fonctionnalités de contrôle de page pour les pages Web.
Créer un calque
Afin d'illustrer la fonction du calque, nous créons d'abord un exemple d'effet simple, comme le montre la figure 1 (Figure 1).
Figure 1
La première étape consiste à créer une nouvelle page dans Dreamweaver MX 2004 et à exécuter la commande "Insérer → Objets de calque → Calque". À ce stade, un cadre rectangulaire noir apparaîtra dans la fenêtre d'édition, qui est le calque inséré. Lorsque la souris se déplace sur la ligne du cadre rectangulaire, la souris prend la forme d'une flèche croisée. Lorsque vous cliquez sur la souris, 8 carrés noirs pleins apparaissent autour de la ligne du cadre et il y a un carré vide dans le coin supérieur gauche, indiquant. que ce calque est sélectionné.
Astuce : utilisez la souris pour faire glisser le carré plein pour modifier la taille du calque et faites glisser le carré vide dans le coin supérieur gauche pour modifier la position du calque.
La deuxième étape consiste à cliquer avec la souris dans le calque et à saisir « China Computer Education News », puis à définir le texte en bleu dans la fenêtre du panneau de propriétés.
La troisième étape consiste à cliquer sur la bordure du calque pour sélectionner le calque, puis à exécuter la commande "Éditer → Copier" pour copier le calque actuel, puis à cliquer avec la souris dans d'autres zones vides de la fenêtre d'édition et à exécuter la commande "Éditer → Coller". commande, de sorte que dans la fenêtre d'édition Un autre calque apparaisse, mais actuellement ils se chevauchent et vous devez déplacer le calque avant de pouvoir voir les deux calques.
La quatrième étape consiste à changer la couleur du texte de l'un des calques en noir et à déplacer la position du calque de manière à ce que les positions des deux calques diffèrent de quelques pixels, produisant ainsi un effet d'ombre (Figure 2).
Figure 2
Après avoir terminé les opérations ci-dessus, appuyez sur le bouton « F12 » pour prévisualiser et vous pourrez voir l'effet illustré dans la figure 1 dans le navigateur IE.
Calques imbriqués
Le calque dit imbriqué fait référence à un calque créé dans un autre calque. Par exemple, ce qui est montré sur la figure 3 est un calque imbriqué typique (figure 3). En fait, créer ce type de calque imbriqué est très simple. Créez simplement un calque parent, cliquez à l'intérieur du calque avec la souris et insérez à nouveau un calque. Cependant, les calques imbriqués ne signifient pas que la sous-couche doit se trouver à l'intérieur du calque parent. Il existe une relation d'héritage entre eux.
Figure 3
La fonction de l'héritage est de maintenir la visibilité de la sous-couche cohérente avec celle du calque parent. Étant donné que de nombreux effets spéciaux de pages Web dynamiques sont obtenus en contrôlant la visibilité du calque, lorsque la visibilité du calque parent change, la visibilité du calque parent est modifiée. la sous-couche change. La visibilité change également. De plus, la relation d'héritage peut également maintenir la position relative du calque enfant et du calque parent inchangée. Par exemple, si nous faisons glisser le calque parent pour le déplacer, le calque enfant se déplacera également avec lui. Cela sera très utile lors de la création de dynamique. pages Web.
Ordre Z des couches
Par rapport aux tableaux, le plus grand avantage des couches est qu'elles peuvent se chevaucher. Afin d'indiquer quelle couche est en haut et laquelle est en dessous, un numéro de série doit être défini pour chaque couche. Ce numéro de série est "l'ordre Z". Cela signifie qu'en plus des coordonnées X et Y de l'écran, un axe Z perpendiculaire à l'écran est artificiellement ajouté.
Comme le montre la figure 4, les quatre calques de la zone de gauche sont évidemment différents des quatre calques de la zone de droite. Il est également très simple d'ajuster l'ordre des calques. Utilisez simplement la souris pour les placer en bas. , le milieu et la couche supérieure feront l'affaire. Cependant, cette méthode de fonctionnement semble un peu gênante lorsqu'il y a de nombreux calques, et il n'est pas pratique de l'ajuster plus tard, nous pouvons donc effectuer des ajustements via le panneau des calques.
Figure 4
Exécutez d'abord la commande "Fenêtre → Calques" pour activer le panneau des calques. À ce stade, vous pouvez voir la fenêtre du panneau illustrée dans la figure 5 (Figure 5). Ici, sélectionnez simplement le calque dont le numéro de série doit être modifié, appuyez sur le bouton . souris et faites-la glisser vers le haut ou vers le bas. Faites glisser et relâchez la souris lorsqu'une ligne horizontale apparaît entre les deux calques que vous souhaitez insérer, afin de pouvoir modifier « l'ordre Z » de chaque calque.
Figure 5
Astuce : Cliquez directement sur la valeur de la case "Z" pour la changer au niveau de calque requis.
Créer des tableaux à l'aide de calques
Bien que l'utilisation de couches pour localiser les éléments d'une page Web soit beaucoup plus pratique que l'utilisation de tableaux, seuls les navigateurs IE 4.0 et supérieurs prennent en charge la fonction de couche. Par conséquent, afin de permettre aux amis utilisant des navigateurs plus anciens de voir le travail que vous avez travaillé si dur pour créer. le meilleur moyen est de convertir le calque en tableau.
La première étape consiste à cocher la case « Empêcher les chevauchements » dans la partie supérieure de la fenêtre illustrée à la figure 5, afin que chaque couche ne puisse pas se chevaucher, sinon il y aura un message d'avertissement pendant le processus de conversion.
La deuxième étape consiste à exécuter la commande "Modifier → Convertir → Calques en tableau". À ce stade, vous pouvez voir la fenêtre illustrée dans la figure 6 (Figure 6). Dans la zone "Mise en page du tableau", sélectionnez "La plus précise" et. "Utiliser des GIF transparents" respectivement. Deux options : la première crée une cellule pour chaque calque grâce à une conversion précise pour garantir la distance entre chaque cellule ; la seconde remplira la dernière ligne du tableau converti avec une image GIF transparente, ce qui garantit que tout est transparent. navigateurs Tous ont la même apparence.
Figure 6
La troisième étape consiste à terminer l'opération de conversion de couche en table après avoir appuyé sur le bouton "OK".
Astuce : Dreamweaver MX 2004 fournit également la fonction de conversion des tableaux en calques, et les étapes sont similaires.
Si vous souhaitez rendre vos propres pages Web colorées, vous devez maîtriser la technologie des couches, sinon vous rencontrerez de nombreuses difficultés lors de la création de pages Web dynamiques à l'avenir. Il est donc recommandé d'étudier en profondeur l'introduction ci-dessus pour vraiment. maîtriser les couches technologiques.
