Modification de la présentationModification de la présentationCreationWeb crée, à partir des données extraites d'Ancestrologie, des pages pour le Web au format html.
Ces pages ont une structure générales fixe : menu, en-tête, corps et pied de page. Le contenu du corps est déterminé en grande partie par le paramétrage permis par CreationWeb.
Ces pages incluent des libellés et des formats de présentation qui sont extraits du fichier …\Ancestrologie\WebExport\Templates\creationweb.ini, ainsi que des images qui proviennent du répertoire …\Ancestrologie\WebExport\Templates\.La présentation de ces données est déterminée par une feuille de styles qui permet la modification des couleurs, jeux de caractères, taille des caractères, cadres…
Dans sa fourniture standard, CreationWeb crée des pages Web qui respectent les standards du W3C
et
aux exceptions mineures suivantes près :
Dans le fichier creationweb.ini sont définis deux caractères spéciaux dans le formatage des dates :
Nota : Le projet CreationWeb est le premier que je réalise avec une feuille de styles de l'ampleur qu'a pris creationweb.css, et à l'arrivée, je me rends compre que j'ai encore bien à apprendre. Soyez indulgents !
On peut donc pour personnaliser les exports de CreationWeb :
Par défaut, celle-ci s'appelle …\Ancestrologie\WebExport\Templates\creationweb.css, mais on peut en fournir une autre en la précisant dans l'onglet Paramétrage de CreationWeb.
La feuille de style permet de changer à peu près tout sauf les positions relatives des éléments : couleurs des fond de pages et des fontes, tailles, marges, cadres…
Le meilleur moyen de créer une nouvelle page de styles consiste à prendre une copie de creationweb.css, de la renommer bien sûr, d'y modifier les paramètres voulus (à l'aide de NotePad ou mieux, d'un éditeur de feuilles de styles) et enfin de préciser cette nouvelle feuille de styles dans le champ Nom du fichier styles de l'onglet Paramétrage de CreationWeb.
Attention : Si vous ne renommez pas ce fichier (vous lui gardez le nom de creationweb.css), vous vous exposez à le voir écrasé et donc perdu lors de la prochaine mise à jour de CreationWeb.
Les modifications peuvent soit porter sur des paramètres des styles natifs (vous changer une taille de caractère, une couleur, une bordure…), soit être des ajouts de sélecteurs pour un usages personnels dans les texte de haut de page de la page d'accueil, ou de bas de page global. Dans ce second cas, je recommande de les regrouper tous en fin de fichier.
Attention : Si vous ne comprenez pas bien le fonctionnement des css, informez-vous avant toute modif. Internet regorge de tutoriels à propos de css et la documentation officielle en français est à http://www.yoyodesign.org/doc/w3c/css2/cover.html.
Soyez prudents : modifiez un paramètre à la fois
N'hésitez pas à commenter vos modifications. Les commentaire qui peuvent être n'importe où, y compris parmi des paramètres, doivent être encadrés par /* et */. La seule limitation, de taille il est vrai, est que l'imbrication n'est pas permise. Un commentaire mal ouvert ou mal fermé, et vous ne comprenez plus ce qui se passe !
Pour des essais ponctuels, modifiez le fichier css qui se trouve dans …\Ancestrologie\WebExport\Mon_dossier qui a été crée par une exécution de CreationWeb. Il suffit ensuite de rafraîchir l'affichage de la page dans le browser pour voir immédiatement l'effet produit, mais attention, il sera écrasé lors de la prochaine exécution de CreationWeb, donc dès que vous êtes satisfait, recopiez le dans …\Ancestrologie\WebExport\Templates.
Si en revanche vous modifiez directement le fichier css dans …\Ancestrologie\WebExport\Templates, vous devrez exécuter CreationWeb pour voir l'effet produit.
Important : Rappelez-vous que c'est le browser qui exploite le contenu du css :
Tous les sélecteurs et paramètres associés déclarés légaux par la documentation officielle ne produisent pas
hélas l'effet escompté sur votre browser, ou s'ils le font, pensez que vos futurs visiteurs
visualiseront peut-être vos pages avec un browser différent du vôtre.
Testez donc vos modifications au moins avec IE et Firefox.
Si vous êtes satisfait du résultat de vos modifications et qu'elles changent profondément l'aspect de vos pages, faites m'en part à yves.bruant@magic.fr pour que j'en fasse profiter tout le monde.
Toutefois, en aucun cas je ne peux m'engager à vous assister si vous entreprenez des modifications de creationweb.css que vous ne maîtrisez pas, mais en revanche, j'essayerai de répondre aux questions précises que vous poserez sur le forum Ancestrologie / CreationWeb.
Remplacez :
body { font-size: 10pt; …
par
body { font-size: 8pt; …
vous redimentionnez du même coup (proportionnellement) les tailles de toutes les fontes de toutes les pages.
Remplacez :
body { …; font-family: Verdana, Arial, Helvetica, sans-serif; …
par
body { …; font-family: Comic Sans MS, Arial, Helvetica, sans-serif; …
vous redimentionnez du même coup toutes le type des fontes de toutes les pages…
Remplacez :
body { …; background-color: #ffe; …
par
body { …; background-color: #fef; …
vous remplacez le fond général ivoire par un fond général rose (si vous aimez ! ).
Ajoutez les lignes suivantes (en rouge) aux paramètre de la balise body.
body {
font-size: 10pt; /* changer cette valeur pour redimentionner globalement le texte des pages générées */
/* mais il faut aussi ajuster la taille font de ulonglet et les valeurs en découlant */
/*scrollbar-arrow-color:#fd9; scrollbar-base-color: #011; scrollbar-face-color: #9bc; /* spécifique de IE */
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0 1px 1px 0;
padding: 0 0 0 0;
color: #036;
background-color: #ffe;
border: 0px dotted green;
text-align: center;
margin: 0 auto;
}
Si vous remplacez :
/* sélecteur pour boîtes à personnages */
p.boite {
position: absolute;
width: 355px;
height: 4.1em;
margin: 0;
padding: 1px 0 0 0;
text-align: center;
overflow: hidden;
/*-moz-border-radius: 2em; /* spécial firefox */
}
par
/* sélecteur pour boîtes à personnages */
p.boite {
position: absolute;
width: 355px;
height: 4.1em;
margin: 0;
padding: 1px 0 0 0;
text-align: center;
overflow: hidden;
-moz-border-radius: 2em; /* spécial firefox */
}
vous remplacez le cadres des boîtes rectangulaires de cousinages (dans les implexes)
par des boîtes à angles arrondis (mais ça ne marche pas sous IE ! ).
Un peu plus compliqué, si vous complétez le sélecteur body par la combinaison convenable des paramètres ci-dessous (il suffit d'essayer pour voir), vous pouvez ajouter une image de fond qui restera fixe ou scrollera en même temps que votre page :
{ …;
background-image : url(image.gif) ; /* url de l'image */
/* définit si l'image est répétée. Valeurs possibles :
no-repeat : l'image n'est affichée qu'une seule fois.
repeat : l'image est répétée verticalement et horizontalement.
repeat-y : l'image est répétée verticalement.
repeat-x : l'image est répétée horizontalement .*/
background-repeat : no-repeat ;
/* définit si l'image est fixe ou si elle bouge lors que l'on descend dans
le document à l'aide des ascenseurs. Valeurs possibles :
scroll : l'image bouge avec les ascenseurs.
fixed : l'image est toujours fixe. */
background-attachment : fixed ;
/* définit la position horizontale de l'image par rapport au côté gauche. Valeurs possibles :
pourcentage : pourcentage (25%) entre le côté gauche du navigateur et le côté gauche de l'image.
longueur : même chose mais en pixels ou points.
left : l'image est alignée à gauche.
center : l'image est centrée.
right : l'image est alignée à droite. */
background-position-x : center ;
/* définit la position verticale de l'image par rapport au côté supérieur. Valeurs possibles :
pourcentage : pourcentage entre le côté haut du navigateur et le côté supérieur de l'image.
longueur : même chose mais en pixels ou points.
top : l'image est alignée en haut.
center : l'image est centrée.
bottom : l'image est alignée en bas. */
background-position-y : center ; …}
Voici le début du fichier creationweb.css :
@charset "iso-8859-1";
/*--------------------------------------------------------------------------------------------------*/
/* Feuille de styles css2 pour les exports Web d'Ancestrologie via le plugin CreationWeb */
/* documentation en français sur les css à http://www.yoyodesign.org/doc/w3c/css2/cover.html */
/* version 20 août 2005 */
/* */
/* Conseils pour les modifications : */
/* Si vous ne comprenez pas bien le fonctionnement des css, informez-vous avant toute modif */
/* Soyez prudents : modifiez un paramètre à la fois */
/* N'hésitez pas à commenter vos modifications */
…
/*--------------------------------------------------------------------------------------------------*/
body {
font-size: 10pt; /* changer cette valeur pour redimentionner globalement le texte des pages générées */
/* mais il faut aussi ajuster la taille font de ulonglet et les valeurs en découlant */
scrollbar-arrow-color:#fd9; scrollbar-base-color: #011; scrollbar-face-color: #9bc; /* spécifique de IE */
font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0 1px 1px 0; padding: 0; color: #036; background-color: #ffe; border: 0px dotted green; }
table { font-size: 100%; color: #036; empty-cells: show; border: 0px solid silver }
tr { font-size: 100%; color: #036 }
td { font-size: 100%; color: #036 }
a:link { text-decoration: none; color: #036}
a:visited { text-decoration: none; color: #036}
a:hover { text-decoration: underline; color: #036 }
…
Les libellés que vous pouvez avoir envie de changer (traduction des pages Web par exemple)
sont modifiables dans le fichier texte
La structure générale est composée de commentaires (lignes débutant par un point-virgule (;), de lignes vides non significatives, d'une ligne [Libelles] à ne pas changer, et de lignes de commandes elles-mêmes composées d'une clé (à gauche du signe =) et d'un libellé (à droite du signe =).
Attention : Ne changez rien aux clés !
En revanche, vous pouvez remplacer comme vous le voulez les libellés.
Avant de remplacer un libellé, faites une recherche pour vous assurer qu'il n'y a pas plusieurs clés qui définissent un libellé identique. Si c'était le cas, le nom de la clé et le chapitre qui la contient devrait vous permettre de sélectionner la bonne. Dans le doute, essayez, je ne peux pas mieux dire !
Attention, les libellés, contrairement aux styles, ne sont pas exploités directement par le browser, mais par CreationWeb qui doit donc être exécuté pour vérifier le résultat de chaque modification. Et à propos, n'oubliez pas de sauvegarder vos modifs (Ctrl s) avant, c'est un homme d'expériences qui vous le dit !
Si vous voulez un libellé avec des espaces à gauche ou à droite, encadrez le avec des quotes (') ou des double quotes (").
les formats sont aussi des libellés mais qui ont une structure spéciale utilisée par CreationWeb pour des mises en forme complexes. On les distingue des libellés ordinaires en ce qu'ils contiennent des séquences %s ou %d. Ces séquences seront remplacées à l'exécution par des variables chaînes si %s et numériques si %d. Aussi, si vous changez le format, vous ne devez en aucun cas changer l'ordre ou retirer ces séquences.
Vous trouverez des séquences bizarres encadrées à gauche par & et à droite par ;. Elle correspondent à des caractères spéciaux, en l'occurence :
Ainsi, le format († %s) fera apparaître la date 1946 comme († 1946).
Pour forcer un passage à la ligne au milieu d'un libellé, vous devez insérer '
' à l'endroit voulu, mais il
n'est pas assuré que l'effet voulu se produite, selon l'usage que CreationWeb fait du libellé.
Pour insérer des libellés multiples, comme dans AutresMeta=, séparez ceux-ci par des | (barre verticale), par exemple AutresMetas=Libellé meta 1|Libellé meta 2...
Voici le début du fichier creationweb.ini :
;CreationWeb 20 août 2005
;ces libellés peuvent être modifiés
;ATTENTION : laisser en place les %s et %d qui correspondent à des variables
; ainsi que les séquences qui représentent des espaces inséquables
;Encadrer par des quotes (') pour préserver les espaces de part et d'autre.
[Libelles]
;----------------------------------------------------------------------------
; Global
;----------------------------------------------------------------------------
MenuRetour=Retour
FmatSosa=(s %s)
FmatAbov=(a %s)
FmatDateNaiss=o %s
FmatDateDeces=† %s
FmatDates=(%s)
SeparateurDates=' …
DateInconnue=
CertainementDecede='† '
VuePrincipaux=Vue des principaux
VueListeAlpha=Liste alphabétique
IlYaDesNotes=Il y a des notes
IlYaPhotoIdentite=Il y a une photo d'identité
Garcon=Garçon
Fille=Fille
SexeInconnu=Sexe ?
;----------------------------------------------------------------------------
; En-têtes toutes pages
;----------------------------------------------------------------------------
MetaDescription=
MetaKeywords=
MetaAuthor=
EnTeteEcuGauche='http://www.ancestrologie.com|ancestrologie.gif|Site de Ancestrologie'
EnTeteEcuDroite='http://www.ancestrologie.com|ancestrologie.gif|Site de Ancestrologie'
;----------------------------------------------------------------------------
; Pieds toutes pages
;----------------------------------------------------------------------------
PiedPage1='Page crée par |http://www.ancestrologie.com|Ancestrologie'
PiedPage2=' / |http://www.ybruant.magic.fr|CreationWeb'
PiedPage3=
PiedDate=' le %s'
PiedHeure=' %s'
CreationWeb utilise, pour les insérer dans les pages Web, les images qui se trouvent dans le répertoire …\Ancestrologie\WebExport\Templates\.
Vous pouvez toutes les remplacer par des images de votre choix, mais en gardant les mêmes noms et de préférence les mêmes dimensions, sinon, gare aux résultats !
Si vous voulez ajouter des images dans vos textes de haut de page d'accueil ou de bas de toutes les pages, je recommande que vous mettiez leur url complète de préférence à relative, ça vous évitera des soucis à l'occasion des transferts vers votre site.