Sommaire

Les modèles de site

1. Utiliser les modèles de site

Dans un premier temps, affichons les modèles disponibles.

Accédez au site de Foundation : http://foundation.zurb.com.

Dans la barre de navigation, cliquez sur le menu Develop et choisissez HTML Templates.

images/C12-010.png

Plusieurs modèles de site sont à votre disposition. Pour chaque modèle, le bouton Download permet de télécharger le modèle et le bouton Demo permet d’afficher le modèle avec du contenu.

Voici la miniature du modèle News or Magazine :

images/C12-011.png

Voici la page de démonstration :

images/C12-012.png

2. Le modèle d’information et magazine

Pour cet exemple, nous allons utiliser le modèle News or Magazine.

Dans la liste des modèles, pour le modèle News or Magazine, cliquez sur le bouton Download.

images/C12-011.png

Dans la fenêtre du navigateur s’affiche le code brut du modèle de site.

images/C12-013.png

Si besoin est, créez un dossier pour y placer les fichiers nécessaires de cet exemple.

Dans le dossier de l’exemple, placez le dossier css de Foundation.

Créez une page HTML.

Placez-y les éléments standards : <html>, <head>, <body>...

Faites les liaisons aux feuilles de style de Foundation.

<link rel="stylesheet" href="css/foundation.css" /> 
<link rel="stylesheet" href="css/app.css" />

Dans le dossier de l’exemple, placez le dossier des fontes-icônes de Foundation, ...