Notes pour l'utilisation d'Expression Web - G. Barmarin 2008-2009 - EICW - Formation Webmaster
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
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 /216 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 /21Les 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 /217 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 /21zone 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 /218 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 /21Fig 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 /219 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 /21s’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 /2110 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 /21Composer 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 /2111 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 /21Vous pouvez aussi lire
