SI28 – Ecriture interactive et multimédia Sylvain Slaton – Pierre Laporte.

Présentation au sujet: "SI28 – Ecriture interactive et multimédia Sylvain Slaton – Pierre Laporte."— Transcription de la présentation:

1 SI28 – Ecriture interactive et multimédia Sylvain Slaton – Pierre Laporte

2 Dreamweaver 8 – Séance 2 Pré-requis : Interface type « Designer » Menu 'Fenêtre' > Présentation de l'espace de Travail > Designer

3 Dreamweaver 8 – Séance 2 Les formulaires

4 Dreamweaver 8 – Séance 2 Les formulaires Objectifs : Saisir des informations Les transmettre au site Internet Exemple : L'identification sur le site SI28

5 Dreamweaver 8 – Séance 2 Les formulaires Les deux types de formulaires : GET ◦ Envoi des données dans l'URL cible http://....../index.php?page=visite&galerie=picasso &... ◦ Taille de l'URL limitée (512 caractères) POST ◦ Envoi invisible des données pour le client ◦ Utile pour les gros volumes d'information

6 Dreamweaver 8 – Séance 2 Les formulaires Passer à la barre d'outils 'Formulaires' Ajouter un formulaire, une zone de texte et un bouton Nommer la zone de texte 'email' Modifier le formulaire Action: http://www.etu.utc.fr/~plaporte

7 Dreamweaver 8 – Séance 2 Les comportements

8 Dreamweaver 8 – Séance 2 Les comportements Objectifs : Ajouter des fonctionnalités au site Ajouter de l'interactivité Optimiser les pages Internet Exemples : Validation d'e-mail Modification de la page Technologie AJAX

9 Dreamweaver 8 – Séance 2 Les comportements Pour créer un comportement, il faut associer une action à un objet pour un événement donné Action : code JavaScript Objet : image, formulaire, paragraphe,... Événement : circonstances du déclenchement (onClick, onSubmit, onFocus,...)

10 Dreamweaver 8 – Séance 2 Les comportements Cliquer sur la bordure rouge pour sélectionner le formulaire Aller dans l'inspecteur de balises, rubrique 'Comportements'

11 Dreamweaver 8 – Séance 2 Les comportements Ajouter un comportement de type 'Valider le formulaire' Cocher la case 'Obligatoire' Cocher l'option 'Adresse électronique' Nous venons d'associer l'évènement 'Valider le formulaire' à l'objet 'Formulaire' pour l'évènement 'onSubmit'

12 Dreamweaver 8 – Séance 2 Les calques

13 Dreamweaver 8 – Séance 2 Les calques Objectifs : Proposer une alternative à la mise en page par tableaux Mieux structurer les pages Internet Permettre un meilleur référencement Les calques peuvent être placés partout, et peuvent contenir n'importe quel objet.

14 Dreamweaver 8 – Séance 2 Les calques Passer à la barre d'outils 'Mise en forme' Insérer une image de fond Ajouter trois calques pour chacune des boites Ajouter du texte

15 Dreamweaver 8 – Séance 2 Le CSS

16 Dreamweaver 8 – Séance 2 Les CSS CSS = Cascading Style Sheet ou Feuilles de Style en Cascade Pourquoi le CSS? ◦ Séparer l’apparence du contenu ◦ Clarifier et alléger le code ◦ Pouvoir associer différents styles à un même contenu ◦ Maintenance et Réutilisation plus aisées

17 Dreamweaver 8 – Séance 2 Les CSS 3 façons d’utiliser le CSS : En tête de fichier html (comportement par défaut de Dreamweaver) Création de fichiers CSS séparés Inline CSS : utilisation de l’attribut style des balises html

18 Dreamweaver 8 – Séance 2 Les CSS 2 utilités au CSS: Redéfinition du style des balises html existantes (body, H1, H2, table… ) Création de classes de style réutilisables et applicables à n’importe quel élément du fichier html

19 Dreamweaver 8 – Séance 2 Les CSS Exercice et Manipulations: Création et association d’une feuille de style à un document existant Modification d’une feuille de style déjà existante Redéfinitions de balises et création de classes CSS Ressources: http://wwwetu.utc.fr/~plaporte/CSS.zip

20 Dreamweaver 8 – Séance 2 Les CSS Lien entre le CSS et les calques: Un calque est en réalité une balise avec des attributs CSS particuliers Un est un simple cadre qui peut contenir n’importe quoi, un sert à mettre en page L’attribut CSS « position » permet de déterminer si l’élément agira comme un calque ou non Le CSS permet donc, en plus de gérer l’apparence des éléments, de gérer la mise en page d’un document html et la position des éléments les uns par rapport aux autres

21 Dreamweaver 8 – Séance 2 Les CSS Illustration de la puissance du CSS: http:www.csszengarden.com Un seul document html Multiples fichiers CSS  Apparences totalement différentes, un œil non averti croirait à une multitudes de documents distincts

22 Dreamweaver 8 – Séance 2 Les Modèles (Templates)

23 Dreamweaver 8 – Séance 2 Les Modèles Pourquoi un modèle? ◦ Dans 99% des cas, la plupart des pages d’un site seront basées sur une même charte graphique et très souvent des éléments du site restent visible sur toutes les pages (menus de navigation, logo du site, copyright, etc.) ◦ A partir d’un certain nombre de pages, il est contraignant de devoir recopier tout ce contenu, ou devoir revenir sur chaque page lors d’une modification

24 Dreamweaver 8 – Séance 2 Les Modèles Avantages / Intérêt ◦ Création aisée de nouvelles pages sur un même modèle ◦ Modification en masse des pages du site Inconvénients ◦ Au final, le code du modèle est répété sur chaque page du site ◦ En pratique ne convient qu’à des sites assez basiques ◦ Technologie peu utilisée car elle dépend de Dreamweaver et ne fait pas le poids face aux véritables moteurs de Template dynamiques très répandus aujourd’hui

25 Dreamweaver 8 – Séance 2 Les Modèles Exercice et Manipulations: Création d’un nouveau modèle Régions verrouillées et régions modifiables Création d’une nouvelle page et association au modèle Modification massive en passant par le modèle Ressources:

26 Dreamweaver 8 – Séance 2 Les Scénarios

27 Dreamweaver 8 – Séance 2 Les Scénarios Pourquoi ne pas les utiliser ? Résultat médiocre pour beaucoup de travail Flash fait la même chose beaucoup mieux et beaucoup plus facilement Fonctionne mal ou pas du tout sous Firefox… Exemple de résultat : http://formation.paris.iufm.fr/~salvatore/drmw/txt/calqu.html

28 Dreamweaver 8 – Séance 2 Mise en ligne du site

29 Dreamweaver 8 – Séance 2 Mise en ligne du site Sur un répertoire local de l’UTC ◦ Modifier le site (Site > Modifier les sites) ◦ Mode de connexion (infos distantes > Accès > Local/Réseau) ◦ Choix du Répertoire distant : Z:\ public_html ◦ Placer le site dans le répertoire distant ◦ Accéder au site : http://www.utc.fr/~si28p07xxx/

30 Dreamweaver 8 – Séance 2 Mise en ligne du site Sur un répertoire local de l’UTC ◦ Modifier le site (Site > Modifier les sites) ◦ Mode de connexion (infos distantes > Accès > FTP) ◦ Choix de l’hôte (ftp.free.fr par exemple)ftp.free.fr ◦ Nom d’utilisateur et mot de passe ◦ Répertoire de l’hôte (public_html/www/ en général) ◦ Placer le site dans le répertoire distant (même méthode)