ORDIGOUAL - Atelier Site Web
   
Atelier "Site Internet"
du club informatique ORDIGOUAL de Valleraugue


- 4-Mise en page maj 18/10/2010

 

Problème : Quelle est la taille de l'écran de l'intrenaute qui surfe sur le site ?
800*600, 1024*768, 1280*1024, etc..

Une solution simple, largement répandue, consiste à créer un site optimisé pour une résolution basse (800*600), afin d'obtenir un affichage correct avec une résolution supérieure.

Une autre solution, très séduisante, consiste à opter pour un site au design flexible, qui s'adapte à la résolution d'écran du visiteur sans avoir besoin de réaliser une version différente du site pour chaque résolution. Les pourcentages remplacent les pixels.

Nous ne dépasserons pas 1000 pixels car pour un écran 1024x768 (taille la plus courante actuellement) il faut penser que de la barre de défilement verticale prend déjà une certaine largeur.

J'ai opté pour la première solution : page de 950 pixels de large centrée, et nous utiliseront le CSS pour la mise en page


1- lancer Kompozer
ouvrir index.HTML
effacer le texte, le curseur doit être au début de la page


2 - CREATION D'UN BLOC

dans le menu déroulant

clic sur Conteneur générique <DIV>

le bloc est entouré de pointillé rouge
en bas de page trois balises

  • <HTML> début de la page
  • <BODY> début du corps de la page
  • <DIV> début d'un bloc

Nous allons donner un nom à ce bloc

Clic droit sur la balise <DIV> et dans la fenêtre clic sur propriétés avancées
dans le menu déroulant sous attribut selectionner ID ( abréviation d'idenfification) et dans valeur taper un nom =>mapage

Kompozer a enregistré le nom (précédé de dièse)


3- PROPRIETE DE CE BLOC

clic sur l'icône

 

clic sur Style appliqué à l'élément portant l'ID
taper après diese ma page
clic sur Créer la règle de style

onglet boite

definir largeur 950 px
marge gauche : Auto
marge droite : Auto

Pour modifier ces propriétés clic sur l'icône et sur #mapage

On peut avec l'onglet fond créer une couleur de fond

avec l'onglet bordure créer des bordures


4 - Completer la page d'accueil avec ses liens, qui devrait ressembler à

de la même maniére compléter les trois autres pages .