Mes exercices de l'année 2010 - 2011

Tutoriel de la page

La feuille de style étant exportée, nous allons pouvoir générer une nouvelle page à partir de la page index.
Assurons-nous auparavent que la structure de notre page est clean en utilisant l'outil nettoyeur de balises et en jetant un coup d'oeil dans l'éditeur NotePad++.

A - Créer un dossier pour organiser notre dossier de site

Cette nouvelle page est un listing de nos exercices faits pendant l'année 2010 - 2011, nous allons donc créer, à la racine du dossier de site, un nouveau dossier  exo-2010-2011 dans lequel nous pourrons ranger tous nos exercices de l'année, chacun dans un sous-dossier, ainsi que la page listing.
Rappel : ce nom de dossier ne doit pas avoir d'espaces, ni d'accents. Afin d'avoir un meilleur référencement et pour que les robots d'indexation  comprennent, il est conseillé de séparer les mots par des tirets.

B - Fichier / Enregistrer-sous

  1. Fermer toutes les pages, ouvrir la page index.html et faire fichier/enregistrer-sous
  2. Donner un nom de fichier qui peut être le même que celui donné au dossier.
    Appelons donc ce fichier exo-2010-2011.html
  3. Naviguer dans l'arborescence pour aller le placer dans son dossier.
    Dès que nous cliquons sur le bouton Enregistrer, nous perdons tous les styles.
  4. La première des choses à faire c'est de modifier le titre de la page par le Menu Format / Titre et propriétés de la page. Nous donnons comme titre : Exercices Kompozer 2010-2011
  5. Récupérer les styles en allant dans l'éditeur pour indiquer le bon chemin de la feuille de style. Il suffit de rajouter  ../  devant son nom
    lien LINK vers la feuille de style externeLe navigateur comprend qu'il doit remonter d'un niveau dans l'arborescence.
    Une autre méthode plus astucieuse est faire :
    Fichier/Enregistrer sous à partir de la page exo-2009-2010.html, le chemin de la feuille de style étant identique nous ne perdons pas les styles.
  6. Effacer le contenu du content et rédiger le nouveau contenu.  Penser à sauvegarder souvent nos pages.

C - Création de la liste avec des puces personnalisées

  1. Structure de la liste
    Une simple liste non ordonnée de liens pointant vers la page d'accueil de chaque exercice
  2. Stylage
    • Nous stylerons les éléments de la liste dans une feuille de style externe
    • une class .listeExo pour le bloc ul  (marge gauche 100px, padding gauche à zéro pour que les puces s'affichent dans le margin sur tous les navigateurs)
      Pour mieux visualiser le bloc donnons-lui une couleur de fond et une bordure en pointillé 1px Pour mieux visualiser le bloc donnons-lui une couleur de fond et une bordure en pointillé 1px
    • une class .listeExo li applicable à tous les li (pas de puces type, marge basse 30px pour espacer les items, padding gauche 20px pour éloigner le texte à l'intérieur du bloc )
      Cliquer sur le bouton radio "règle de style personnalisée" et saisir le sélecteur composé .listeExo li
    • une class spéciale à chaque li (par exemple .li-fonds-marins) appelant sa puce personnalisée placée dans le dossier images  se trouvant à la racine du site.
      Il vaudra mieux créer cette dernière class dans une feuille de style interne à la page.

Haut de page