Microsoft Expression Web 4.0 - Guide utilisateur de l'éditeur de site internet pour Windows
Conditions préalables
Chacun des participants devra disposer d'un PC et d'une connexion internet, PC avec système d'exploitation Windows (Vista, Seven ou Windows 10)
Projecteur avec grand écran recommandé
Prérequis
L'ensemble des participants devra être familiarisé avec l'utilisation d'un PC sous Windows et d'un logiciel de traitement de texte type WordObjectif du stage
Prendre en main le logiciel d'édition et de création de site web Microsoft Expression Web 4Sommaire de la formation
Présentation du logiciel Expression Web 4
- Installation et paramétrage du logiciel Expression Web
- Découverte de l'interface de l'éditeur et de l'espace de travail
Principes de fonctionnement
- Le site web et sa gestion
- Création d'une page web
- Titres et paragraphes
- Insertion d'images et de logos
- Établir un lien hypertexte
Sauvegardes
- Gestion de l'environnement de travail
- Avant publication
- De sécurité
Publication des données
- Visualisation avant publication
- Publication des modifications sur le web par FTP
- Synchronisation du site local vers distant
- Vérification des liens
Tests de fonctionnement et de navigation
Sensibilisation aux versions adaptatives de site web
Questions / Réponses
Le guide utilisateur du CMS WordPress
Présentation du logiciel Expression Web 4
Le logiciel développé depuis 2005 par Microsoft est une combinaison de
FrontPage
devenu obsolète et de suggestions de ses utilisateurs. Microsoft Expression Web 4 est
ainsi devenu l’éditeur Web préféré de nombreux créateurs de pages Web, devenus plus designers que programmeurs d’ailleurs, à cause de toute la part de travail automatisée par Expression Web.
Ce logiciel permet de produire des pages en utilisant une combinaison des langages HTML, XML, XHTML, CSS, ASP.NET, XSLT, PHP et JavaScript. Il est capable de détecter la plupart des problèmes de programmation et de faire des suggestions très utiles.
Microsoft Expression Web 4 est très facile à utiliser, soit pour créer de nouvelles pages, soit pour éditer des pages qui existaient déjà.
En fait, contrairement à la plupart des autres éditeurs Web, il peut récupérer même des pages créées plusieurs années avant avec d’autres logiciels.
Installation et paramétrage du logiciel Expression Web 4
Il est désormais possible de
télécharger gratuitement Expression Web 4
SP2. Il n'y a pas de support technique pour ces versions gratuites.
Toutefois une
FAQ
est disponible ainsi qu'un
forum de la communauté
Installation du logiciel
Systèmes d'exploitation supportés
Windows 7, Windows 8, Windows Vista, Windows XP
Tapez dans Google Expression web 4
Cliquez sur le 1er site celui de Microsoft
Cliquez sur le lien télécharger gratuitement Expression Web 4 SP2
Dans la rubrique détails, choisissez French et enregistrez le fichier puis téléchargez le logiciel en cliquant sur Run.
Prise en main - Découverte de l'interface de l'éditeur et de l'espace de travail
Lancer Expression Web 4
Par défaut, une page sans_titre1.html vous est proposée par Expression Web 4
Fermer la page sans titre avant de démarrer la création de votre site internet.
Menu de l'interface utilisateur
Fichier
Modifier
Affichage
Insérer
Format
Outils
Tableau
Site
Vue de données
Panneaux
Fenêtre
Aide - ?
Principes de fonctionnement
Le Web - Définition
Aujourd’hui, le Web est accessible via le protocole HTTP (HyperText Transfer Protocol) et les URL (Uniform Resource Locator). Les fichiers hébergés sur le site web reposent sur du HTML (HyperText Markup Language) et d'autres langages complémentaires. Le protocole HTTP permet au client (généralement via un navigateur web) d'accéder à des ressources par un URL. HTML et de structurer les données ou lier les ressources entre elles, notamment avec des liens hypertexte.
On parle parfois de "site internet" au lieu de "site web". On devrait parler de web site à destination d'internet, mais par abus de langage, l'expression site internet reste souvent utilisée. Les web sites ne sont pas forcément accessibles sur internet. Par exemple, les intranet peuvent contenir un ou plusieurs sites web non accessibles via internet.
Classiquement la construction d'un site repose sur la création de
pages liées entre elles afin de permettre une navigation ergonomique le
plus souvent à l'aide d'un menu contextuel.
Le contenu d'un site doit respecter un certain formalisme, comme une
présentation, une vitrine,... et doit être organisé.
Pour ce faire, 2 répertoires principaux cohabiterons :
- Les fichiers de type page porteront l'extension htm ou html
- Les images
En stockant toutes vos images dans un répertoire images, elles ne seront
pas mélangées avec les fichiers de vos pages et cela facilitera la
maintenance de votre site.
Fichier / Nouveau / Page
Comme dans un traitement de texte, vous pouvez et vous devez
présenter votre page en la structurant à l'aide de paragraphes et de
titres prédéfinis par défaut dans une feuille de style de base.
Vous accédez aux différents titres disponibles par le biais de la
fenêtre à gauche du menu.
- Insertion d'images, boutons interactifs et logos
Le menu insérer vous permet d'ajouter à votre texte des images que
vous pourrez positionner de manière à documenter votre contenu.
Si vous souhaitez insérer une image à partir d'un site web externe, il
faudra au préalable la sauvegarder sur votre disque dur, son
enregistrement se fera dans le dossier image.
- Établir un lien hypertexte
La notion de lien est fondamentale dans l'architecture Web
Internet est basé uniquement sur une structure de liens
C'est ce qui vous permet de naviguer d'un endroit à l'autre de la toile
: vous cliquez
En sélectionnant avec la souris le texte, le logo, un bouton interactif ou l'image sur lesquels doivent porter vos liens, puis click-D, vous ouvrez un menu contextuel.
En bas de ce menu apparait l'option lien hypertexte avec un icône
symbolisant le lien
Activez cette fonction pour ouvrir la fenêtre
La zone Adresse vous permet de choisir directement une page externe
ou interne dans le contenu ci dessus.
Cadre de destination vous permet d'indiquer à votre navigateur internet
s'il doit ouvrir un nouvel onglet ou se substituer à l'affichage de la page
actuelle.
Info-bulle vous permet d'ajouter un commentaire, visible par les internautes au survol de la souris.
Liens - Notion de signet
Vos liens peuvent porter (on parlera de pointer) indifféremment sur :
Un contenu interne à votre page, en ce cas vous créerez au préalable un point d'entrée : le signet.
Un contenu interne à votre site mais sur une autre page, contenant éventuellement un ou plusieurs signets.
Un contenu externe à votre site, on parlera en ce cas de pointer sur une url (adresse internet) externe.
Le mode Site / Onglet Liens Hypertexte vous permet d'avoir une vue sur l'ensemble des liens crées.
Remarquez que les liens sont systématiquement soulignés par défaut dés leur création, c'est un des principes du Web pour informer l'internaute qu'un contenu est "cliquable"
Sauvegardes
- Gestion de l'environnement de travail
Vos fichiers sont toujours sauvegardés sur le disque dur de votre PC ou sur tout autre disque externe mais je ne vous le conseille pas, il vaut mieux le faire après.
- Avant publication
Modifier vos données
Sauvegarder vos données
En cliquant sur la disquette bleue, vous sauvegardez vos données sur votre PC
La ou les pages modifiées non encore publiées sont signalées par l'icone crayon et dans la colonne état en statut Modifié
Simuler une publication sur votre navigateur internet
Vos données sauvegardées peuvent être visualisées simplement
sur le navigateur de votre choix sans que
vous ne les ayez publiées.
Tous vos liens sont également actifs.
- De sécurité
Il est conseillé de faire régulièrement des sauvegardes de votre environnement sur un autre support que votre PC : disque dur externe, serveur de l'entreprise ou sur une clé USB.
Pour ce faire, à partir de votre navigateur, faites un copier / coller de votre site.
Publication des données
- Publication des modifications sur le web par FTP
C'est le mode de publication de vos données, à partir de vos fichiers stockés en local vers le web, par le biais du serveur sur lequel est hébergé votre site.
Exemple à partir de mon PC et d'un de mes sites
- Synchronisation du site local vers distant (mode expert)
- Vérification des liens
En Mode Site / Rapports, vous obtenez un certain nombre d'indicateurs, dont l'état de vos liens.
Tests de fonctionnement et de navigation
Testez toujours vos liens et votre navigation ou faites les tester par d'autres.
Sensibilisation aux versions adaptatives de site web
L'utilisation de plus en plus fréquente d'appareils mobiles a ajouté une contrainte supplémentaire pour les webmasters, celle d'adapter la lisibilité d'un site web à toutes les plates-formes existantes.
Questions / Réponses
Charger les données d'un site web
Site - Ouvrir un site - Sélectionner le site dans l'explorateur Windows ou se trouvent vos données source.
Modifications des données dans l'environnement source
Ouverture de la page d'accueil (index.htm)
Passer en mode création
Modifier vos données
Sauvegarder vos données
En cliquant sur la disquette bleue, vous sauvegardez vos données sur votre PC
Propagation des données
Connexion au serveur distant
Passer en mode Publication
Entrer le nom d'utilisateur et le mot de passe
Ces informations vous ont été fourni par votre hébergeur en tant qu'identifiants FTP
Publication
La ou les pages modifiées non encore publiées sont signalées par l'icone crayon et dans la colonne état en statut Modifié
La page publiée ainsi que ses modifications devient accessible sur internet (La touche F5 permet de rafraichir le cache de votre navigateur)