Préférences

Avant de démarrer, vous devrez créer les répertoires constituant l'environnement de travail ainsi qu'un répertoire destiné à enregistrer les données de votre site : pages, styles, images. Vous pourrez modifier à tout moment ces différents réglages pour adapter votre environnement.

Notion d'emplacements associés à un Groupe de Styles

Un groupe de styles utilise normalement 3 répertoires fonctionnels différents :

Feuilles de styles	Les styles CSS sont enregistrés à ce niveau.
Pages HTML	Sert à savoir comment positionner la page par rapport aux styles…
Images	Répertoire contenant les médias. Nécessaire pour calculer l'url d'une image donnée relativement à l'emplacement de la feuille de styles.

Ces répertoires fonctionnels peuvent ne pas être physiquement différents : par exemple, un pour les pages et un autre pour les styles et les médias.

Le choix des emplacements d'un Groupe de Styles se fait au moyen du menu Fichier ➜ Emplacements. La valeur de départ présente dans le dialogue de choix pour un nouveau Groupe est définie en préférences par la valeur de l'Emplacement par défaut. emplacement par défaut exemple

Dans l'exemple de cette arborescence, si le site "Exemple" ● est le seul que je travaille, j'ai probablement intérêt à définir en Emplacement par défaut le répertoire "styles" ● situé à l'intérieur ; si je travaille d'autres sites, je dois plutôt prendre le répertoire au dessus "Sites clients" ●.

Régler les préférences

Allez à l'article "Préférences" du menu « Application » sous Mac OS X, dans le menu « Édition » sous Windows et Linux.

Statut d'un élément de paramétrage : l'icone ⚠️ indique que le paramètre correspondant est erroné ou manquant, l'icone √ signale qu'il est correct.

Validez les réglages avec le bouton OK, cliquez Annuler pour ignorer les changements apportés.

Onglet Options (emplacement par défaut et édition)

Emplacement par défaut.

L'emplacement par défaut est le répertoire avec lequel sont initialisés les emplacements d'un nouveau Groupe de styles. Si vous n'indiquez pas d'emplacement par défaut, vous serez positionné par défaut sur "Documents" à la création d'un nouveau Groupe de styles. Vous avez donc tout intérêt à définir un emplacement par défaut au plus proche des répertoires avec lesquels vous travaillez fréquemment.

Préférences d'édition

l'option « valeurs couleurs : » agit sur le fonctionnement des sélecteurs de couleurs qui donnent une valeur RGB, HSL ou hexadécimale.
vous pouvez générer les feuilles de styles sous deux présentations : en liste (1 propriété par ligne) ou en ligne (un sélecteur avec toutes ses propriétés sur la même ligne).
la case « filtrer origine dataurl » concerne l'incorporation dans la feuille de style d'une pseudo-propriété donnant l'URL d'origine de l'image codée en dataurl : si vous n'avez plus les images qui ont été ainsi codées, en important cette feuille de styles la propriété permet de re-générer l'image avec son nom originel, sinon un nom générique sera utilisé. Facultatif mais pratique.
« charset » par défaut des pages HTML générées.
« remplacer le caractère spécial » considéré comme un retour ligne (<br>) dans les traitements de conversion du Presse-Papier et de documents texte.

Onglet Environnement de travail

Les réglages d'environnement correspondent aux dossiers enregistrant les fichiers de travail de HTML Styles et aux applications utilisées pour développer les pages : Navigateur HTM de test et éditeur de pages :

Réglages HTML Styles	Répertoire contenant l'environnement HTML Styles. Il inclus les répertoires Groupes de styles, Métas et plugins et Sitemaps.
Groupes de styles	fichiers « Groupes de styles » servant à travailler le paramétrage des feuilles de style.
Métas et plugins	réglages de certains plugins : modèles de liens pour Lot d'images, templates et modèles de page du mini-éditeur HTML, jeux de METAs.
Sitemaps	plans de sites destinés à générer les sitemaps (Google, Bing, etc.), les plans de site ainsi que les fichiers robots.txt.
Vous pouvez parfaitement attribuer un nom différent à ces répertoires, les mettre à l'endroit qui vous convient, pensez simplement à adapter le paramétrage en conséquence.
Navigateur HTML	Navigateur internet avec lequel vous voulez tester vos pages.
Éditeur pages	Application servant à modifier le source de vos pages.

Le bouton bouton assistant permet de créer en une seule fois l'environnement nécessaire : créez un dossier «Réglages HTML Styles» puis cliquez ce bouton pour générer les sous-dossiers à l'intérieur de celui-ci.

Onglet collection de Polices

HTML Styles est livré avec une collection de Polices standard que cet onglet permet de compléter :

pour ajouter une police externe, entrez son nom dans le champs de gauche et cliquez le bouton Ajouter ➜.
le nom de la police n'est pas un nom de fichier, par exemple :CraftyGirls.woff mettre plutôt Crafty Girls qui est la font-family.
si vous utilisez une telle Police dans le paramétrage d'un style, vous devrez créer un sélecteur @font-face faisant le lien entre la font-family et les URL des fichiers de Polices.
pour retirer une police de la collection, sélectionnez-la et cliquez le bouton Retirer.
pour ajouter une police présente sur votre ordinateur, cliquez le bouton ▼ au dessus du champs de gauche.

Cet onglet est accessible directement dans le dialogue « Familles de Polices » lors de l'édition d'un style pour ajouter au vol une Police manquante.