intégration web et Éléments complexes dans dreamweaver
DESCRIPTION
Intégration Web et Éléments Complexes dans Dreamweaver. mars 2013 Grégory Petit http://lrcm.com.umontreal.ca/greg/ART6017/. Intégration Web. Rappel. Ne pas mettre de caractères accentués, d’espace, de ‘.’ et ‘/’ dans : Le nom des fichiers HTML, Le nom des fichiers de feuilles de style CSS, - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/1.jpg)
Intégration Web et Éléments Complexes dans Dreamweaver
mars 2013Grégory Petit
http://lrcm.com.umontreal.ca/greg/ART6017/
![Page 2: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/2.jpg)
Intégration Web
![Page 3: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/3.jpg)
RappelNe pas mettre de caractères accentués, d’espace, de ‘.’ et ‘/’ dans :
Le nom des fichiers HTML,Le nom des fichiers de feuilles de style CSS,Le nom des dossiers créés pour le site Web,Le nom des fichiers images,Le nom des classes pour les règles CSS,Le nom des id pour les règles CSS.
![Page 4: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/4.jpg)
RappelCréer un dossier où vous allez mettre votre site.
Faire Site -> Nouveau Site dans Dreamweaver et pointer vers le dossier racine du site (ça marche aussi pour rouvrir votre site sur un autre ordi).
Créer un sous-dossier pour les images.
Mettre les règles CSS dans un fichier CSS externe.
Créer éventuellement un sous-dossier si plusieurs fichiers CSS.
Créer éventuellement des sous-dossiers pour garder l’arborescence du site (menu, sous menus, etc.)
![Page 5: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/5.jpg)
Configuration du site - local
![Page 6: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/6.jpg)
Configuration du site - serveur
![Page 7: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/7.jpg)
Configuration du site - serveur
Choisissez le nom que vous voulezBien choisir SFTPMettre cette adresseVotre P0xxxxxxxVotre mot de passe DGTICTestez votre connexionMettre ce dossier par défautRajoutez /~[votre P0xxx]/ à la fin
![Page 8: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/8.jpg)
Configuration du site - serveur
![Page 9: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/9.jpg)
Connexion au serveur
![Page 10: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/10.jpg)
Synchronisation avec le serveurIl est conseillé de travailler sur la copie locale
de vos fichier, puis ensuite d’effectuer la synchronisation avec le serveur.
Avant de modifier un fichier, vérifiez bien que vous travaillez sur la copie locale et non pas la copie serveur.
![Page 11: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/11.jpg)
Synchronisation avec le serveur
Bien vérifier qu’on est dans la version locale avant de faire la synchronisation
![Page 12: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/12.jpg)
Synchronisation avec le serveur
Toujours sélection Site Entier
![Page 13: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/13.jpg)
Synchronisation avec le serveur
Liste des modifications entre la copie locale et la copie sur le serveur
![Page 14: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/14.jpg)
Gestion des droits des fichiersVotre site ne sera pas accessible si vous ne
modifiez pas les droits d’accès à vos fichiers.
Vous devez donc donner l’accès à vos fichiers à tout le monde!
Pour les droits d’accès aux fichiers sur le serveur, donner d’abord les bons droits d’accès au dossier avant de donner les droits d’accès aux fichiers qui sont dans ce dossier.
![Page 15: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/15.jpg)
Gestion des droits des fichiersBien vérifier que vous vous êtes sur la copie du serveur avant de toucher aux droits d’accès.
Clic droit sur le fichier puis "Gérer les permission"
![Page 16: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/16.jpg)
Tout le monde doit pouvoir lireTout le monde doit pouvoir exécuterÉcriture seulement pour le propriétaire
Gestion des droits - dossiers
![Page 17: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/17.jpg)
Tout le monde doit pouvoir lireÉcriture et exécution seulement pour le propriétaire
Gestion des droits - fichiers
![Page 18: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/18.jpg)
Afficher votre site sur le serveurUne fois que tout ça est bien configuré, vous
pouvez afficher votre site sur le serveur.
L’adresse est : http://www-bac.esi.umontreal.ca/~p0xxxxxx/ en mettant votre p zéro.
![Page 19: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/19.jpg)
Éléments complexes de Dreamweaver
![Page 20: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/20.jpg)
Éléments complexesIls ne sont pas forcément complexes, mais
Dreamweaver rajoute automatiquement des scripts, et la majorité des paramètres sont à modifier directement dans le code HTML.
Ces éléments sont dans la partie Spry de la boite d’outils d’insertion.
![Page 21: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/21.jpg)
Barre de Menu
![Page 22: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/22.jpg)
Barre de Menu - Modification
![Page 23: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/23.jpg)
Barre de Menu - ModificationEn fait, ce sont des liens dans des listes!
Dreamweaver se charge ensuite du comportement.
Pour modifier le texte et la cible d’un élément de la barre de menu, il faut modifier la balise <a> de cet élément!
Penser à donner les droits d’accès aux fichiers du répertoire SpyAssets pour que cela fonctionne sur le serveur.
![Page 24: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/24.jpg)
Barre de Menu - ModificationMenu ayant un sous-menu
Élément du sous-menu
Ne pas supprimer car c’est le comportement du menu!
![Page 25: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/25.jpg)
Onglets
![Page 26: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/26.jpg)
Onglets - Modification
![Page 27: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/27.jpg)
Onglets - ModificationLes onglets sont dans des listes.
Le contenu des onglets sont dans des <div>.
Dreamweaver se charge ensuite du comportement.
Pour modifier le texte d’un onglet, il faut modifier la balise <li> de cet élément!
Pour modifier le contenu d’un onglet, il faut modifier le contenu de la balise <div> associé à cet onglet. Comme n’importe quelle <div>, on peut mettre ce qu’on veut dedans.
Penser à donner les droits d’accès aux fichiers du répertoire SpyAssets pour que cela fonctionne sur le serveur.
![Page 28: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/28.jpg)
Onglets - Modification
Titre de l’onglet
Contenu de l’onglet1
Ne pas supprimer car c’est le comportement des onglets
![Page 29: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/29.jpg)
Accordéon
![Page 30: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/30.jpg)
Accordéon - Modification
![Page 31: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/31.jpg)
Accordéon - ModificationUn accordéon est organisé en panneaux et on peut en avoir
autant qu’on veut!
Dreamweaver se charge ensuite du comportement.
Pour modifier le titre d’un panneau, il faut modifier la première balise <div > du panneau!
Pour modifier le contenu d’un panneau, il faut modifier le contenu de la seconde balise <div> de ce panneau. Comme n’importe quelle <div>, on peut mettre ce qu’on veut dedans.
Penser à donner les droits d’accès aux fichiers du répertoire SpyAssets pour que cela fonctionne sur le serveur.
![Page 32: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/32.jpg)
Accordéon - Modification
Titre du panneau Contenu du panneau
Ne pas supprimer car c’est le comportement des onglets
Panneau
![Page 33: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/33.jpg)
Panneau escamotable
![Page 34: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/34.jpg)
Panneau escamotable - Modification
Même comportement que pour le panneau d’un accordéon!
![Page 35: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/35.jpg)
Pratique
![Page 36: Intégration Web et Éléments Complexes dans Dreamweaver](https://reader036.vdocuments.pub/reader036/viewer/2022062520/5681650f550346895dd788cf/html5/thumbnails/36.jpg)
Prenez votre projet
Mettez donc votre menu sous forme de barre de menu à plusieurs niveaux