Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Creéer et configurer des frames dans Dreamweaver

Introduction

 

Les Frames ou les iFrames (cadres) sont populaires pour différentes raisons. La raison la plus plosible est qu'elles permettent d'afficher des bannières et des menus de navigation pour lier des pages. On peut afficher alors une frame à l'intérieur d'une page. C'est surtout utiles quand vos pages sont lourdes et demandent du temps pour être affichées ce qui pourrait amenéer le visiteur dans ce cas quitter votre site.

Dans ce tutoriel, nous allons aborder d'un manière claire la création et la configuration de frames dans Dreamweaver. Nous allons commencer pas à pas et créer une des frames les plus habituelles: le frame à trois aires.

fsetexmpl2.gif

Dans ce tuto, nous aurons besoin de deux pages: une page dans laquelle nous voulons afficher le cadre frame qu'on va appeler page.htm et une page de frame qu'on appellera: frame.htm.

Créer le frame

La palette des objets frames

Insérer un frame avec Dreamweaver

Ici vous avez les options des frames les plus utilisées. Vous pouvez choisir une d'elles pour que Dreamweaver la configure pour vous. Dans ce tutoriel, nous avons choisi de l'imbriquer en haut et à gauche.

Créez une nouvelle page: Fichier >> Nouveau Cliquez sur la flèche en bas dans le panneau des objets à droite.

Sélectionnez de la liste: Insérer un cadre en haut et à gauche.

Vous avez ici le morceau du code HTML généré pour l'insertion du cadre iframe:

<iframe src=”iframe.htm” width=”327″ height=”150″ scrolling=”auto” frameborder=”0″/>

<frameset rows="90,*" cols="*" frameborder="NO" border="0" framespacing="0"> <frame name="topFrame" scrolling="NO" noresize src="banner.htm" >
<frameset cols="150,*" frameborder="NO">
  <frame name="leftFrame" noresize src="navigation.htm" scrolling="NO">
  <frame name="mainFrame" src="content.htm" scrolling="AUTO">
</frameset> </frameset>

Le titre de l'iframe

  1. Allez à Modifier >> Propriétés de la page
  2. Entrez "Frame" dans le champ du titre.
  3. Cliquez sur OK.
  4. Sur un site basé sur le cadre, le titre externe du frame sera toujours affiché pour le titre des pages, peu importe ce que vous avez nommé pour chaque frame ou une page dans le reste du jeu de cadres.
  5. Puisqu'il s'agit d'un jeu de cadres à 3, il sera composé de 4 pages HTML. Une pour le jeu de cadres .. et une pour chacune des zones de contenu des autres.

Nommer les frames

Le panneau des cadres de Dreamweaver

Panneau des cadres Dreamweaver
  1. Ouvrez le panneau des cadres (Fenêtre >> Cadres)
  2. Cliquez à l'intérieur du panneau quand "Cadre courant" est affiché.
  3. Dans l'inspecteur des propriétés sous le nom du cadre, remplacez Cadre courant par "cadredecontenu" sans espaces ni caractères spéciaux.
  4. Dans le panneau des cadres, cliquez à l'intérieur de topFrame et renommez-le "cadrebanniere".
    Faites de même pour Cadreagauche et renommez-le: "cadredenavigation".

Enregistrer le frame

 

En ayant créé notre jeu de cadres et avec tous les frames només, nous pouvons maintenant les enregistrer.

Quand on veut enregistrer le jeu de cadre pour la première fois, nous devons enregistrer d'abord frame.htm ensuite les autres pages de cadres une à une.

Dreamweaver affiche une bordure épaisse en noir et blanc autour du cadre que vous êtes sur le point de sauver. Après avoir enregistré le premier, la frontière passe à l'image suivante pour être sauvé jusqu'à ce qu'ils aient tous été sauvés.

Dans le panneau Cadres sélectionner la bordure extérieure du jeu de cadre avec votre souris. Il sera mise en évidence en noir, comme le montre l'image ci-dessus.

Allez dans Fichier » Enregistrer tous les cadres. La boîte de dialogue Enregistrer apparaît. (Rappelez-vous - Vous devez sauver le jeu de cadres en premier).

Enregistrez le fichier d'abord comme «frame» et naviguez jusqu'à l'emplacement de votre site. Cliquez sur Enregistrer.

La bordure épaisse se déplace maintenant au contenu du frame. Enregistrer le présent comme «contenu» et l'enregistrer dans le même dossier que le premier.

Ensuite, a frontière épaisse se déplace vers la cadre de menu. Nommez celui-ci "navigation"

Enfin, la bannière, Nommez celui-ci "banniere"

Maintenant, le jeu de cadres et l'ensemble de ses cadres ont été sauvées. Voici les fichiers .Htm qui ont été créés:

La différence entre les cadres et les fichiers .htm

 

Avant d'aller plus loin, je tiens à expliquer la différence entre les cadres et les fichiers .htm qui résident à l'intérieur d'eux.

Même si nous avons nommé notre .htm comme les cadres, il n'y a vraiment aucun lien avec ce sujet. Vous pouvez, tout en économisant de l'agencement de cadres initial, nommer les fichiers .htm ce que vous voulez.

Le principal Frame.htm détient la totalité des données relatives à la structure du jeu des cadres et des cadres eux-mêmes. C'est vraiment son seul but. Les fichiers .htm (pages) viennent résider à l'intérieur de ces cadres et peuvent être remplacés par ceux d'autres à tout moment. Fondamentalement, à n'importe quel moment vous allez dans le panneau Cadres et faire des ajustements à l'une des images que vous éditez les frame.htm principal.

Nous sommes prêts à faire quelques ajustements de la présentation de notre nouvelle suite de cadres pour répondre à nos besoins.

Le rendu visuel

Cette image devrait vous aider à comprendre un peu mieux le jeu de cadres et son imbriquement à l'intérieur du cadre courant (extérieur) de cadres. Le jeu de cadres se trouve à l'intérieur de la rangée inférieure du frame extérieur.

Visuel du frame Dreamweaver

Dreamweaver® est une marque déposée d'Adobe® Systems Incorporated. Les logos et les noms de marques cités dans ce site sont les propriétés respectives de leurs développeurs.

 

Création de sites web

hit counter