Notes pour l utilisation d Expression Web

EICW Formation Webmaster Notes pour l utilisation d Expression Web G. Barmarin 2008-2009 1 /21

Table des matières 1 Introduction... 3 2 Installer Expression Web... 4 3 Explorer et personnaliser l interface utilisateur... 5 3.1 La barre de menu... 6 3.2 La barre d outils «Eléments communs»... 6 3.3 La gestion des volets de tâches... 6 4 Ouvrir un site existant avec Expression Web... 7 5 Afficher différentes vues d un site... 8 5.1 Le mode «Dossiers»... 8 5.2 Le mode «Rapports»... 8 5.3 Le mode «Liens Hypertexte»... 9 5.4 Le mode «Site Web Distant»... 9 6 Explorez une page web...11 7 Utiliser EXPRESSION WEB en respectant les standards du web...13 7.1 Vérifier et résoudre les problèmes de validité W3C avec EXPRESSION WEB...13 7.2 Résoudre les problèmes d accessibilité avec EXPRESSION WEB...13 7.3 Choisir le bon DOCTYPE avec EXPRESSION WEB...14 7.4 Améliorer le rendu entre les différents navigateurs avec EXPRESSION WEB...14 8 Utiliser les feuilles de style avec EXPRESSION WEB...15 9 Créer un nouveau site avec EXPRESSION WEB...17 10 Créer des formulaires avec EXPRESSION WEB...19 11 Bibliographie...21 2 /21

1 Introduction L utilisation d un simple éditeur de texte pour créer vos pages web devient vite pénible. Aucune facilité n est prévue pour insérer du code type ou pour indiquer les erreurs de frappe ou de syntaxe ou encore pour modifier les liens concernés par un changement de nom de fichier. Vous devez tout gérer vous-même avec plus ou moins de bonheur. D un autre côté, personne ne renie l utilisation d un logiciel de traitement de texte pour écrire et structurer un document, alors pourquoi se passer d un utilitaire pour gérer la création et la structure de nos pages web? Il en existe plusieurs comme par exemple Dreamweaver d Adobe ou Expression Web de Microsoft (qui remplace l ancien Frontpage). Ce sont des outils puissants parfois un peu «usine à gaz», mais vite indispensables pour gérer des sites un peu volumineux. Tout comme un traitement de texte ne vous dispense pas de connaître les règles de base de la mise en page et de l orthographe, les logiciels intégrés de création de site web ne vous dispensent pas de connaître l HTML et les CSS afin d obtenir les meilleures performances du programme. Nous allons dans les pages qui suivent découvrir Expression Web de Microsoft. 3 /21

2 Installer Expression Web Le logiciel s installe classiquement à partir d un CD-Rom gravé au moyen de l image ISO que vous avez téléchargée sur le site http://msdn20.e-academy.com/eicw_sciences; vous avez normalement reçu un login et un mot de passe pour accéder aux téléchargements. Une fois le programme installé, pour lancer l application, utilisez soit l icône qui a été créée sur le bureau lors de l installation, soit le menu Démarrer > Tous les programmes > Microsoft Expression >Expression Web. Une page nommée sans_titre_1.htm apparaît lorsque vous lancez Expression Web la première fois. Si vous avez ouvert un site avec Expression Web lors de votre session précédente, celui-ci s ouvrira par défaut lors de votre nouvelle session. 4 /21

3 Explorer et personnaliser l interface utilisateur Si vous êtes habitués aux applications de la suite Office de Microsoft, vous ne serez pas dépaysé par l interface d Expression Web. Presque tout ce que vous aurez à y faire pourra l être à partir d un des douze menus de la barre de menus. Ces menus sont «intelligents», c'est-à-dire qu au fur et à mesure, les éléments que vous utilisez le plus souvent montent en tête de liste et ceux que vous utilisez le moins descendent. Comme toujours, les éléments de la liste en grisé sont ceux qui ne peuvent être utilisés dans le contexte où vous vous trouvez. En plus de la barre de menus et de la barre d outils, Expression Web inclut une série de panneaux qui forment votre espace de travail. Ces panneaux sont configurables, vous pouvez les redimensionner ou les rendre flottants. Fig.1 Vue globale de l interface utilisateur d Expression Web 5 /21

3.1 La barre de menu Le menu fichier permet classiquement d ouvrir un fichier existant ou un site, de créer un nouveau fichier ou un nouveau site (option nouveau faisant apparaître un sous-menu pour déterminer ce que l on veut créer), d enregistrer un fichier etc. Notez que l on ne peut créer un répertoire que si l on a ouvert un site. On retrouve bien un environnement auquel Windows et la suite Office nous a habitué. Explorez les menus Edition, Affichage, Insertion, Format, Outils, Tableau, Site, Vue des données, Volets des tâches, Fenêtre et Aide. 3.2 La barre d outils «Eléments communs» Sous la barre des menus figure la barre d outils «Eléments communs». Elle incorpore les outils les plus fréquemment utilisés ; une infobulle apparaît au survol de chaque icône pour informer sur son usage. Comme toujours, vous pouvez modifier le contenu de cette barre via la petite flèche qui la termine à droite. Fig 2 : la barre d outils «Eléments communs» Vous pouvez rajouter d autres barres d outils en faisant un clic droit sur la barre «Eléments communs». 3.3 La gestion des volets de tâches Cliquez dans la barre des menus sur «Volets de tâches» ; une longue liste de volets disponibles apparaît. Les groupes de volets sont séparés par des lignes horizontales. Chaque groupe entre les lignes apparaît dans la même zone de volets. En cliquant sur un volet donné dans la liste, vous le faites apparaître dans sa zone. Remarquez que vous pouvez également faire apparaître un volet en utilisant les onglets présent en tête de chaque zone. Fig 3 Le volet «Boîte à outils» Une flèche vous permet de faire défiler les différents onglets dans le volet. Un bouton permet de maximiser le volet, un autre de le fermer 6 /21

4 Ouvrir un site existant avec Expression Web EXPRESSION WEB fait la différence entre ouvrir une page ou ouvrir un site. Quelle est cette différence? Un site est constitué pour EXPRESSION WEB d un groupement logique de dossiers contenant toutes les pages, toutes les images et tous les autres fichiers nécessaires à l affichage du site. A ces dossiers, il faut encore rajouter dans la plupart des cas des «métadonnées» qui permettent par exemple à EXPRESSION WEB de reconnaître si un fichier a été modifié et de mettre à jour les liens vers les fichiers en cas de changement de nom ou d inclure les données concernant le serveur sur lequel le site a été publié. Dans le menu Fichier, la commande «Ouvrir un site» ouvre donc un site complet en activant les données de publication, la mise à jour des liens en cas de re-nommage de fichier etc. La commande «Ouvrir» seule se contente d ouvrir un fichier unique sans que les modifications effectuées n influencent aucun autre fichier. Vous pouvez pour vous entraîner ouvrir un site modèle créé pour vous initier à EXPRESSION WEB. Dans le menu fichier, cliquez sur «Ouvrir le site», naviguez dans la boîte de dialogue vers le dossier Documents/Microsoft Press/Expression Web SBS/ Sample Sites/ et cliquez par exemple sur CH1 puis sur «ouvrir». Avec un site complet ouvert, vous voyez la liste complète des fichiers le composant dans le volet en haut à gauche et dans la fenêtre principale qui s ouvre par défaut en mode dossier. Si vous cliquez sur un dossier dans le volet de gauche, son contenu apparaît dans l espace de travail central (comme dans l explorateur de fichier Windows). Si vous cliquez sur un fichier html ou css, celui-ci s ouvre dans l espace de travail. Si vous avez sélectionné une image, le programme de gestion d images associé à l extension de l image s ouvre automatiquement. Si vous renommez un élément (dossier ou fichier), tous les liens présents dans votre site concernés par ce changement seront automatiquement mis à jour Génial! Encore plus fort : vous pouvez créer dans le volet de gauche un nouveau dossier (par exemple un dossier nommé css s il n existe pas encore) en faisant un clic droit/nouveau/dossier ; vous pouvez y faire glisser votre feuille de style qui se trouvait à la racine du site et tous les liens de vos pages vers la feuille de style seront mis à jour. Vous pouvez encore ensuite déplacer le dossier «css» avec son contenu vers un sous-dossier quelconque, à nouveau la mise à jour des liens sera effectuée automatiquement. C est ce mode d affichage «dossier» que l on emploiera donc pour concevoir la structure d un nouveau site et la modifier plus tard le cas échéant. 7 /21

5 Afficher différentes vues d un site A côté du mode «Dossier» qui est choisi par défaut, EXPRESSION WEB vous propose plusieurs autres modes de visualisation de votre site pour vous aider à mieux le concevoir ou à mieux le gérer. Lorsque vous avez ouvert un site sans encore ouvrir un fichier de ce site, vous avez le choix entre 4 vues différentes via un menu se trouvant en bas de votre espace de travail : «Dossiers» (le mode par défaut), «Site Web Distant», «Rapports» et «Liens Hypertexte». 5.1 Le mode «Dossiers» Le mode dossier, vous le connaissez déjà, c est le mode d affichage par défaut que nous avons rencontré à l ouverture du site. Nous allons explorer les trois autres modes : 5.2 Le mode «Rapports» Cliquez sur l onglet «Site Web» en haut de l espace de travail pour passer au mode site web si vous l avez déjà quitté. Choisissez le bouton «Rapports» dans le menu du bas de votre espace de travail. EXPRESSION WEB affiche une série de données statistiques concernant votre site. 5 types de rapports peuvent être affiche : «Résumé du site» (affiché par défaut, elle permet une vue globale du site et de ses problèmes ; en cliquant sur une rubrique on obtient plus d informations concernant celle-ci), «Fichiers» (permet entre autres d avoir toutes les informations sur vos fichiers :titre, taille, type, date de modification etc.), «Contenu partagé» (permet entre autres de voir quelles feuilles de style sont liées à quelles pages et d analyser les pages dynamiques) «Problèmes» (permet entre autres de tester les liens et de détecter les pages qui ne sont liées à aucune autre) «Flux de travail» (permet entre autres de gérer les projets de site web sur lesquels travaillent plusieurs personnes et leur publication en ligne) Fig 4 Mode «Rapports» 8 /21

5.3 Le mode «Liens Hypertexte» Choisissez le bouton «Liens Hypertexte» dans le menu du bas de votre espace de travail. Sélectionnez une page dans le volet d exploration à gauche et EXPRESSION WEB affichera tous les liens présents sur cette page (images, feuilles de style, liens vers d autres fichiers internes ou vers des pages web externes à votre site) sous forme d arborescence. Si vous sélectionnez dans le volet de gauche, la racine de votre site, c est d office la page d index qui servira de point de référence pour l arborescence. Fig 5 Mode Liens hypertexte 5.4 Le mode «Site Web Distant» Cette vue vous permet de configurer une connexion FTP entre EXPRESSION WEB tournant sur votre ordinateur et un serveur web distant. Pour cela choisissez en haut de la fenêtre de travail «Propriétés du site web distant». Vous devrez indiquer l adresse du serveur web distant, le nom du dossier ou du sous-dossier dans lequel le site doit être publié, votre login et votre mot de passe, exactement comme vous avez dû le faire avec Filezilla lors des cours précédents. Toujours dans le haut de votre espace de travail, le bouton «Optimiser le code html publié» vous permet via une boîte de dialogue de supprimer les commentaires, les espaces blancs etc. lors de la publication pour optimiser vos pages. L onglet «Publication» permet de ne transférer que les pages qui ont été modifiées. 9 /21

Fig 6 Mode «Site Web Distant» 10 /21

6 Explorez une page web Dans la liste des dossiers du volet d exploration, double-cliquez sur une page html. La page s ouvre dans l espace de travail d EXPRESSION WEB. Vous avez le choix entre trois modes de travail via les trois boutons qui se trouvent au bas de votre espace de travail : mode création, mode fractionné et mode code. Ma préférence va au mode fractionné qui divise l espace de travail en deux partie : le code de la page s affiche dans la moitié supérieure, le mode création occupe la partie inférieure ; ce mode est mon préféré parce qu il permet de jouer sur le code ou sur les éléments de la page en utilisant de manière appropriée l un ou l autre mode selon le type d action et en constatant immédiatement le résultat aussi bien au niveau du code que de l aspect de la page. Seul inconvénient : votre écran doit être suffisamment grand que pour pouvoir afficher à la fois une partie significative du code et de la page. La proportion de l espace de travail consacrée au code et à l affichage de la page peut être modifiée en plaçant la souris sur la ligne de séparation et en la faisant glisser vers le haut ou vers le bas en maintenant enfoncée le bouton gauche de la souris. Vous pouvez ainsi moduler votre espace à votre propre convenance. Remarquez que lorsque vous sélectionnez un élément que ce soit via le code ou via l affichage de la page, son équivalent dans l autre mode est également sélectionné. Fig 7 Mode fractionné 11 /21

Les boutons «Création» et «Code» en bas d espace de travail permettent de sélectionner l un de ces deux modes qui occupe alors tout l espace de travail. En haut de votre espace de travail apparaît quel que soit le mode, une barre sélecteur de balise rapide. Au passage sur une des balises affichées, une flèche apparaît à droite de la balise. En cliquant sur cette flèche, vous faites apparaître un menu contextuel qui vous permet de voir ce que vous pouvez faire sur cette balise : sélectionner la balise complète, uniquement son contenu, modifier la balise, supprimer la balise, insérer du code html dans la balise, l entourer d une autre balise, lui donner des paramètres de positionnement ou encore afficher ses propriétés de style. Fig 8 Menu de sélection de balise rapide Remarquez que quand vous passez sur une balise dans le menu de sélection de balise rapide, la zone qu elle représente s entoure d un cadre bleu dans le mode création ; une fois la balise sélectionnée en cliquant dessus, son équivalent en code est surligné en gris et la zone couverte par la balise est couverte d un voile coloré bleu en mode création. En bas à gauche, le volet propriété CSS (utilisez les petites flèches gauche/droite pour le faire apparaître si vous ne le voyez pas) affiche l ensemble des styles appliqués à l élément sélectionné. Si l élément est potentiellement influencé par plusieurs styles hérités, l ensemble de ces styles apparaissent à la suite les un des autres. En passant avec la souris sur l intitulé de chaque style une infobulle apparaît avec les règles contenues. Au-dessous, toutes les propriétés sont présentes avec leur valeur. Un clic gauche sur une propriété permet de la modifier. Observez maintenant le volet en bas à droite intitulé gérer les styles et sélectionnez l onglet gérer les styles: tous les styles de la page sont repris et affichent leur contenu au survol de la souris ; clic droit suivi du choix «Modifier le style» ouvre une boîte de dialogue qui vous permet de paramétrer complètement le style. Déconcertant de facilité non? (trop peut-être?) Nous reviendrons plus loin sur l utilisation approfondie de ces volets pour jongler avec les feuilles de style. 12 /21

7 Utiliser EXPRESSION WEB en respectant les standards du web Le développement d un site web moderne doit respecter plusieurs principes fondamentaux : la validité du code, l accessibilité des pages, la compatibilité avec les différents navigateurs et la séparation du contenu et de la présentation. EXPRESSION WEB fournit différents outils pour permettre le développement de sites web conformes aux standard et s inscrivant dans les meilleurs pratiques. Commençons par apprendre à vérifier la validité du code par rapport aux règles du W3C (World Wide Web Consortium, http://www.w3c.org ). 7.1 Vérifier et résoudre les problèmes de validité W3C avec EXPRESSION WEB Le rôle du W3C est de rédiger les règles (normes) qui définissent ce qui doit être considéré comme du code valide ou non. Le consortium fournit d ailleurs un outil de vérification de votre code en ligne à l adresse suivante : http://www.validator.w3c.org. En principe, le code généré par EXPRESSION WEB sera conforme aux normes du W3C, car il a été conçu dans cette philosophie. Cependant puisqu en mode code vous pouvez interagir sur le code, vous pouvez obtenir au final un code non conforme. Pour éviter cela, EXPRESSION WEB propose un outil de vérification de la validité du code d une page web. Nous allons apprendre à l utiliser. Tout d abord, si EXPRESSION WEB détecte dans votre code une erreur, il la soulignera en rouge dans le mode code ou bien il surlignera en jaune la balise posant problème. Dans les deux cas, au survol de la balise marquée comme problématique, une infobulle apparait indiquant clairement pourquoi EXPRESSION WEB la considère comme une erreur. La touche F9 permet de se déplacer d erreur en erreur sur une page comportant plusieurs erreurs. Dans la bas de l écran d EXPRESSION WEB, vous verrez également apparaître une ou deux icones indiquant les erreurs (par exemple :erreur de code détectée ou incompatibilité html) à nouveau vous pouvez accéder à plus d information sur ces icones en passant la souris dessus. Vous pouvez effectuer une vérification du code d une page en utilisant le menu «outils» de la barre de menu et en sélectionnant «rapport de compatibilité» puis en suivant les boîtes de dialogue. Une nouvelle fenêtre s ouvre au bas de la zone de travail avec le résultat des tests. Vous pouvez fermer cette fenêtre en cliquant sur la croix en bas à gauche. 7.2 Résoudre les problèmes d accessibilité avec EXPRESSION WEB L accessibilité d une page est déterminée par la capacité de cette page à être analysée et reproduite sous la forme adéquate par les périphériques utilisés par les malvoyants ou tous ceux qui ont recours à des systèmes de consultation de page web particuliers. Cette accessibilité est de manière générale liée à la structuration des pages, à l utilisation intensive et intelligente des balises dédicacées à l accessibilité (comme la balise alt pour les images) et à une attention particulière aux technologies utilisées pour les éléments clés de la page notamment pour la navigation (en évitant ou en présentant une alternative aux menus en flash ou en javascript par exemple). A nouveau, le menu «outils» de la barre de menus vous permet de choisir dans la boîte de dialogue de l option «Rapport d accessibilité» de faire un test sur toutes les pages ou sur la page en cours selon différentes normes. Le résultat s affiche dans une fenêtre au bas de la 13 /21

zone de travail comme pour le test de compatibilité vu précédemment. Vous pouvez utiliser l icône «Générer le rapport html» pour garder une trace de vos tests. 7.3 Choisir le bon DOCTYPE avec EXPRESSION WEB Le DOCTYPE est la déclaration qui figure au début d un fichier html/xhtml et qui indique au navigateur la norme que suit le document qu il va lire afin qu il puisse l afficher correctement en suivant les règles de cette norme. Le choix d un DOCTYPE correct permet donc de prévoir le rendu du navigateur. De plus, une page sans DOCTYPE ou avec une déclaration incorrecte ou incomplète ne sera pas une page valide selon le W3C. Pour changer de DOCTYPE, sélectionnez la ligne du DOCTYPE existant en cliquant sur le numéro de ligne en face d elle, puis faites CTRL+entrée et choisissez le DOCTYPE qui vous convient. Si une partie du code n est pas compatible, elle sera soulignée et au passage de la souris, une infobulle indique l incompatibilité et propose une action pour y remédier. Contrairement à Dreamweaver, les changements ne sont pas exécuter automatiquement, dommage! En conclusion, avec EXPRESSION WEB, il est fortement conseillé de commencer vos pages avec le DOCTYPE définitif! Par défaut, le DOCTYPE utilisé par EXPRESSION WEB est XHTML 1.0 transitional. Si vous souhaitez modifier cela choisissez le menu «Outils» de la barre de menu, puis «Options de l éditeur de page» et sélectionner l onglet «Opérations d auteur». Ceci vous amène à une boîte de dialogue qui permet de choisir le DOCTYPE par défaut lors de l ouverture d une nouvelle page. 7.4 Améliorer le rendu entre les différents navigateurs avec EXPRESSION WEB Pour vérifier que vos pages sont affichées correctement (si pas identiquement) dans les principaux navigateurs, vous devriez installer sur votre ordinateur non seulement Internet Explorer (qui s installe tout seul en même temps que Windows ou Vista) mais aussi Firefox, Opéra et Safari. Une fois ces programmes installés, vous allez modifiez la liste des explorateurs disponibles dans EXPRESSION WEB. Pour cela, dans le menu «Fichier», vous allez choisir «Afficher dans le navigateur», puis «Modifier la liste des navigateurs». Si tous les navigateurs sont affichés, cochez-les pour pouvoir les utiliser, sinon utilisez le bouton «Ajouter», parcourez le disque jusqu au programme du navigateur et sélectionnez-le. F12 vous permet de lancer une visualisation dans votre navigateur préféré ; si vous voulez utiliser un autre navigateur, il faut passer par l option «Fichier/Afficher dans le navigateur» et choisir le nom du navigateur ou plus simplement utiliser l icône de la barre d outils communs et utiliser la flèche pour choisir le navigateur. L outil ««Vérificateur de compatibilité» permet également de tester les problèmes éventuels avec les anciennes versions d Internet Explorer 14 /21

8 Utiliser les feuilles de style avec EXPRESSION WEB Les feuilles de style permettent de séparer le contenu de la présentation et offrent plus de possibilités que l html seul. L utilisation des feuilles de style externes et des feuilles de style dédiées à un média particulier permet aussi de faciliter la maintenance d un site. EXPRESSION WEB est fait pour l utilisation intensive des feuilles de style. Nous avons déjà rencontré le volet propriétés CSS en bas à gauche. Il est important de configurer ce volet pour afficher en tête de liste les propriétés qui ont été définies (option Afficher les propriétés définies en haut) ; sinon, il vous faudra parcourir l ensemble de la liste avec l ascenseur pour retrouver celle qui ont fait l objet d une définition parmi toutes les propriétés possibles! Pour les propriétés demandant de définir une couleur, un clic sur la propriété pour la sélectionner fait apparaître une flèche qui donne accès d abord aux couleurs standard. Si vous le souhaitez, vous pouvez utiliser le bouton «autres couleurs» qui vous ouvrira une palette plus importante ou encore «Personnaliser» qui ouvre une palette encore plus grande. Vous pouvez aussi utiliser une pipette que vous pouvez déplacer n importe où sur l écran (par exemple au sein d une image du site pour harmoniser la teinte de l élément avec cette partie de l image) pour choisir la couleur correspondante. Fig 9 Outils de sélection de couleur. 15 /21

Fig 10 Outil de sélection de couleurs personnalisées Chaque propriété peut ainsi être sélectionnée et la flèche apparaissant alors vous donne accès aux différentes possibilités offertes par CSS. Pour les valeurs numériques, cliquez sur«choisissez une longueur» dans la liste déroulante et une fenêtre s ouvre vous permettant d indiquer un chiffre et l unité de mesure correspondante (par exemple 10px). Fig 11 Sélection de longueur Vous pouvez également éditer directement la feuille de style en l ouvrant dans EXPRESSION WEB. Pour les feuilles de style, il n existe que le mode «texte» ; EXPRESSION WEB possède un éditeur intelligent qui vous suggère dans une liste déroulante tous les sélecteurs (balises) possibles et les propriétés existantes ainsi que leurs valeurs. L éditeur colore les éléments de la feuille de style afin de distinguer les sélecteurs (en violet) des propriétés (en rouge) et de leur valeur (en bleu). Fig 12 Edition d une feuille de style 16 /21

9 Créer un nouveau site avec EXPRESSION WEB La première étape pour créer un site consiste à créer un dossier racine qui contiendra toutes les pages, toutes les images, tous les fichiers et tous les dossiers qui se trouveront dans le site. Nous allons créer un site vide et une page qui servira de modèle aux autres.. Dans le menu «Fichier», choisissez «Nouveau», puis «Site Web». Une boîte de dialogue s ouvre. Fig 13 Boîte de dialogue nouveau site Cliquez sur l onglet «Site Web» Sélectionnez «Général», puis «Site Web Vide» et parcourez votre disque jusqu à l emplacement où vous voulez placer les fichiers de votre site. Terminez en cliquant sur «OK» ce qui créera le site et fermera la boîte de dialogue. Dans le volet «Liste des dossiers» en haut à gauche, cliquez sur l icône représentant un dossier pour créer par exemple un répertoire nommé «images», un autre nommé «css» et un troisième nommé «documents». Cliquez ensuite sur l icône représentant une feuille blanche pour créer une page que vous aller nommer index.html. Vous pouvez le cas échéant partir d un modèle de page existant fourni avec Expression Web. Pour cela, dans la liste nouveau document, cliquez sur page. Dans l onglet Page de la boîte de dialogue Nouveau, cliquez sur disposition CSS dans la première colonne et choisissez un des modèles (deux colonnes avec la colonne de gauche fixe, trois colonnes ou n importe quel autre. Le dessin de la structure correspondante apparaît dans la troisième colonne. Cliquez sur OK, une page nommée sans_titre1 apparaît dans la zone de travail ; cette page contient les éléments de structure (div) correspondants à la disposition choisie et 17 /21

s appuie sur une feuille de style externe qui a également été créée sous le nom sans_titre1.css. Attention, il ne s agit que d une base qui vous fera gagner un peu de temps, mais ces modèles ne sont ni complets, ni parfaits! Fig 14 Boîte de dialogue pour le choix des modèles de page 18 /21

10 Créer des formulaires avec EXPRESSION WEB Expression Web vous propose plusieurs outils pour vous aider à créer des formulaires. Ils sont disponibles dans le volet Boîte à outils et rassemblés dans le groupe intitulé Contrôles de formulaire. Fig 15 Boîte à outil Formulaire Positionnez votre curseur à l endroit où vous voulez insérer un formulaire et double-cliquez sur «Formulaire». Un formulaire vide est inséré dans la page. Insérer le nom d un champ sous forme de texte puis double cliquez sur «entrée (texte)» pour insérer un champ texte. Pour paramétrer le champ texte placer la souris sur le champ et cliquez sur le bouton droit, une boîte de dialogue apparaît. Fig 16 Boite de dialogue «Propriétés de la zone de texte» 19 /21

Composer de la même manière votre formulaire et terminer par un bouton «Entrée (soumettre)» et un bouton «Entrée (rétablir)». Cliquez sur le bouton droit n importe où dans la zone du formulaire en mode création et choisissez propriétés du formulaire pour ouvrir la boîte de dialogue permettant de paramétrer l envoi du formulaire. Fig 17 «Propriétés du formulaire» Le bouton «options» permet de choisir le type d envoi (Post ou Get) et le fichier de script auquel l email doit être envoyé. Nous reviendrons sur le paramétrage des formulaires dans la suite du cours. 20 /21

11 Bibliographie Expression Web étape par étape, Chris Leeds, 2008, ISBN : 978-2-10-051570-7 +/- 30 Par Jean-Marie Cocheteau +/- 22 chez Libris-Agora à Louvain-La-Neuve (ISBN : 978-2-10-051798-5 ) Tutoriel vidéo en français : http://www.microsoft.com/france/vision/webcastmsdn.aspx?eid=f2ecf299-79fd-4d74-81b0- dae003e49539 (en six partie, le lien mène à la première) 21 /21