
Modèles Dreamweaver
Lorsqu'une page HTML est enregistrée en tant que modèle, Dreamweaver crée un dossier de modèles au niveau racine du dossier racine local et génère un fichier .dwt qui devient la source de toutes les pages qui lui sont appliquées.Chaque fois qu'une page HTML est appliquée à un modèle, (Fichier > Nouveau, à partir d'un modèle ou Modifier > Modèles > Appliquer le modèle à la page), elle crée un lien relatif à la racine du site au fichier.dwt. La raison pour laquelle ce lien relatif au site lie toujours correctement est que le fichier.dwt est toujours dans le dossier modèles, à niveau de la racine, de la structure de dossiers du site. Si le fichier.dwt est déplacé du dossier Modèles et si ce dossier est déplacé ou renommé, le lien est rompu. Il est important de conserver le fichier.dwt dans le dossier Modèles où Dreamweaver le crée. Pour éviter toute confusion, il est recommandé de NE PAS enregistrer d'autres éléments de votre site (des fichiers ou des documents HTML source de l'image), à l'intérieur du dossier Modèles.
Comment les pages sont-elles liées aux fichiers template ?
Lorsqu'un fichier est appliqué à une page existante ou créé à partir d'un modèle, le code suivant est inséré dans la source :
<!-- #BeginTemplate "/Templates/templateName.dwt" -->
Pour afficher le code source HTML généré par Dreamweaver, choisissez Fenêtre > HTML.
La route ci-dessus remplace la source HTML normal, qui s'affiche sur une nouvelle page. Au lieu de commencer avec les étiquettes produites par le nouveau fichier, il indique qu'un niveau à l'intérieur du dossier racine local, dans un dossier appelé Modèles, il existe un fichier.dwt contenant toutes les informations qui ne sont pas à l'intérieur des zones modifiables de cette page. Cette route envoie le navigateur pour chercher à l'emplacement correct le fichier qui fournira les propriétés de la page, la mise en page, et les graphiques—tout le contenu qui existe uniquement dans le fichier.dwt. C'est la raison pour laquelle les modifications en dehors des zones modifiables d'une page doivent être apportées directement au fichier.dwt. Lorsque le fichier.dwt lui-même est ouvert et révisé, les pages appliquées au modèle sont associées au fichier dans le même emplacement antérieur. Toutes les pages appliquées au modèle sont tous automatiquement actualisées avec les nouvelles informations.
Chemins relatifs au document et à la racine du site
Le chemin liant une page HTML à un modèle est un chemin relatif à la racine du site.C'est ce que l'on appelle relatif à la racine du site, car il commence à partir du niveau supérieur de la structure de répertoires (le dossier racine local), puis continue par le dossier suivant en bas (modèles), et finalement, les liens au fichier.dwt. Dreamweaver génère automatiquement une route relative à la racine du site vers les modèles dans le dossier Modèles, car il connaît exactement l'endroit où le modèle est localisé, n'importe quels autres dossiers des fichiers existent dans la structure du site.
Crée un chemin relatif au document spécifique à partir d'un fichier à l'autre. Au lieu de commencer au niveau supérieur (racine du site) de la structure des dossiers de fichiers, il génère une route qui commence dans un fichier, passe par les dossiers (répertoires) nécessaires, et s'arrête à l'emplacement de l'autre fichier. Il est impératif que les deux fichiers soient enregistrés dans le dossier racine local AVANT DE créer un lien relatif au document, de l'un vers l'autre.
Si vous souhaitez prévisualiser des pages dans un navigateur en local, avant de télécharger les fichiers sur un serveur distant, celles-ci doivent être relatives au document. Les deux navigateurs Netscape et Internet Explorer n'ont aucun moyen pour identifier le dossier racine local défini (comme Dreamweaver), alors il peut uniquement suivre une route relative au document qu'il examine actuellement. Comme la plupart des utilisateurs préfèrent afficher leurs pages localement dans un navigateur avant de les télécharger, Dreamweaver prend par défaut la valeur du document chaque fois qu'un fichier est lié ou une image est insérée. Si le fichier n'a pas été enregistré AVANT d'insérer une image ou un lien pointant vers une autre page HTML, Dreamweaver n'a pas de référence pour l'emplacement de la page active, il génère une route qui a cette apparence :
file:///HardDrive/Desktop/content.htm dossier/localRootFolder/sous-dossier/sous-dossier/images
ou
file:///C:/Desktop/localRootFolder/subfolder/subfolder/images/content.htm
Ces routes sont spécifiques à votre poste de travail et elles ne fonctionnent pas lorsque vous transférez des fichiers vers un serveur distant.
Le graphique ci-dessous donne une explication graphique de la différence entre relatif au document et relatif à la racine du site. Dans l'exemple ci-dessous, la page bio.htm contient une image nommée logo.jpg insérée en utilisant des choix de chemins d'accès alternatifs.
|
|
Chemins d'accès relatifs au document dans le template
L'insertion d'images et de liens directement dans le fichier .dwt peut être déroutante. Rappellez-vous, lorsque vous travaillez dans le fichier.dwt, que tout lien créé en tant que relatif au document est strictement relatif au fichier.dwt. La route générée est spécifique de cette page HTML ou source d'image du fichier .dwt. Dreamweaver conserve un enregistrement où se trouvent les pages référencées, appliquées au modèle en direct, et il ajuste automatiquement la route au fichier HTML référencé, pour être approprié pour la page en cours. Si vous affichez la source HTML pour.dwt et une page appliquée au modèle, les routes sont différentes, et c'est ainsi qu'il doit se passer. Si Dreamweaver n'ajuste pas automatiquement la route d'accès à l'emplacement spécifique de chaque page, la route relative au document se rompt sur tous les fichiers, à l'exception du fichier.dwt.
Voici un exemple de la manière dont Dreamweaver peut ajuster votre route relatifve au document :
|
La route d'origine du modèle au graphique : |
|
../graphics/images/banner.gif |
|
La route ajustée dans la page appliquée au modèle : |
|
../../graphics/images/banner.gif |
Dreamweaver n'ajuste pas les routes relatives au site ou absolues (http://) du modèle.jusqu'aux pages appliquées au modèle,car il n'est pas nécessaire de les actualiser.
Chemins d'accès relatifs au document dans les pages appliquées au modèle
L'insertion d'images et de liens à l'intérieur de la zone modifiable d'une page attachée à un modèle fonctionne exactement comme l'insertion d'images ou de liens dans une page qui n'est pas attachée à un modèle.Si vous suivez la procédure de choisir la commande Fichier > Nouveau, à partir d'un modèle, puis Fichier > Enregistrer (la sélection d'un emplacement à l'extérieur du dossier racine local) AVANT DE créer tous les liens conduisant à d'autres pages ou images, Dreamweaver est par défaut réglé comme document relatif, dans les boîtes de dialogue Sélectionner page HTML ou boîte de dialogue Sélection de l'image. Tant qu'un menu déroulant « Relatif à» n'est pas manuellement changé pour choisir le site racine, les images et les liens sont disponibles, quand vous visionnez votre travail préalablement dans le navigateur localement.
Chemins d'accès relatifs à la racine du site dans le template
Lors du travail sur un fichier template pour créer des liens vers d'autres pages ou pour référencer l'Image Source des graphiques, le menu pop-up des boîtes de dialogue Sélectionner un fichier HTML et Sélectionner une Image Source vous permet de choisir entre relatif au document et relatif à la racine du site. Comme illustré dans le graphique ci-dessus, la sélection de la racine du site crée une route d'accès du fichier sélectionné vers le fichier sélectionné, indépendamment du fichier.dwt qui est actuellement ouvert dans Dreamweaver. L'utilisation des liens relatifs à la racine du site peut être bénéfique lorsque le contenu dans la structure de répertoires de site est susceptible de se déplacer dans le dossier racine local, car le lien reste sans interruption, même si les fichiers sont décalés de leur position d'origine.
|
La route d'origine du modèle au graphique : |
|
/graphics/images/banner.gif |
|
La route d'accès dans la page appliquée au modèle : |
|
/graphics/images/banner.gif |
Dreamweaver n'ajuste pas les routes relatives au site ou absolues (http://) du modèle.jusqu'aux pages appliquées au modèle,car il n'est pas nécessaire de les actualiser. L'emplacement du document (s'il s'agit du fichier.dwt ou un fichier HTML associé au modèle) est donc inutile pour une route relative à la racine du site.
Chemins d'accès relatifs à la racine du site dans les pages appliquées au template
L'utilisation de liens relatifs à la racine du site peut être utile si le site est complexe, implique une équipe de développeurs travaillant ensemble, ou possède une structure de répertoire de site qui sera révisée régulièrement. Pour créer un lien relatif de site, choisissez Racine du site dans menu déroulant, à côté des mots « Relatif à », situés sur la source de sélection de l'image et les boîtes de dialogue choisies du fichier HTML.
Dans la mesure où la route d'accès est créé à partir du dossier racine local, par un nombre indéterminé de sous-dossiers et enfin termine au niveau de la page ou de l'image à laquelle elle est liée, seuls les développeurs ont la possibilité de déplacer les pages ou les actifs, un ou plusieurs, sous-dossiers dans la structure de répertoires du site sans rompre les liens. Par exemple, dans l'illustration ci-dessus, si le fichier logo.jpg doit être déplacé vers le dossier d'images, situé dans le dossier de fonctions, et si le lien est un lien relatif à la racine du site, le navigateur n'a pas de problèmes pour trouver le graphique. Si la route d'accès est un lien relatif au document, le logo.jpg ainsi que les fichiers bio.htm DOIVENT rester dans la structure de dossiers où ils se trouvent, lorsque la route relative au document est créée. Si vous déplacez l'un ou l'autre fichier après que la route est créé, celle-ci se rompt.
Comme mentionné ci-dessus, uniquement des liens relatifs au document peuvent être prévisualisés localement dans le navigateur. Si vous choisissez d'utiliser des liens relatifs à la racine du site, il existe deux manières de visualiser vos pages dans le navigateur.
La première consiste à télécharger (Placer) les fichiers sur le serveur distant, puis d'utiliser votre navigateur pour accéder à la page, en saisissant la route d'accès absolue dans le champ de l'adresse URL. À l'aide de cette méthode, les pages sont vues comme les autres sur le Web. Pour faire des modifications aux pages, ouvrez la copie locale des fichiers, faites des modifications, sauvez les pages HTML, connectez-vous au ftp server et « Placez » les nouveaux fichiers sur le serveur distant. Les fichiers portant le même nom dans le même dossier remplacent les anciennes versions du fichier sur le serveur distant.
La deuxième manière d'afficher un aperçu des liens relatifs de site dans le navigateur est utiliser un serveur Web personnel. Dans Windows uniquement, cette option peut être définie par l'entrée dans Dreamweaver, à l'aide de la commande, Fichier > Aperçu dans le navigateur > Afficher la liste des navigateurs, et sélectionner Aperçu à l'aide du serveur local. La définition de cette option permet à Dreamweaver la prévisualisation du document, à l'aide d'un serveur Web personnel.
Remarque : Pour Macintosh, un serveur Web personnel est défini au niveau du système. Consultez la documentation du système pour obtenir de l'assistance.
Créez de magnifiques sites web dans Dreamweaver
Concevez, codez et gérez des sites web dynamiques dans un puissant outil tout-en-un.