Mars 2013 Grégory Petit

Présentation au sujet: "Mars 2013 Grégory Petit"— Transcription de la présentation:

1 mars 2013 Grégory Petit http://lrcm.com.umontreal.ca/greg/ART6017/

2 Intégration Web

3 Rappel Ne pas mettre de caractères accentués, despace, 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.

4 Rappel Cré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 larborescence du site (menu, sous menus, etc.)

5 Configuration du site - local

6 Configuration du site - serveur

7 Choisissez le nom que vous voulez Bien choisir SFTP Mettre cette adresse Votre P0xxxxxxx Votre mot de passe DGTIC Testez votre connexion Mettre ce dossier par défaut Rajoutez /~[votre P0xxx]/ à la fin

8 Configuration du site - serveur

9 Connexion au serveur

10 Synchronisation avec le serveur Il est conseillé de travailler sur la copie locale de vos fichier, puis ensuite deffectuer 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.

11 Synchronisation avec le serveur Bien vérifier quon est dans la version locale avant de faire la synchronisation

12 Synchronisation avec le serveur Toujours sélection Site Entier

13 Synchronisation avec le serveur Liste des modifications entre la copie locale et la copie sur le serveur

14 Gestion des droits des fichiers Votre site ne sera pas accessible si vous ne modifiez pas les droits daccès à vos fichiers. Vous devez donc donner laccès à vos fichiers à tout le monde! Pour les droits daccès aux fichiers sur le serveur, donner dabord les bons droits daccès au dossier avant de donner les droits daccès aux fichiers qui sont dans ce dossier.

15 Gestion des droits des fichiers Bien vérifier que vous vous êtes sur la copie du serveur avant de toucher aux droits daccès. Clic droit sur le fichier puis "Gérer les permission"

16 Tout le monde doit pouvoir lire Tout le monde doit pouvoir exécuter Écriture seulement pour le propriétaire Gestion des droits - dossiers

17 Tout le monde doit pouvoir lire Écriture et exécution seulement pour le propriétaire Gestion des droits - fichiers

18 Afficher votre site sur le serveur Une fois que tout ça est bien configuré, vous pouvez afficher votre site sur le serveur. Ladresse est : http://www-bac.esi.umontreal.ca/~p0xxxxxx/ en mettant votre p zéro.

19 Éléments complexes de Dreamweaver

20 Éléments complexes Ils 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 doutils dinsertion.

21 Barre de Menu

22 Barre de Menu - Modification

23 En fait, ce sont des liens dans des listes! Dreamweaver se charge ensuite du comportement. Pour modifier le texte et la cible dun élément de la barre de menu, il faut modifier la balise de cet élément! Penser à donner les droits daccès aux fichiers du répertoire SpyAssets pour que cela fonctionne sur le serveur.

24 Barre de Menu - Modification Menu ayant un sous-menu Élément du sous-menu Ne pas supprimer car cest le comportement du menu!

25 Onglets

26 Onglets - Modification

27 Les onglets sont dans des listes. Le contenu des onglets sont dans des. Dreamweaver se charge ensuite du comportement. Pour modifier le texte dun onglet, il faut modifier la balise de cet élément! Pour modifier le contenu dun onglet, il faut modifier le contenu de la balise associé à cet onglet. Comme nimporte quelle, on peut mettre ce quon veut dedans. Penser à donner les droits daccès aux fichiers du répertoire SpyAssets pour que cela fonctionne sur le serveur.

28 Onglets - Modification Titre de longlet Contenu de longlet1 Ne pas supprimer car cest le comportement des onglets

29 Accordéon

30 Accordéon - Modification

31 Un accordéon est organisé en panneaux et on peut en avoir autant quon veut! Dreamweaver se charge ensuite du comportement. Pour modifier le titre dun panneau, il faut modifier la première balise du panneau! Pour modifier le contenu dun panneau, il faut modifier le contenu de la seconde balise de ce panneau. Comme nimporte quelle, on peut mettre ce quon veut dedans. Penser à donner les droits daccès aux fichiers du répertoire SpyAssets pour que cela fonctionne sur le serveur.

32 Accordéon - Modification Titre du panneau Contenu du panneau Ne pas supprimer car cest le comportement des onglets Panneau

33 Panneau escamotable

34 Panneau escamotable - Modification Même comportement que pour le panneau dun accordéon!

35 Pratique

36 Prenez votre projet Mettez donc votre menu sous forme de barre de menu à plusieurs niveaux

37 Des questions??? Merci de votre attention! gregory.petit@umontreal.ca http://lrcm.com.umontreal.ca/greg/ART6017/