Créer un compte Utilisateur
8 visiteur(s) et 0 membre(s) en ligne.  

 Lettre d'information
 


Votre adresse E-mail



Recevez par mail les nouveautés du site.

 

03) Les Frames (cadres)

(511 mots dans ce texte )  -   lu : 349 Fois     Page Spéciale pour impression

Dans ce tutorial nous allons étudier les Frames ou cadres en français dans Dreamweaver 3.
Les frames sont particulièrement utilisées pour mettre en place un menu (ou une barre de navigation), de façon à ce qu'on n'ait pas a le recharger inutilement lorsqu'on change de section sur un site.

Création des différents fichiers :

Commençons par réaliser deux frames. Rien de plus simple


Dans la palette "Objects" déroulez le menu déroulant (encadré en rouge), et choisissez frames.

Nous allons diviser la page en 2, de façon à avoir le menu au-dessus, et le reste du document en dessous. Cliquons pour cela sur le bouton encadré en rouge.

Ici, nous allons enregistrer le fichier (Ctrl + s). Nommons le " ensemble.htm ". Dans chaque frame il va falloir placer un fichier htm. Pour ce faire, créons deux nouveaux documents (Ctrl + n) que nous nommerons respectivement " menu.htm " et " contenu.htm ".

Liaison des différents fichiers:

Nous allons maintenant lier ces deux fichiers au fichier ensemble. Affichez la palette Frames en cliquant sur la frame du haut dans la palette (voir ci-dessous).


Maintenant que nous avons activé la frame, tournons-nous vers la palette des options de cette frame :


Vous pouvez donner un nom à votre frame. Dreamweaver lui donne un nom par défaut : " topframe ". On va la renommer en " menu ". Indiquez la source du fichier (Src) " menu.htm ". On va enlever les bordures (ça fait moche). On va dire qu'on ne peut pas redimensionner la frame (cochez " No Resize "). Si vous ne voulez pas de marge, entrez les valeurs " 0 " dans " MarginWidth " et " MarginHeight ". Et on va dire que le scrolling est interdit.

Maintenant, vous pouvez faire la même chose pour la frame du bas.

Options générales et redimensionnement des frames :

Maintenant, placez-vous à nouveau dans la palette frames, et cliquez sur la bordure entourant les deux frames. Nous pouvons spécifier les préférences générales pour toutes les frames. Faisons en sorte qu’on ne voie pas les bordures.

Si vous avez besoin de redimensionner de façon précise une frame, vous pouvez utiliser ici les paramètres numériques (il faut veiller à laisser l'unité relative sur l'une des frames). Vous pouvez également modifier la taille des frames manuellement en tirant sur la bordure de séparation directement dans le document.


Pour les puristes, voici le code source:









</font></div><br /><br /><div class="SEPAR"></div><br /><span class="NOIR"><b>Retour à la sous-rubrique :</b></span><table width="100%" border="0" cellpadding="1" cellspacing="1" class="LIGNB"> <tr><td><li><a href="sections.php?op=listarticles&amp;secid=15" class="NOIR">Dreamweaver</a></li></td></tr></table><br /><span class="NOIR"><b>Autres publications de la sous-rubrique :</b></span><table width="100%" border="0" cellpadding="1" cellspacing="1" class="LIGNB"><tr ><td><li><a href="sections.php?op=viewarticle&amp;artid=20" class="NOIR">01) Présentation du logiciel</a></li></td></tr><tr ><td><li><a href="sections.php?op=viewarticle&amp;artid=21" class="NOIR">02) Animez vos calques</a></li></td></tr><tr ><td><li><a href="sections.php?op=viewarticle&amp;artid=23" class="NOIR">04) Les modeles </a></li></td></tr><tr ><td><li><a href="sections.php?op=viewarticle&amp;artid=24" class="NOIR">05) Creez un puzzle</a></li></td></tr><tr ><td><li><a href="sections.php?op=viewarticle&amp;artid=25" class="NOIR">06) Creez une mailing list </a></li></td></tr><tr ><td><li><a href="sections.php?op=viewarticle&amp;artid=26" class="NOIR">07) Menus deroulants dynamiques graphiques</a></li></td></tr><tr ><td><li><a href="sections.php?op=viewarticle&amp;artid=27" class="NOIR">08) Le RollOver</a></li></td></tr><tr ><td><li><a href="sections.php?op=viewarticle&amp;artid=28" class="NOIR">09) Inserez de la musique </a></li></td></tr><tr ><td><li><a href="sections.php?op=viewarticle&amp;artid=29" class="NOIR">10) Triez un tableau </a></li></td></tr><tr ><td><li><a href="sections.php?op=viewarticle&amp;artid=30" class="NOIR">11) Les styles HTML</a></li></td></tr><tr ><td><li><a href="sections.php?op=viewarticle&amp;artid=31" class="NOIR">12) Les menus deroulants </a></li></td></tr><tr ><td><li><a href="sections.php?op=viewarticle&amp;artid=32" class="NOIR">13 ) Le RollOver a distance </a></li></td></tr><tr ><td><li><a href="sections.php?op=viewarticle&amp;artid=33" class="NOIR">14) Explications supplementaires</a></li></td></tr><tr ><td><li><a href="sections.php?op=viewarticle&amp;artid=34" class="NOIR">16) Les nouvelles fonctions de Dreamweaver Mx</a></li></td></tr></table></td></tr></table></td></tr></table> </td><td><img src="themes/Longstand/images/pixel.gif" width="15" height="1" border="0" alt=""></td><td valign="top" width="150"><td> </td> <div align="left"></div> <table width="875" cellpadding="0" cellspacing="0" border="0" align="center"> <tr valign="top"> <td align="center" ></td> <td align="center" ></td> <td align="center" ></td> </tr> </table> <table width="875" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td></td> </tr> </table> <p></p> <table width="875" cellpadding="0" cellspacing="0" border="0" align="center"> <tr valign="top"> <td></td> <td valign="middle" width="800"> <div align="center">Ce site a été construit avec <a href=http://www.npds.org target="_blank" CLASS=NOIR>NPDS</a><br><a href=admin.php CLASS=NOIR>admin</a><br><br></div> </td> <td></td> </tr> <tr valign="top"> <td colspan="3"><IMG src="themes/best/images/footer.gif" width=875 height=16 ></td> </tr> </table><br></body> </html>