|
|
|
|
|
|
|
|
|
|
- Présentation
- Création d'un modèle de pages
- Créer un modèle de pages
- Créer un modèle de pages à partir d'une page existante
- Appliquer un modèle de pages
- Créer une nouvelle page utilisant un modèle de pages
- Appliquer un modèle sur une page existante
- Ouvrir le modèle associé à une page
- Reporter les modifications effectuées sur un modèle
- Tester un modèle de pages
- Liste des modèles utilisés
Les modèles de pages (templates)
WEBDEV permet de créer des modèles de pages. Ces modèles contiennent tous les éléments graphiques communs à l'ensemble des pages de votre site. Les modifications effectuées dans un modèle de pages sont automatiquement reportées sur toutes les pages utilisant ce modèle. Un modèle de pages permet de respecter la charte graphique définie pour un site. Il est conseillé d'utiliser dans vos sites WEBDEV des modèles de pages plutôt que des Framesets. En effet, l'utilisation de modèles de pages dans vos sites permet de : - optimiser la vitesse d'affichage des pages du site.
- limiter le nombre de fichiers HTML générés (et donc le nombre de fichiers HTML à charger sur le poste de l'internaute).
- simplifier la création des pages du site.
- simplifier la mise en page des pages du site.
- simplifier la mise à jour de la charte graphique du site.
- simplifier la gestion des destinations des pages du site.
- ...
Création d'un modèle de pages Un modèle de pages peut être créé : - soit directement, comme une nouvelle page.
- soit à partir d'une page existante.
Créer un modèle de pages Pour créer un modèle de pages : - Créez un nouveau modèle de pages :
- Cliquez sur
 parmi les boutons d'accès rapide. - La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Page" puis sur "Modèles de pages".
- Indiquez si nécessaire si le modèle de pages doit :
- être vierge,
- être basé sur un des modèles du projet,
- utiliser un modèle prédéfini.
- Créez tous les champs nécessaires. Ces champs seront présents sur toutes les pages utilisant le modèle de pages.
- Saisissez si nécessaire :
- les événements / traitements WLangage associés au modèle de pages.
- les événements / traitements WLangage associés aux différents champs du modèle de pages.
Ces événements et traitements seront automatiquement importés dans les pages utilisant le modèle.
- Donnez un nom à votre modèle (onglet "Général" de la fenêtre de description).
- Sous le volet "Accueil", dans le groupe "Général", cliquez sur "Enregistrer" (ou cliquez sur
 parmi les boutons d'accès rapide).
Le modèle de pages correspond à un fichier d'extension ".WWT".
Créer un modèle de pages à partir d'une page existante Pour créer un modèle de pages à partir d'une page existante : - Ouvrez la page choisie comme modèle.
- Conservez uniquement les champs nécessaires au modèle. Ces champs seront présents sur toutes les pages utilisant le modèle de pages.
- Conservez uniquement le code des traitements nécessaires au modèle. Ces traitements seront automatiquement importés dans les pages utilisant le modèle.
- Donnez un nom à votre page (onglet "Général" de la fenêtre de description de la page).
- Sous le volet "Accueil", dans le groupe "Général", déroulez "Enregistrer" et sélectionnez "Enregistrer comme un modèle". La page en cours devient un modèle :
- son nom est précédé de "Modèle".
- un cadre jaune entoure la page dans l'éditeur de pages.
- le modèle de pages apparaît dans le volet "Explorateur de projet" sous la rubrique "Modèles de pages".
- l'extension du fichier modèle est ".WWT".
Appliquer un modèle de pages Créer une nouvelle page utilisant un modèle de pages Pour créer une nouvelle page utilisant un modèle de pages : - Créez une nouvelle page :
- Cliquez sur parmi les boutons d'accès rapide.
- Dans la fenêtre qui s'affiche, cliquez sur "Page" puis sur "Page".
- Dans l'assistant qui s'ouvre, sélectionnez l'option "Page" à gauche puis sélectionnez à droite votre modèle personnel.
- Validez la création de la page. Une page vide associée à votre modèle de pages est créée.
Un carré jaune permet d'identifier les éléments appartenant au modèle de pages. Ces éléments pourront être modifiés : - dans le modèle de pages : la modification sera effective pour toutes les pages utilisant ce modèle.
- dans la page, par le mécanisme de "surcharge de champs" : la modification sera effective uniquement pour la page.
Appliquer un modèle sur une page existante Pour appliquer un modèle sur une page existante : - Affichez la page sous l'éditeur de pages.
- Sous le volet "Page", dans le groupe "Description", déroulez "Modèles" et sélectionnez "Hériter d'un modèle".
- Sélectionnez le modèle de pages à appliquer.
- Validez.
- Indiquez si vous souhaitez mettre à jour les propriétés de la page depuis le modèle. Si vous répondez Oui, la page sera automatiquement liée pour la majorité de ses caractéristiques au modèle.
Remarque : les propriétés de la page gérée par le modèle sont les suivantes : Image, Image de fond fixe, Couleur de fond, Couleur du texte, Couleur de lien, Couleur du lien visité, couleur du lien actif, lien souligné, centrer la page, fixer les champs dans la page, titre, champ pour afficher la jauge, position de jauge Ajax. Ouvrir le modèle associé à une page Pour ouvrir le modèle associé à une page : - Affichez la page sous l'éditeur de pages.
- Dans le menu contextuel d'un élément du modèle, sélectionnez l'option "Ouvrir le modèle".
Autre possibilité : - Listez les modèles associés à la page : sous le volet "Page", dans le groupe "Description", déroulez "Modèles" et sélectionnez "Liste des modèles utilisés".
- Sélectionnez le modèle voulu et cliquez sur le bouton "Ouvrir le modèle" (
 ).
Reporter les modifications effectuées sur un modèle Lors de la modification d'un modèle de pages, il est possible de reporter les modifications effectuées sur une ou plusieurs pages utilisant ce modèle dans le projet en cours. Ce report des modifications est proposé à la fermeture du modèle (si les modifications n'ont pas été enregistrées). Ce report peut être effectué à tout moment : - depuis le modèle : sous le volet "Page", dans le groupe "Description", déroulez "Modèles" et sélectionnez "Mettre à jour les pages associées".
- depuis n'importe quelle page utilisant le modèle :
- en ouvrant la liste des modèles utilisés : sous le volet "Page", dans le groupe "Description", déroulez "Modèles" et sélectionnez "Liste des modèles utilisés".
- puis en cliquant sur le bouton "Se mettre à jour".
- directement depuis le modèle de pages, en cliquant sur l'icône
 dans le bandeau du modèle.
Remarque : Le report des modifications du modèle est effectué en fonction des caractéristiques surchargées dans les pages qui utilisent le modèle. Tester un modèle de pages Pour tester un modèle de pages : - Ouvrez le modèle à tester :
- Sous le volet "Page", dans le groupe "Description", déroulez "Modèles" et sélectionnez "Liste des modèles utilisés",
- Cliquez sur le bouton "Ouvrir le modèle".
- Cliquez sur le bouton
 parmi les boutons d'accès rapide.
Liste des modèles utilisés Pour afficher la liste des modèles utilisés pour une page, sous le volet "Page", dans le groupe "Description", déroulez "Modèles" et sélectionnez "Liste des modèles utilisés". Depuis cette fenêtre, il est possible de : - "Ouvrir un modèle" : ouvre le modèle sélectionné dans l'éditeur de pages.
- "Se mettre à jour" : les champs et le code du modèle sont mis à jour dans la page.
- "Ajouter" : ajoute un modèle à la page en cours.
- "Dissocier" : les champs du modèle présents dans la page sont dissociés du modèle. Le modèle est supprimé de la liste des modèles utilisés, mais ses champs ne sont pas supprimés de la page.
- "Supprimer" : supprime le modèle (champs et code) de la page.
Liste des exemples associés :
|
Exemples didactiques (WEBDEV) : WW_Assistant
[ + ] Avec WEBDEV, il est possible de réaliser ses propres assistants Web, et ceci notamment grâce à la fonction WLangage 'PageAfficheDialogue' qui permet d'afficher une page de manière modale. Ceci permet donc de créer un dialogue avec l'utilisateur. Et pour passer d'un plan à un autre de l'assistant, il suffit d'utiliser le concept de plan présent également dans WEBDEV.
|
|
Exemples complets (WEBDEV) : WW_Rewali
[ + ] Cet exemple est un site de réservation de voyages. Il propose des offres de voyages à des prix très attractifs. Il est ensuite possible de choisir la durée du voyage, les dates de départ .. puis de valider l'achat jusqu'au paiment via Paypal. Il utilise notamment le champ "bandeau défilant" et les plans.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|