Agence Web 34 pour votre visibilité sur internet

Bienvenue dans le programme de formation Expression Web

Support de formation du logiciel d'édition de site web Microsoft Expression Web

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 Word

Objectif du stage

Prendre en main le logiciel d'édition et de création de site web Microsoft Expression Web 4

Sommaire de la formation

Présentation du logiciel Expression Web 4

Principes de fonctionnement

Sauvegardes

Publication des données

Tests de fonctionnement et de navigation

Sensibilisation aux versions adaptatives de site web

Questions / Réponses

 

 

 

 

 

 

 

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 - ?

RETOUR SOMMAIRE

 

 

 

 

 

 

 

 

 

 

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.

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.

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"

 

RETOUR SOMMAIRE

 

 

 

 

 

 

 

 

 

 

 

 

 

 Sauvegardes

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.

Modifier vos données

Sauvegarder 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.

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.

RETOUR SOMMAIRE

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Publication des données

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

En Mode Site / Rapports, vous obtenez un certain nombre d'indicateurs, dont l'état de vos liens.

RETOUR SOMMAIRE

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Tests de fonctionnement et de navigation

Testez toujours vos liens et votre navigation ou faites les tester par d'autres.

RETOUR SOMMAIRE

 

 

 

 

 

 

 

 

 

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.

RETOUR SOMMAIRE

 

 

 

 

 

 

 

 

 

Questions / Réponses

RETOUR SOMMAIRE

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Charger les données d'un site web

Ouvrir le site à partir de l'explorateur windows

Site - Ouvrir un site - Sélectionner le site dans l'explorateur Windows ou se trouvent vos données source.

Chargement des données source du site web

Modifications des données dans l'environnement source

Ouverture de la page d'accueil (index.htm)

Ouverture de la page d'accueil (index.htm)

Passer en mode création

Passer en mode création pour optimiser l'environnement de travail

Modifier vos données

Sauvegarder 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

Connexion au serveur distant

Passer en mode Publication

Mode publication

Entrer le nom d'utilisateur et le mot de passe

Nom d'utilisateur et 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é

Publication d'une page modifiée

La page publiée ainsi que ses modifications devient accessible sur internet (La touche F5 permet de rafraichir le cache de votre navigateur)