Créer son site Web

livre création de site Internet-Bon de commande

Design et ergonomie - masques de site Web et gabarits a adapter

Formation site internet>Compléments du livre>Gabarit masque site web>

Utilisez un de nos masques de site Internet pour gagner du temps dans l'élaboration de votre mise en page. Cette page Web se rapporte à la troisième étape clé : Le design et l'ergonomie (page 133). Pour compléter le design de votre site Internet, vous pourrez vous référer aux conseils des pages 67 à 86 de notre livre-atelier Créer son site Web pas à pas..

Création site Web Formation site Web Livre site Web

Gabarit ou masques de site Web

Cliquez sur une vignette pour obtenir les lignes CSS et XHTML correspondantes au gabarit choisi. Avant de faire un choix pour votre mise en page, relisez attentivement les pages 67 à 86 de notre livre atelier. Les pages 75 et 76 sont essentielles pour assurer un bon référencement à votre site internet.

masque ou gabarit de site

masque de site en 4 parties masque de site en 5 parties masque de site en 6 parties masque de site en 8 parties masque de site en 9 parties masque de site en 11 parties

Des explications précises sont contenues dans un document pdf gratuit que vous pouvez télécharger directement (841 KO) afin de réussir la création des pages index.html et modele.css à partir des masques de sites. Le document téléchargé comporte des liens actifs qui vous font gagner du temps.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- ************************ structuration de la page de base html *******************-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >				
	<!-- ************************ balises d'en-tête  *******************-->
	<head><!-- partie invisible de la page-->
		<title><!--inscrire le titre ici (80 caractères)--></title>
		<meta name="description" content=""/><!--inscrire la description de page ici (200 à 300 caractères) -->
		<meta name="keywords" content=""/><!--inscrire la liste de mots clés séparés par des virgules espaces ", " )-->
		<meta name="Classification" content=""/> <!--inscrire ici les 4 mots clés principaux séparés par des espaces-->
		<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" href="<!--inscrire ici le nom de la feuille de style CSS-->"/>
 	</head>
	<!-- ************************ balises de corps  *******************-->
	<body><!-- partie visible de la page-->
	
	</body>
<!-- ******************************************************************************-->
</html>
	
		

Les lignes ci-dessus composent le cadre de votre future page XHTML type.

Sur chaque masque de site, vous trouverez les lignes XHTML et CSS spécifiques à la disposition que vous aurez choisie pour votre site. La page contenant les lignes CSS sera nommée de manière à ce qu'elle corresponde à la page CSS déclarée dans l'attribut href de la balise d'en-tête <link>

Gabarit ou masques de site Internet

Masque d'un site en 4 ou 5 parties

Masque en 4 parties . Masque en 5 parties

Le masque en 4 parties comporte une bannière en haut de page et une marge à gauche.

Le gabarit en 5 parties comporte une bannière en haut de page, une marge à gauche et un espace pour le chemin d'accès ou fil d'Ariane.

Masque d'un site en 6 ou 8 parties

Masque en 6 parties . Masque en 8 parties

Le masque en 6 parties comporte une bannière en haut de page, une marge à gauche ainsi qu'un bas de page.

Le gabarit en 8 parties comporte une bannière en haut de page, une marge à gauche ainsi qu'un bas de page et des espaces intermédiaires.

Masque d'un site en 9 ou 11 parties

Masque en 9 parties . Masque en 11 parties

Le masque en 9 parties comporte une bannière en haut de page, une marge à gauche et à droite ainsi qu'un bas de page .

Le gabarit en 11 parties comporte une bannière en haut de page, une marge à gauche et à droite ainsi qu'un bas de page et des espaces intermédiaires.

Choisissez un masque pour votre site internet :

Variantes

Adaptez votre gabarit de site internet grâce aux variantes :

A propos de la licence creative commons

Le site lié à la page 86 a changé d'adresse et il n'y a pas de redirection. Vous devrez désormais taper http://creativecommons.fr/ pour atteindre le site en français des licences Creative Commons.

Le design a été légèrement modifié, mais les fonctionnalités sont toujours là. Le filtre agit toujours par l'intermédiaire d'un moteur de recherche que vous choisissez dans une liste.

Creative Commons

Merci à Fabien de nous avoir fait remarquer cette évolution.

Cet article vous a intéressé ?
Twitter Google +
Partagez-le !

Glossaire Outils pédagogiques Formation site Web Mentions légales Contact