Mise en Page et conception graphique
 

Mise en page

Vous devez déjà avoir noté que les sites Web que vous avez visite dans ce module ont généralement certains éléments communs apparaissant sur chaque page. Par exemple, avez vous note les sections suivantes dans les sites Web que vous avez eu a visiter? (voir le diagramme ci-après pour reference):

  • Un titre du site et un titre de Page?

  • Un lien vers la page d’accueil?

  • Un signe d’un logo ou d’un graphique donne une identité au site?

  • Une section des graphiques et menus (combinées certaines fois) et une section des textes sur chaque page?

  • Chaque page a une mise en page similaire?

  • Des boutons qui vous aident a passer sur les pages suivantes/précédentes; en haut /bas des pages en fonction des besoins du site?

    design.gif (3698 bytes)

Conception Graphique

The graphic design element of your page could consist of two main features:

  1. Les éléments de conception graphique sur votre page pourraient avoir deux principales caractéristiques:
  2. Graphiques – image, logo ou tout autres éléments graphiques.

Permettez vous l’influence des bonnes idées, mais ne copier pas exactement les conceptions ou les logos des autres. Vous pouvez copier une image et y apporter des modifications significatives. Conseil d’ami : gardez tout simple !. 

Rappelez vous que certains des sites que vous visitez sont de très haute qualité. Ils ont été conçus par des gens ayant une expérience considérable en Graphiques et ont pris assez de temps pour leur perfectionnement. Nous vous suggérons de travailler en collaboration avec vos élèves et collègues dans l’apprentissage de l’utilisation des programmes graphiques.

Eléments graphiques fondamentaux

Les éléments fondamentaux pouvant être affectés par la conception graphique sont:

     
    Logo  

    Une bannière affichée de gauche a droite au haut de la page. Celle ci pourrait inclure le menu du site également.

    Barre de
    Menu possible
      Une zone principale de texte pouvant avoir une couleur d’arrière-plan, une image d’arrière-plan ou une combinaison des couleurs de textes.
 

Les connaissances à avoir pour une mise en page attrayante sont :

  • Une connaissance des tableaux (largeur des bordures, cellules et couleurs d’arrière-plan, fusionnement des cellules)
  • Une connaissance des attributs de texte (couleurs des textes et des hyperliens)
  • Une connaissance des graphiques
  • Une idée de quelles combinaisons de couleurs, graphiques et police vont mieux ensemble.

Les tableaux peuvent également être utilisés pour assister dans la mise en page. Quelques exemples pour démonstration :

Exemple 1

Dans cet exemple, nous consultons le contenu du site contents page of the Living Africa site. Nous espérons que vous serez du même avis que nous lorsque nous disons que c’est un site attrayant. Les tableaux ont été utilises pour espacer les éléments de la page. La largeur de bordure du tableau est de 0 par conséquent les lignes du tableau sont invisibles.

Si nous visitons cette même page mais avec les bordures a 1 (par conséquent les lignes du tableau deviennent visibles), vous verrez comment le tableau a été utilisé pour séparer le graphique des textes.

Exemple 2

Sur cet exemple, nous visitons le site Land section of the Living Africa site.

Une fois de plus, en visitant cette même page avec les tableaux visibles, vous verrez comment les éléments de base ont été places dans le tableau. Dans ce cas, nous avons deux tableaux. Notez comment les cellules vides du tableau sont utilisées pour créer des espaces blancs sur la page, permettant à la page de ne pas être trop pleines d’images ou de textes.