5 décembre 2012 Grégory Petit

Transcription

1 5 décembre 2012 Grégory Petit

2 La semaine dernière Les formulaires Les champs de formulaire

3 Et donc on fait quoi aujourd hui? Intégration Web Éléments complexes de Dreamweaver

4 Intégra;on Web

5 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, 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.

6 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 l arborescence du site (menu, sous menus, etc.)

7 Configura;on du site - local

8 Configura;on du site - serveur

9 Configura;on du site - serveur Choisissez le nom que vous voulez Bien choisir SFTP Me7re ce7e adresse Votre P0xxxxxxx Votre mot de passe DGTIC Testez votre connexion Me7re ce dossier par défaut Rajoutez /~[votre P0xxx]/ à la fin

10 Configura;on du site - serveur

11 Connexion au serveur

12 Synchronisa;on avec le serveur Il 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.

13 Synchronisa;on avec le serveur Bien vérifier qu on est dans la version locale avant de faire la synchronisation

14 Synchronisa;on avec le serveur Toujours sélection Site Entier

15 Synchronisa;on avec le serveur Liste des modifications entre la copie locale et la copie sur le serveur

16 Ges;on des droits des fichiers Votre 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.

17 Ges;on des droits des fichiers Bien 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"

18 Ges;on des droits - dossiers Tout le monde doit pouvoir lire Tout le monde doit pouvoir exécuter Écriture seulement pour le propriétaire

19 Ges;on des droits - fichiers Tout le monde doit pouvoir lire Écriture et exécution seulement pour le propriétaire

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

21 Éléments complexes de Dreamweaver

22 É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 d outils d insertion.

23 Barre de Menu

24 Barre de Menu - Modifica;on

25 Barre de Menu - Modifica;on En 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.

26 Barre de Menu - Modifica;on Menu ayant un sous- menu Élément du sous- menu Ne pas supprimer car c est le comportement du menu!

27 Onglets

28 Onglets - Modifica;on

29 Onglets - Modifica;on Les 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.

30 Onglets - Modifica;on Titre de l onglet Contenu de l onglet1 Ne pas supprimer car c est le comportement des onglets

31 Accordéon

32 Accordéon - Modifica;on

33 Accordéon - Modifica;on Un 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.

34 Accordéon - Modifica;on Panneau Titre du panneau Contenu du panneau Ne pas supprimer car c est le comportement des onglets

35 Panneau escamotable

36 Panneau escamotable - Modifica;on Même comportement que pour le panneau d un accordéon!

37 Atelier

38 Prenez votre travail n 2 Vous avez tous fait une sorte de menu pour votre TP2. Mettez donc votre menu sous forme d onglet ou de barre de menu!

39 Des questions??? Merci de votre attention! A la semaine prochaine! gregory.petit@umontreal.ca