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

    Version 1.0 - 30/05/2000

    LECON N° 2 - Mise en page évoluée, utilisation des lignes, insertion d'une image.

    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 la Leçon 1.
    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 :  Mise en page évoluée.

    Qu'attendez vous de la mise en page ? Et bien, je pense que nous attendons tous la même chose, c'est à dire pouvoir écrire son texte....
    Le cadrer au mileu
    Le cadrer à droite ou
    Le cadrer à gauche...
    L'écrire en GRAS, en italique, ou le souligner....
    Tout çà nous l'avons vu dans la leçon 1.

    Ici, nous allons voir :

    1. les listes avec numéros ou puces,
    2. les retraits (gauche) de marge, ou indentation..
    3. l'utilisation de différentes tailles de police de caractères..
    4. comment choisir ses caractères,
    5. comment METTRE de LA COULEUR sur du TEXTE
    6. mettre des lignes dans vos pages,
    7. enfin charger une image !!!

     
     
     
     

    ACTE I : Les listes avec numéros ou puces...


    1er : créez un nouveau fichier vierge avec NETSCAPE,
    2ème : tapez le texte suivant :

    Patates
    Vermicelles
    Poireaux

    Ensuite sélectionnez le avec votre souris, ou shift flèche... cela donne visuellement :

    Maintenant, dans la barre des icônes, cliquez sur : 

    votre texte apparait :

    • Patates
    • Vermicelles
    • Poireaux
    Resélectionnez votre texte, et dans la barre des icônes, en haut, cliquez sur : 

    votre texte apparait :
     

    #  Patates
    #  Vermicelles
    #  Poireaux


    les # ne doivent pas vous inquiéter !! il s'agit des FUTURS NUMEROS....
    Quand vous lirez votre page normalement avec votre Navigateur favori (NETSCAPE) ces dièses se transformeront en numéros, 1, 2, 3 etc.

    Voilà, en douceur, vous venez d'apprendre à faire des listes à puces ou à numéros...
    Vous l'avez vu, c'est simple et puissant, pratique et utile...
     

    ACTE II : les retraits...indentation


    effacez tout ce que vous venez d'écrire, et écrivez :

    ceci est ma ligne un,
    ceci est ma ligne deux,
    ceci est ma ligne trois..

    Puis positionnez votre curseur (avec la souris ou les flèches), au début de la première ligne,
    puis cliquez sur :  dans la barre des icônes..

    Votre texte qui était :

    ceci est ma ligne un,

    devient :
     

    ceci est ma ligne un,
    si vous cliquez à nouveau sur la même icône :
    ceci est ma ligne un,
    etc....chaque fois, le texte se déplace sur la droite...
    allez à la fin de la ligne, puis faites RETOUR (à la ligne) que se passe-t-il ?

    Après avoir réalisé un retrait vers la droite, vous avez déterminé ce que l'on appelle une indentation ou une marge provisoire....

    maintenant sélectionnez les deux autres lignes et cliquez à nouveau sur le bouton, les deux lignes sont indentées simultanément.
     

    L'indentation est une fonction puissante, qui combinée, avec les autres possiblités, vous permet de réaliser un grande nombre de mise en page pour le meilleur service de vos textes, histoires, récits, bref de vos pages internet.
    Vu ?

    Si vous cliquez sur le bouton immédiatement à gauche du précédent, vous pouvez "dé-indenter" votre texte et donc défaire ce que vous aviez fait...

    Vous voilà maintenant doté(e) de sérieuses possibilités de monter quelque chose de sympa !!! non ?
     

    ACTE III : tailles de caractères


    Si j'écris : BONJOUR, rien à dire......si j'écris BONJOUR..toujours rien à dire, mais c'est plus marrant.. :-D
    Qu'ai je fait ? Rien de bien compliqué...
    j'ai sélectionné le O puis j'ai changé la taille de la police : 

    le O en 14, le N en 18, le J en 24, le O en 18, le U en 14...hé !! hé !! rusé hein ?

    de la même façon je peux METTRE en EXERGUE un bout de texte, en changeant sa taille (là c'est du 24..).
    vu ?
     

    ACTE IV : polices de caractères

    A côté de la taille est écrit : Vectorielle, si vous cliquez dessus, la liste de toutes les polices disponibles sur votre machine va apparaitre....ATTENTION ce SONT les POLICES DISPONIBLES sur VOTRE MACHINE, rien, mais absolument rien ne dit que TOUT LE MONDE les a...

    Rassurez vous tout le monde pourra toujours lire votre texte, mais si les polices n'existent pas sur la machine qui lire votre page, les caractères seront traduits dans une police proche...mais proche ne signifie pas semblable...
     

    ACTE V : choix des polices de caractères

    Utilisez TOUJOURS des polices connues : arial, Roman, courrier, times...
     
     

    ACTE VI : mettre de la couleur


    Vous pouvez écrire en gras, italique, souligné, en gros, en petit, mais AUSSI en COULEUR...
    En cliquant sur le module couleur:


    Vous allez pouvoir changer la couleur du texte que vous aurez préalablement sélectionné..
     

    ACTE VII : mettre des lignes dans vos pages


    Vous pouvez très facilement mettre des lignes de séparation dans vos pages..
    Rien de plus facile, cliquez sur :


    Ceci ajoutera une ligne dans votre texte....

    ATTENTION une ligne prend "une ligne", petite ou grande, elle prend une ligne OBLIGATOIREMENT
    Petite ligne :


    Grosse ligne courte centrée :

    (notez que la couleur de la ligne est celle du fond de page)
    Enorme ligne à gauche...

    Bref, c'est un outil polymorphe, qui permet de faire plein de choses......
    Lorsque vous avez "posé" une ligne, vous pouvez en cliquant dessus, la déformer à l'envi..
    Une ligne n'est pas une case, c'est un objet graphique à part entière que vous pouvez cadrer à gauche, center ou cadre à droite, c'est tout..
     

    ACTE VIII : mettre des images dans vos pages


    Alors que vous savez surement envoyer en mail un fichier joint qui est une image...Vous pouvez très facilement mettre des images dans vos pages..
    Il y a quelques règles absolues qu'il convient de suivre :
    1. d'abord, préparer correctement l'image à mettre dans la page...et oui, il faut maitriser cet aspect des choses..
    2. la sauvegarder dans un format de fichier qu'internet aime : formats GIF ou JPG
    3. appeler l'ordre qui "insère une image".
    PREPARER l'image ?

    Ben ouais... si votre image fait 1100 pixels de large..quel intérêt ?, les plus petits écrans fonctionnent en 640 points - pixels de large, les plus grands en 1024 pixels de large...en affichant une telle image, il ne sera jamais possible de la voir en plein écran...alors vraiment aucun intérêt...
    Il faut donc la mettre à une taille intéressante....techniquement la taille intéressante, c'est une moitié d'écran, soit au maximum 320 pixels de large et ce que voulez de haut...artistiquement ou symboliquement, c'est une autre question....

    Mais vous devez penser à une chose FONDAMENTALE, + votre image est grande, + elle est importante en taille de fichier et elle sera "longue" à lire sur Internet, car il faudra attendre qu'elle se charge sur la machine du visiteur pour qu'il puisse la voir...et çà croyez moi c'est fortement laxatif !!!

    Le plus beau site du monde ne résiste pas à ce problème....si c'est long, c'est chiant...(excusez moi...)

    Il faut donc chercher un compromis entre qualité et confort....
    Les outils pour ce faire existent, moi je vous conseille PAINT SHOP PRO, pas cher, en shareware, et magnifique pour ce type de travail... j'imagine que sur MAC il y a la même chose...voyez sur http://www.jasc.com.

    L'optimisation des images demande une bonne pratique, il s'agit véritablement d'un cours à part entière...on en reparlera si vous voulez...

    SAUVEGARDER au BON FORMAT


    Pas de pétard, pas de choix, pour internet FORMATS : GIF et JPG, rien d'autre de sérieux pour l'instant...

    COMMENT INSERER UNE IMAGE ?


    Dans la barre d'outils, il y a :

    Cliquez dessus, une autre fenêtre apparait :

    Cliquez sur Choisir le Fichier, puis là choisissez la victime..... puis ok

    L'image que vous avez choisi, fait partie de l'aspect visuel de votre page....

    Alors heureu(se)x !!!

    Ahhh !! c'est fini....
    RESUME :

    Vous savez cadrer vos textes..
    Vous savez mettre des lignes, des couleurs,
    Vous savez insérer des images

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

    FIN de la LECON 2 [Aller à la leçon 3]


    Prochaine leçon :

    Mise en page évoluée (suite) avec l'utilisation des tableaux, couleur et fond de page.

    Leçons suivantes :

        Les liens internes, les liens externes.
        Travaux pratiques : votre PREMIERE PAGE de votre SITE.
        à suivre....