FAQ Expression Web, SharePoint Designer et FrontPage

 Questions, aides et astuces, provenant au départ du forum microsoft.public.fr.frontpage.

Largeur et taille d'écran

 

 1 -Comment adapter une page Web à tous les types d'écran ?
 2 -Centrer le contenu de la page
 3 -Étirer la page selon taille de l'écran
 

1 - Comment adapter une page Web à tous les types d'écran ?

Question 1 J’ai préparé un nouveau site qui fonctionne très bien sur un écran d’ordinateur. Mais, il est difficile à utiliser sur un portable (texte trop petit, barres de défilement horizontales…) Que puis-je faire ?

Réponse 1 Sur un mobile, les pages sont souvent plus aérées, plus sobres, de façon à s’adapter à la taille de l’écran et à la navigation tactile. Autrefois, on suggérait d’avoir deux sites différents, un pour les grands écrans, un autre pour les petits. Heureusement, ce n’est plus le cas.
 
La technique du « responsive design » ou « site Web adaptatif » permet d’ajuster automatiquement l’apparence du site selon la largeur de l’écran du visiteur (téléphone, tablette ou grand écran). Cette technique utilise simplement les feuilles de styles pour modifier la position et la taille de certains éléments selon la largeur de l’écran.
 
Vous trouverez ici un excellent tutoriel :
https://www.w3schools.com/html/html_responsive.asp 

  Retour au début

2 - Centrer le contenu de la page

Question 2 Je n'arrive pas à centrer mes page correctement. L'affichage est très différent d'un ordinateur à l'autre. Parfois ma page semble alignée tout à gauche. Comment faire pour qu'elle reste centrée dans toutes les résolution d'écran? 

Réponse 2Le principe pour centrer tout le contenu de la page avec des styles est celui-ci:
1. le contenu dans la balise body est aligné au centre;
2. à l'intérieur de la balise <body>, utiliser une balise <div> principale ayant une largeur déterminée et un alignement à gauche (dans l'exemple plus bas, celle-ci est appelée #container);
3. les marges à gauche et à droite de la division principale sont "auto";
4. une largeur est fixée pour la division principale.
Voici un exemple de styles donnant ce résultat:

  body {
    text-align: center;
  }
  #container {
    text-align: left;
    margin-right: auto;
    margin-left: auto;
    width: 900px;
  }

Dans Expression Web et SharePoint Designer, ces pages peuvent être créés facilement avec le menu Fichier, Nouveau, Page, Dispositions CSS.

Au besoin, les styles sont ensuite modifiés à partir du volet Gérer les styles:
cliquer avec le bouton droit sur le nom du style #container, choisir Modifier le style, sélectionner Encadré, décocher l'option Margin tous identiques, puis choisir margin right auto, margin left auto.

Le résultat peut être vérifié dans un navigateur en réduisant puis en augmentant la taille de la fenêtre.

Ici, vous trouverez des infos pour des pages s'adaptant à différentes résolutions:
https://www.alsacreations.com/tuto/lire/547-Faire-un-site-pour-toutes-les-resolutions.html 

Et d'autres liens utiles dans la rubrique Couches #5.

  Retour au début

3 - Étirer la page selon taille de l'écran

Question 2 Pour mon site, l'idéal serait de pouvoir afficher les pages proportionnellement à la taille de l'écran sur lequel elles s'affichent. Avez-vous une idée du code à utiliser pour réaliser une telle prouesse?

Réponse 2Pour avoir une taille qui s'ajuste à tous les écrans, il suffit de fixer à 100% la largeur de la balise <div> principale, celle qui englobe les autres (dans les modèles fournis par Expression Web, il s'agit souvent de la balise #container):
  #container {
     width: 100%;
  }

Si vous préférez figer la largeur de la page, il faudra lui donner une taille fixe. Le contenu sera alors affiché à gauche, sans dépasser la largeur fixée. Et pour choisir de le centrer pour les visiteurs ayant un écran plus large, voir la question précédente.

Retour au début