La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Les calques Les Template (modèles) Les Comportements Les scénarios Les formulaires Les CSS Le serveur Web de l’UTC Présentation.

Présentations similaires


Présentation au sujet: "Les calques Les Template (modèles) Les Comportements Les scénarios Les formulaires Les CSS Le serveur Web de l’UTC Présentation."— Transcription de la présentation:

1 Les calques Les Template (modèles) Les Comportements Les scénarios Les formulaires Les CSS Le serveur Web de l’UTC Présentation

2 Les calques Définition : – Elément de mise en page HTML – Sous forme de rectangle – Contient tous types de contenus (Vidéo, texte, image, …) – Alternative plus souple que les tableaux …

3 Création d’un site (Gérer les sites) Créez une nouvelle page dans le site Sélectionnez mise en forme en haut à gauche (à la place de Commun) Apparition des icônes de mise en forme Cliquez sur Dessinez un calque sur la zone d’en-tête Dessinez un calque sur le bord gauche Vous pouvez maintenant insérer des images dans ces calques ( haut et gauche) Exercice de création de calque

4 Création de calques

5 Propriétés des calques : G : rapport au bord gauche de la page S : rapport avec le haut de page L : largeur du calque H : hauteur du cadre

6 Permettent de définir un masque de page Constitués de calques Les cadres contiennent des zones éditables Enregistrement d’une page HTML au format dwt à l’intérieur du site Les Modèles

7 Reprenez le fichier précédent Créez 1 autre calque au centre de la page ( passez en mode mise en forme et cliquez sur l’icône ) Dans le calque central insérez une ou plusieurs zones modifiables (menu Commun -> ) Enregistrez la page dans le projet (vérifier l’extension dwt) Le modèle est désormais créé Exercice de création d’un modèle

8

9 Créez finalement une page grâce à ce modèle Fichier -> Nouveau Sélectionnez l’onglet modèle Sélectionnez le fichier précédemment créé Insérez un texte dans la région modifiable Modifiez le modèle (double cliquer sur la page de modèle du site) Enregistrez le modèle Visualisez le comportement de la page nouvellement créée Création d’une page à partir d’un modèle

10 Actions sur les calques Création d’effets Afficher / Masquer des calques Déplacer un calque Animer un calque Création de diaporama Reposent sur l’usage de fonctions créées automatiquement function MM_showHideLayers() { var i,p,v,obj,args=MM_showHideLayers.arguments; for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; } obj.visibility=v; } Les comportements

11 Dans la page nouvellement créée Insérez une image (chat_dort.jpg) Sélectionnez cette image Dans la barre de comportement (barre d’outils à droite) sélectionnez Ajouter ( + ) intervertir une image Dans la fenêtre de dialogue allez chercher l’autre image (chat_debout.jpg) Testez le comportement obtenu grâce à la touche F12 Possibilité d’ajouter d’autres comportements listés dans la barre de comportement Ajout d’un comportement

12 Les scénarios Basé sur les propriétés des calques Créé un effet d’animation dans le temps Possibilité de les combiner avec les comportements Extensions du HTML vers le DHTML (Dynamic HTML) Basé sur l’usage d’une Time Line comme en flash

13 Dans la page modèle Créez un nouveau calque Ajoutez une image dans ce nouveau calque Cliquez sur : Modifier => Scénario =>Ajouter un objet au scénario Vous pouvez désormais travailler sur la Time Line comme sous flash (déplacer le calque au fil de la Time Line) Enregistrez votre page sous un nouveau nom ex: « scenario.html » Création d’un scénario

14 Les formulaires Récupérer des informations depuis l’utilisateur (authentification, adresse, email…) Existence du menu formulaire contenant les éléments potentiels d’un formulaire (insertion =>formulaire). A noter quand on ajoute un élément de formulaire: –ID: identification de l’élément, le nom apparaissant dans le code –Étiquette: texte apparaissant à l’écran avec l’élément

15 Permet de définir des groupes de présentation Définit la couleur, la taille, la position, etc Permet l’unique définition d’un style Permet de réutiliser un style sans le redéfinir Peut être exclus de la page HTML pour une meilleur lisibilité et maintenabilité du code (externe) Peut être inséré directement dans le code de la page web (html) Les CSS (feuilles de styles)

16 Création d’une feuille de style Dans le panneau de commande (onglet CSS) Clic droit nouveau Créez une classe de style Donnez un nom à la feuille de style Sélectionnez une feuille externe Validez Vous pouvez désormais créer des types de présentation prédéfinit Il sont applicable à des calques du texte ou directement une page Appliquez le style créé à une sélection (texte ; calque ; etc)

17 Accédez aux propriétés du site Choisir le mode de connexion Local/Réseau Nommez le site Choisir l’emplacement du site – Z:\public_html Votre site est maintenant visible à l’adresse : –wwwetu.utc.fr/~loginwwwetu.utc.fr/~login Mettre en ligne votre site

18 Bibliographie Base de connaissance de l’UV SI28 http://www.uhb.fr/urfist/Supports/siteweb2/conception_scenarios.html http://www.cyberformateur.com/support/dream http://yeca.ultimteam.com/cv/ http://perso.orange.fr/coin.des.experts/reponses/faq9_49/dw2.html


Télécharger ppt "Les calques Les Template (modèles) Les Comportements Les scénarios Les formulaires Les CSS Le serveur Web de l’UTC Présentation."

Présentations similaires


Annonces Google