Nvu css tutorial
From Fxp Wiki
Contents |
Tutorial Nvu web css editor
Tutoriel éditeur web css Nvu
You will here learn how to use nvu for existing page which already have a css (and especially a long and complicated one like any wiki or nuke or forums page type)
Vous apprendrez ici comment utiliser Nvu avec des pages déjà existantes et liées à des feuilles de style css (en particulier avec des css longues et compliquées comme celle des wiki, nuke ou forums)
Loading
Chargement
- Go to your site, and save as html one of you page.
- Open Nvu and open the saved page with the files / open menu
- Don't care of any error message
- Allez sur votre site, et enregistrez une de vos page en html
- Ouvrez Nvu et ouvrez votre page html à l'aide du menu Fichier / ouvrir
- Ne vous inquiétez pas d'un quelconque message d'erreur
Tags
Balises
As you can see, all the tags are visible in the tags tab.
- Double click on any of them : all the extent of the tag is blured. And you can see the hierarchy of tags in the bottom bar: "body div div div ..."
- Right click on the last element of the hierarchy. A menu appears, with two important lines:
- If you are an expert in css, and you know the name of the style you want to apply, choose "advanced properties"
- If you are not an expert in css, go to "inline styles"
- Choose the line corresponding to the style you want to apply: text, borders, background, box (margins, padding, position absolute or relative, float)
Comme vous pouvez le voir, toutes les balises sont visibles dans l'onglet "tags".
- Double cliquez sur l'une des balises : tous le contenu de la balise devient surlignée. Et vous pouvez lire la hierarchie des balises dans la barre du bas : "body, div, div, div ..."
- Clic droit sur le dernier élément de la hierarchie. Un menu apparaît avec deux lignes importantes :
- Si vous êtes un expert en css et que vous connaissez le nom des styles que vous voulez appliquer à cet élément, choisissez "Advanced properties" (Propriétés avancées)
- Si vous n'êtes pas un expert en css, choisissez "inline style" (style inséré dans l'élément)
- Choisissez la ligne qui vous semble important pour opérer les modification de style qui vous conviennent:
- text properties: tout ce qui concerne la police de caractère, les couleurs de texte, l'alignement
- border properties: les bordures, (solide, en pointillées..) la couleur des bords, leur épaisseur
- background properties: arrière plan (couleur du fond notamment)
- box properties: tout ce qui concerne les marges (extérieures et intérieur = padding), si la position est absolue ou relative, l'attribut "float".
- aural :
From inline to generic style
Du style inclu au style générique
The best tool in Nvu consist on the last line of the previous menu.
BEWARE: it can have inexpected effects: SAVE your work before using it. This line converts a specific style, say to a title level 3 (h3) and creates a style rule for all h3 elements
Le meilleur outil de Nvu consiste dans la dernière ligne du menu qu'on vient de voir.
ATTENTION: cette action peut avoir des effets totalement déroutant. ENREGISTREZ votre travail avant de l'utiliser.
Cette ligne sert à convertir le style spécifique à un élément, par exemple un titre de niveau 3 (h3) en une règle qui sevira pour tous les éléments h3Class, ID
The goody of this tool, is that if your page has already a set of "id" and "class" names for element, it almost all the time recongnises it. This way you nearly don't need to think about it.
You can nevertheless give finer description of the rule you want to give.
La bonne nouvelle, c'est que si votre page contient dejà des indication sur les id ou les class des éléments, Nvu vous les propose quasi spontanément pour toute création de règle. et vous pouvez affiner votre règle en la détaillant autant que vous le souhaitez.
Stylesheet and rules
Feuilles de styles et règles
The difficulty you will encounter concerns the different places where style are stored, especially when you work on pages already existing:
- one or more external stylesheets
- one internal style definition (usualy in the head element)
- inline styles definitions (inside each tag)
La difficulté que vous rencontrerez concerne la multiplication des lieux où les styles peuvent être stockés:
- une ou plusieurs feuilles de style externes
- une feuille de style interne (en général dans la balise "head")
- les définitions de style incluses ("inline") dans chaque balise
Links
Liens
Categories: Css | Softwares | Design | Tutorial
