Comment mettre en place son site sur l'espace PIEDS NOIRS.ORG ? [Aller à la leçon 2]    [Revenir à l'aide]


    Version 1.0 - 03/06/2000


    LECON N° 3 - Mise en page évoluée (suite) LES TABLEAUX, couleurs et fond de page.


    La leçon démarre sur les bases suivantes :
    • vous savez vous servir de votre machine,
    • vous avez récupéré NETSCAPE, il est installé et fonctionne....
    • vous avez lu les Leçons 1 & 2 (et vous les maitrisez bien sûr !!).
     PHASE A : Création d'un nouveau fichier


    Pour créer un nouveau fichier sous NETSCAPE, voyez la leçon 1, elle donne tous les détails.

    PHASE B :  LES TABLEAUX
    Les tableaux !!! qu'est ce que c'est que ce truc ???

    Et bien figurez vous que le texte que vous lisez en ce moment, est inscrit dans une case bleue...
    Au dessus et en dessous (avant et après ce texte), il y a des cases de couleur bistre foncé...dans lesquelles il y a d'autres textes...Et bien, figurez vous que ces cases sont LES CELLULES (çà s'appelle comme cela en informatique) d'un tableau...

    Comme j'ai choisi un tableau sans bordures, et bien vous ne voyez que les patés de couleur, mais pas les limites réelles des cellules et du Tableau...

    Pour s'amuser, je vous fais là un tableau à trois colonnes et deux lignes, avec une bordure....
     

         
         

    Joli ?? n'est ce pas....????

    Hop le même mais en indiquant que je veux qu'il ne fasse que 80 % de la largeur active (ce n'est pas la largeur de l'écran puisque je suis déjà dans un espace réduit - les cellules fond bleu)
     

         
         

    Là je lui ai mis une belle bordure bien large....
    Et puis maintenant, je vais en faire un autre avec un espace, entre les cellules, + grand...
     
     

         
         

    Bref, je peux faire une infinité de bidouillage, avec ce genre de choses......

    Et alors, me direz-vous ? Un cadre avec des cases, des bordures, ouais bof !!!



    Et bien non PAS BOF du TOUT !!!

    Les tableaux sont des outils de création et de mise en page redoutables !!!

    Exemple : 
     
     

         
     
       
     

    Vous allez me dire, ouais bof...joli...ca sert à quoi ? ce tableau sans bordures et avec des cases colorées !!

    Dans l'absolu à rien, mais pour faire une présentation....
     
     

     Ma page d'accueil   Mon histoire...  de 0 à 10 ans
     de 11 à 20 ans
     URL de ma page  de 21 ans à aujourd'hui
     

    C'est déjà plus sympa...
    Et puis si vous voulez exposer un texte Façon JOURNAL, très cool...
     

    et patati, et patata !! 

     

    et patati, et patata !!

    Bref, maitriser les tableaux, c'est fondamental pour faire une mise en page correcte....

    Regardez par exemple sur le site piedsnoirs.org, la page sur SANTA CRUZ...
    C'est un exemple de mise en page possible avec l'utilisation des tableaux...

    Sans tableau pas d'espoir....d'avoir des pages qui ressemblent à quelque chose.


    Bon......

    Comment faire un tableau ?

    A mourir de rire, tellement c'est simple...

    1er - dans votre page en création (dans le composer), mettez votre curseur à l'endroit où vous voulez voir un tableau..
    2 ème - cliquez sur l'icône 

    3ème - un écran de contrôle apparait :
     
    Voici, un des avantages du TABLEAU :
    à gauche une image, et à droite, le texte d'explication...

    Cet écran vous permet de préciser (de haut en bas):

    • le nombre de lignes et le nombre de colonnes,
    • dire si le tableau doit être à gauche, au centre ou à droite de la page,
    • mettre une légende si vous voulez..(je ne m'en sers jamais..)
    • TRES UTILE, largeur des bords du TABLEAU peut aller de 0 (zéro) à x...à 0 les bords ne sont pas visibles...
    • TRES UTILE, espace entre les cellules, marge intérieure..
    • TRES UTILE, espace entre le bord de la cellule et le texte (ou l'image) situés à l'intérieur de la cellule (par exemple, le tableau que vous lisez en ce moment a une marge de 1 pixel -un point- regardez l'image à gauche, elle touche presque le cadre de la cellule).
    • LARGEUR du tableau, en % ou en pixels, TRES TRES UTILE...
    • la hauteur, laissez tomber, c'est bidon...
    • colonnes de même largeur, çà c'est pratique, quand par exemple, on veut que le tableau ait un aspect régulier..car n'oubliez jamais, que l'aspect final de votre page dépend du NAVIGATEUR qui la visionne !!!
    • couleur...ben s'il faut expliquer çà !!???
    • image - sympa - dans certains cas, c'est cool de mettre un fond sur une cellule ou un tableau.. Il faut cliquer sur choisir une image..voir exemple plus bas...
    • laisser l'image.....ne vous servira jamais à rien de vraiment utile...
    Car on peut toujours écrire dedans !!! Exemple d'image de fond :

    en fait, dans la case à gauche, j'ai choisi le fichier image:

    Mais comme évidemment, l'image est petite, ELLE EST REPETEE autant de fois que nécessaire pour remplir l'espace de la cellule..automatiquement..
    Cela peut donner des effets superbes !!

    Voilà, vous savez TOUT sur les tableaux....

    Le reste c'est votre imagination...et là je ne peux plus rien faire, sinon que de vous aider à régler ponctuellement des problèmes...
     



    Bien passons à la deuxième partie de cette leçon N°3....

    Le FOND d'écran et les couleurs !!!



    Vous avez tous remarqué (si ! si !) que lorsque vous vous balladez sur Internet, l'aspect des pages est très varié..
    Il y a des textes, des images, des liens (vous savez quand votre curseur devient une petite main avec un doigt qui pointe..) et globalement la page visitée propose un "fond d'écran".

    Un fond d'écran ? c'est cette couleur, ces motifs ou cette image, qui apparaissent en FOND statique et qui semble "suivre" vos déplacements (haut - bas) sur la page..Comme si elle était "scotchée" à la fenêtre !!

    Quelquefois c'est aussi une petit image sympa qui se répète, en largeur, en hauteur...

    C'est important et fondamental !!!

    Vous pouvez intervenir sur le fond d'écran de votre page de 2 façons :

    1. en lui donnant une couleur,
    2. ou en lui indiquant une image à mettre en fond.
    En lui donnant une couleur :

    Pour ce faire :
    a) Vous devez être dans le COMPOSER en création de fichier (voir leçon 1),
    b) Cliquez sur FORMAT dans la barre de MENUS tout en haut,
    c) cliquez sur : "Propriétés et Couleurs de la page..."

    Un écran apparait alors :

    Il y a à la 7ème ligne : "Arrière-plan (l'image d'arriere-plan prévaut sur la couleur)" si vous cliquez sur le pavé de couleur dans la partie gauche de cette ligne...
    Cela ouvre un sélecteur de couleurs :

    Là vous pourrez y choisir les couleurs "standard" ou bien cliquer sur AUTRES... et définir vous mêmes votre couleur de fond de page...

    Simple, n'est ce pas ? 

    ATTENTION n'oubliez pas que votre FOND de page est un FOND et qu'il ne doit JAMAIS prendre le "pas" sur ce qui est important dans votre page...Cette remarque est + valable s'il y a une image en fond, mais quelquefois des couleurs mal choisies c'est pas très beau, ni pratique non plus...



    Si vous voulez (ou préférez) mettre une chouette image en fond, pas de problèmes, suivez la même procédure...puis
    Cliquez sur "choisir le fichier" à la 10ème ligne (environ) et pof !!! vous voilà avec le + beau fond d'écran de la terre....

    CONSEILS :

    a) bien choisir l'image pour qu'elle ne "bouffe" pas le 1er plan...
    b) si l'image ne "fait" pas tout l'écran, ne pas oublier que le navigateur va la répéter jusqu'à ce que l'écran soit rempli..et qu'il peut y avoir des effets géniaux ou catastrophiques...
    c) ne pas mettre de tros "grosses" images en kilo octets, cela sera trop long à charger...

    Si vous n'avez pas assez d'images pour les fonds, rassurez vous on en trouve des milliers sur le Net, allez chez mes copains canadiens de visic.com, par exemple.....
     
     

    Ahhh !! c'est fini....

    RESUME :

    Vous savez créer des tableaux..
    Vous savez mettre des couleurs ou des images dans votre fond de page,

    Ca suffit pour aujourd'hui......vous pouvez vous amuser avec les autres boutons....
    C'est la prochaine leçon....
     

    FIN de la LECON 3



    Prochaine leçon :

        Les liens internes, les liens externes.

    Leçons suivantes :

        Travaux pratiques : votre PREMIERE PAGE de votre SITE.
        Après la création, le transfert de vos fichiers vers le site....