11-03-2010 : 19h01 min - non connecté
Dernière modification le 07 septembre 2008

 

Mise en page :centrer, mettre en gras, ...

 

Enregistrer vos pages

Dans les différents exercices qui vont suivre vous devrez bien sur enregistrer vos pages. Enregistrez vos pages comme avec n'importe quel logiciel. Une petite différence tout de même avec Mozilla et Nvu : au moment d'enregistrer, le logiciel vous demande de donner un titre à la page. Celui-ci n'est pas forcement identique au nom du fichier. Le titre de la page est ce qui apparaîtra dans la barre de titre de votre navigateur ainsi que dans les favoris (ou les marque-pages de Mozilla). Par exemple si je crée une page sur la vie des chats, le titre de la page pourrait être "La vie de mon chat" et le nom du fichier chat.htm.

Mise en page

Vous savez utilisez un traitement de texte ? Oui ? Alors vous pouvez passer à la leçon suivante !

Les éditeurs de pages web sont devenus extrêmement conviviaux et ressemblent à des traitements de texte. Regardons la capture d'écran de la barre d'outils de Mozilla :

Menu de Mozilla

Voyons la troisième ligne de l'image ci-dessus. Après un menu déroulant d'entêtes, la couleur du texte et la couleur de surlignage, on trouve dans l'ordre :

  • les boutons pour agrandir/réduire la taille de la police sélectionné.
  • les boutons pour mettre en gras, italique, souligné.
  • les listes à puces et les listes numérotées.
  • les alignements à gauche, centré, droite et justifié.
  • les retraits de paragraphes.

Exercice :

Voici un texte brut que vous pouvez copier/coller dans Nvu :

La lisibilité des pages La résolution de l'écran Environ la moitié des internautes consultent les pages web sur un écran de résolution 1024 pixels sur 768 pixels.Voici un site intéressant qui permet de tester son site avec n'importe quelle résolution :http://www.anybrowser.com/ScreenSizeTest.htmlLe choix du fond d'écranPriorité n°1 : le texte doit être lisible ! Evitez les fonds d'écran très bariolé avec des dessins de toutes les couleurs. L'idéal est un fond uni, sans images. En plus votre page se chargera plus rapidement.

Arrangez le pour qu'il ressemble à ceci :

La lisibilité des pages

La résolution de l'écran

Environ la moitié des internautes consultent les pages web sur un écran de résolution 1024 pixels sur 768 pixels.
Voici un site intéressant qui permet de tester son site avec n'importe quelle résolution :

http://www.anybrowser.com/ScreenSizeTest.html

Le choix du fond d'écran

Priorité n°1 : le texte doit être lisible ! Evitez les fonds d'écran très bariolé avec des dessins de toutes les couleurs. L'idéal est un fond uni, sans images. En plus votre page se chargera plus rapidement.

En particulier, essayez de trouver comment passer à la ligne en créant un nouveau paragraphe (par exemple entre un titre et le texte qui suit). Notez aussi que le dernier paragraphe est justifié.

Après avoir fait l'exercice, cliquez ici pour quelques commentaires :

 

La mise en page n'est pas très dure, mais au début on a souvent des soucis avec les interlignes.
Lorsqu'on appuie sur la touche "Entrer", la plupart des éditeurs créent un saut de paragraphe. Pour faire un simple saut de ligne, sans créer d'espace, il faut alors appuyer sur "majuscule" + "entrer".

Nvu fonctionne différemment. Par défaut la touche "Entrer" ne crée qu'un saut de ligne. Pour créer un nouveau paragraphe il faut cliquer sur "paragraphe" dans le menu déroulant situé à gauche de la barre d'outils que nous avons étudié précédemment.

Cliquez sur les différents éléments de ce menu déroulant pour voir l'effet sur le texte. Cela permet de mettre en forme une page très rapidement. Ces différents styles de texte se nomme des "en-têtes".

 

 

Cours suivant : créer un lien hypertexte