FET Forum

FET Support (International) => Algerian Arabic / (الجزائرية(العربية => Topic started by: Benahmed Abdelkrim on February 27, 2017, 12:45:39 PM

Title: modification des tables par HTML/CSS
Post by: Benahmed Abdelkrim on February 27, 2017, 12:45:39 PM
Modification des tables par HTML et CSS.
  Comment modifier les tables produites par FET version personnalisée (version Algérienne et marocaine de FET).  Chaque vrais jour est divisé en deux pseudos-jour, la première représente le matin, et la seconde représente l'après midi.
Pour avoir une table ou chaque jour est dans une colonne ou une rangé, on suivent les étapes suivantes:
ouvrez le fichier: nom de fichier.html, avec Notpad++ .(sous Windows -OS-)
Ensuite cliquez sur: Ctrl+F ;
Une petite fenêtre s'ouvre.
Suivez les instructions ci-dessous:

1.   écrire: colspan="5" , dans le champ: «Recherche »;
   et remplacez le par:  colspan="10" ; (en le copiant dans le champ: «Remplacer par »).
          Cliquer sur: "Remplacer touts"
    Cliquer sur: Enregistrer.   

2.   chercher dans le fichier html, et copier dans le champ: «Recherche »;
                     <th class="xAxis">1</th>
                     <th class="xAxis">2</th>
                         <th class="xAxis">B</th>
                               <th class="xAxis">3</th>
                           <th class="xAxis">4</th>
   Ensuite ajouter en collant ces derniers, juste au dessous de cette dernière ligne:
   <th class="xAxis">1</th>
           <th class="xAxis">2</th>
    <th class="xAxis">B</th>
               <th class="xAxis">3</th>
               <th class="xAxis">4</th>
   <th class="xAxis">1</th>
      <th class="xAxis">2</th>
    <th class="xAxis">B</th>
        <th class="xAxis">3</th>
     <th class="xAxis">4</th>           

Copiez les dans le champ: «Remplacer par ». cliquer sur: "Remplacer touts». Cliquez sur: Enregistrer.

3.     supprimer les morceaux de code suivants, en les cherchant dans le fichier HTML correspondant, copiez les l'un après l'autre, et collez les - un par un - dans le champ: «Recherche ». 
      Laissez le champ: «Remplacer par »; vide.
      Cliquer chaque fois sur: "remplacer touts ».
   </tr>                              </tr>
        <tr>                                <tr>
          <th class="yAxis">الاحد/م</th>                <th class="yAxis">الاثنين/م</th>

      </tr>
        <tr>
          <th class="yAxis">الثلاثاء/م</th>

     </tr>
        <tr>
          <th class="yAxis">الأربعاء/م</th>

      </tr>
        <tr>
          <th class="yAxis">الخميس/م</th>            Cliquez sur: Enregistrer.

   Enfin, si on désire ajouter une colonne qui sépare les deux demi-journées de chaque jour de la semaine, afin de rendre les tables lisiblement meilleurs, et plus esthétiques au vue on procède de la manière suivante :

4. d'abord avant la génération du tableau par FET, on ajoute une sixième période, nommée -si vous voulez - par les deux premières lettres du mot anglais Lunch ; soit Lu, ou par un autre symbole, comme vous voulez.    
   Cette période on la définie dans FET, comme horaire de pause, c'est-à-dire : touts les élèves + touts les enseignants sont indisponibles.
Donc le nombre de périodes qui doivent être entré dans les données de FET est : 6 ;
      1   2   B   3   4   Lu
   Maintenant pour modifier les tables produites on procède de la même manière expliquée dans la page précédente. Sauf qu'on doit remplacer « colspan= ''5'' », par « colspan=''11'', au lieu de la valeur ''10'', comme expliqué plut haut. 
  La dernière colonne de chaque table doit être éliminée, c'est pas compliqué, cette tache devienne très facile avec l'éditeur de code : Notpad++ .
   Pour ce faire on doit effacer la dernière ligne de code de chaque jour. On repère la dernière ligne d'une journée quelconque, on la copie sans oublié la balise finale : </tr> qui vienne juste au dessous de cette ligne de code ; donc ce qui doit être effacé est :
<td class="empty"><span class="empty">-X-</span></td>
        </tr>
Copier cette dernière  expression dans le champ : Recherche.
Laisser le champ : remplacer par, vide
Cliquer sur : Remplacer touts.
Cliquer sur : Enregistrer.

   Pour visualiser vos modifications dans votre navigateur, n'oublier pas de cliquer sur : Actualiser cette page.
Note : n'entamer cette étape ; expliquée plut haut, que dernier moment, après satisfaction de toutes les étapes de la page précédente, sinon on va rencontrer des bizarreries avec les tables.




Title: Re: modification des tables par HTML/CSS
Post by: Benahmed Abdelkrim on February 27, 2017, 12:51:24 PM
  ...et le fichier CSS