int gration web et l ments complexes dans dreamweaver n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Intégration Web et Éléments Complexes dans Dreamweaver PowerPoint Presentation
Download Presentation
Intégration Web et Éléments Complexes dans Dreamweaver

Loading in 2 Seconds...

play fullscreen
1 / 39

Intégration Web et Éléments Complexes dans Dreamweaver - PowerPoint PPT Presentation


  • 85 Views
  • Uploaded on

Intégration Web et Éléments Complexes dans Dreamweaver. 5 décembre 2012 Grégory Petit http://lrcm.com.umontreal.ca/greg/COM2580/. La semaine dernière …. Les formulaires Les champs de formulaire. Et donc on fait quoi aujourd’hui?. Intégration Web Éléments complexes de Dreamweaver.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Intégration Web et Éléments Complexes dans Dreamweaver' - amina


Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
int gration web et l ments complexes dans dreamweaver

Intégration Web et Éléments Complexes dans Dreamweaver

5 décembre 2012

Grégory Petit

http://lrcm.com.umontreal.ca/greg/COM2580/

la semaine derni re
La semaine dernière …
  • Les formulaires
  • Les champs de formulaire
et donc on fait quoi aujourd hui
Et donc on fait quoi aujourd’hui?
  • Intégration Web
  • Éléments complexes de Dreamweaver
rappel
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.
rappel1
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.)
configuration du site serveur1
Configuration du site - serveur

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

synchronisation avec le serveur
Synchronisation 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.
synchronisation avec le serveur1
Synchronisation avec le serveur

Bien vérifier qu’on est dans la version locale avant de faire la synchronisation

synchronisation avec le serveur2
Synchronisation avec le serveur

Toujours sélection Site Entier

synchronisation avec le serveur3
Synchronisation avec le serveur

Liste des modifications entre la copie locale et la copie sur le serveur

gestion des droits des fichiers
Gestion 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.
gestion des droits des fichiers1
Gestion 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"

gestion des droits dossiers
Gestion des droits - dossiers

Tout le monde doit pouvoir lire

Tout le monde doit pouvoir exécuter

Écriture seulement pour le propriétaire

gestion des droits fichiers
Gestion des droits - fichiers

Tout le monde doit pouvoir lire

Écriture et exécution seulement pour le propriétaire

afficher votre site sur le serveur
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 :

http://www-bac.esi.umontreal.ca/~p0xxxxxx/

en mettant votre p zéro.

l ments complexes
É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.
barre de menu modification1
Barre de Menu - Modification
  • 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.
barre de menu modification2
Barre de Menu - Modification

Menu ayant un sous-menu

Élément du sous-menu

Ne pas supprimer car c’est le comportement du menu!

onglets modification1
Onglets - Modification
  • 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.
onglets modification2
Onglets - Modification

Titre de l’onglet

Contenu de l’onglet1

Ne pas supprimer car c’est le comportement des onglets

accord on modification1
Accordéon - Modification
  • 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.
accord on modification2
Accordéon - Modification

Titre du panneau

Panneau

Contenu du panneau

Ne pas supprimer car c’est le comportement des onglets

panneau escamotable modification
Panneau escamotable - Modification

Même comportement que pour le panneau d’un accordéon!

prenez votre travail n 2
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!