I) Sujet

Le sujet de ce mini-projet consiste en l'implémentation d'une applet Java qui permette via un "parser" de documents, de lire, créer et modifier des feuilles de style.
Les feuilles de style font partie des nouveautés importantes du langage HTML 4.0. Elles permettent de changer l'aspect d'une page HTML sans modifier son contenu. Elles permettent entre autres de disposer de plusieurs présentations différentes pour une même page Web. Leur principal intérêt réside dans le fait qu'elles peuvent être déclarées à l'extérieur des documents HTML.
Ce mini-projet a été développé en respectant les règles de constructiuon dictées par le w3c (http://www.w3c.org).
La feuille de style associée à ce rapport est la feuille de style "rapport.css" et peut être modifiée avec l'applet que nous avons développée.

II) Présentation de l'applet Java

Pour récupérer le projet téléchargé le fichier suivant et décompressé l le dans un répertoire (par exemple : Projet Internet)

II-1) Lancement de l'applet

Pour lancer l'applet, suivre les directives suivantes :

1. Lancer Visual Age.
2. Faire un Importe Directory du répertoire Projet Internet
3. 
   Importer le repository qui se trouve dans le répertoire Projet Internet : Choisisez dans Package la version 1.1 Ouvrez le package webcss dans l'editeur de version (open to; editions) Choisir la version 1.1, ajouter la au workspace (bouton droit ; "add to workspace")

II-2) Présentation de l'applet

L'applet se présente sous la forme d'une fenêtre Windows disposant de plusieurs onglets.
Ormis le premier onglet, qui permet la manipulation de fichiers et le choix du tag à modifier, chaque onglet correspond à un groupement de propriétés modifiables.

• File


• Color & Background


• Font


• Margin


• Padding


• Text


• Border

II-2-a) Onglet File

Cet onglet permet de charger, de créer ou de sauvegarder une feuille de style.
La partie supérieure de cet onglet permet de sélectionner le Tag que l'on veut modifier. Dés que l'on clique sur le menu déroulant "Tag HTML à configurer" le Tag courant est mis à jour.

II-2-b) Color & Background

Cet onglet permet de mofifier :

• Color : Couleur d'un text.


• Background-color : Couleur du fond d'écran.


• Background-image : Sélection d'une image pour le fond d'écran.


• Background-repeat : Façon de répéter l'image de fond d'écran.


• Background-attachment : Spécifie si l'image reste fixe avec le déplacement de l'écran.


• Background-position : Spécifie la position de l'image par rapport au coin supérieur gauche de l'écran.


• Percentage & lenght : Spécifie manuellement la position de l'image par rapport au coin supérieur gauche de l'écran.

II-2-c) Font

Cet onglet permet de mofifier :

• font-family : Spécifie le nom et la famille de la police.


• font-style : Spécifie le style de la police.


• font-weight : Spécifie l'épaisseur de la police.


• font-variant : Spécifie une police normale ou petite.


• font-size : Spécifie la taille de la police.


• Percentage & lenght : Spécifie manuellement la taille de la police.

II-2-d) Margin

Cet onglet permet de mofifier :

• Margin-top (Percentage & lenght) : Spécifie manuellement la valeur de la marge haute.


• Margin-right (Percentage & lenght) : Spécifie manuellement la valeur de la marge droite.


• Margin-bottom (Percentage & lenght) : Spécifie manuellement la valeur de la marge basse.


• Margin-left (Percentage & lenght) : Spécifie manuellement la valeur de la marge gauche.

II-2-e) Padding

Cet onglet permet de mofifier :

• Padding-top (Percentage & length) : Spécifie manuellement la valeur de remplissage haute.


• Padding-right (Percentage & length) : Spécifie manuellement la valeur de remplissage droite.


• Padding-bottom (Percentage & length) : Spécifie manuellement la valeur de remplissage basse.


• Padding-left (Percentage & length) : Spécifie manuellement la valeur de remplissage gauche.

II-2-f) Text

Cet onglet permet de mofifier :

• Word-spacing : Définit la distance d'espacement entre mots.


• Letter-spacing : Définit la distance d'espacement entre caractères.


• Text-indent : Définit la valeur d'indentation avant la première ligne.


• Line-height : Définit la valeur entre deux lignes adjacentes.


• Vertical-align : Permet de spécifier l'alignement vertical du texte par rapport au reste du texte.


• Text-transform : Force les caractères en majuscule ou en minuscule.


• Text-align : Permet de positionner du texte sur une ligne.


• Text-decoration : Permet de spécifier la décoration du texte.

II-2-g) Border

Cet onglet permet de mofifier :

• Border-top (Percentage & length) : Regroupe toutes les caractéristiques des bordures hautes (épaisseur, style, couleur).


• Border-right (Percentage & length) : Regroupe toutes les caractéristiques des bordures droite (épaisseur, style, couleur).


• Border-bottom (Percentage & length) : Regroupe toutes les caractéristiques des bordures basses (épaisseur, style, couleur).


• Border-left (Percentage & length) : Regroupe toutes les caractéristiques des bordures gauche (épaisseur, style, couleur).