retour

MODIFIER L'ASPECT DES PAGES AVEC CSS

Rappel

nous avons ces pages créées par XnView

elles se trouvent dans le répertoire 'galerie'

xnview nous a généré une page comme ça nous allons modifier ces pages pour arriver à ça

ATTENTION SI VOUS AVEZ UNE VERSION RECENTE DU LOGICIEL !
la méthode n'est plus la même avec la dernière version d'XnView (v 1.82.2)
elle créé une feuille de style externe, ya plus qu'à la modifier à souhait :

garder le nom de la feuille css et l'éditer (avec le bloc-note par exemple)
garder les nom des styles préexistants
modifier les styles à l'interieur des accolades

la manip en 2 phases

copier le code

copier le code suivant
le coller dans notepad (bloc-note windows par exemple - ne pas utiliser word ou wordpad !)
le sauvegarder dans le réperoire 'site/galerie'
lui donner le nom suivant : web_by_xnview.css
on peut constater que l'image de fond des pages se nomme bg.jpg; ce fichier doit être dans le même répertoire que ce fichier css

/* ASPECTS VISUELS DES LIENS HYPERTEXTE*/
a { font-weight: bold;
text-decoration: none;
color: #222222;
}
a:link { font-weight: bold;
text-decoration: none;
color: #222222;
}
a:visited { font-weight: bold;
text-decoration: none;
color: #222222;
}
a:hover { font-weight: bold;
text-decoration: underline;
color: #444444;
}
a:active { font-weight: bold;
text-decoration: none;
color: #444444;
}

/* PAGE */
body { background-color: #C8C0AC;
background-image: url(bg.jpg);
font-size: 12px;
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
color: #555500;
margin: 20px;
text-align: center;
}
h1 {
font-size: 16px;
font-weight: bold;
color: #006600;
border-style: solid;
border-color: #FFFFAA;
border-width: 0px;
border-bottom-width: 2px;
}
i {
padding: 10px;
font-size:10px;
border-style: solid;
border-color: #FFFFAA;
border-width: 0px;
border-top-width: 2px;
}
table {
padding: 2px;
border-width: 0px;
font-size: 12px;
margin: 0px;
margin-bottom: 8px;
}
td {
vertical-align:middle;
border-style: solid;
border-color:#F8F7DC;
border-bottom-color:#A8A78C;
border-left-color:#A8A78C;
border-width:1px;
text-align: center;
padding: 10px;
}
img {
vertical-align: middle;
margin-right: 10px;
}

modifier les pages

ouvrir chaque page avec notepad (bloc-note)
ajouter le code suivant au bon endroit (voir ci-dessous) : <link rel='stylesheet' type='text/css' href='./web_by_xnview.css'>

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta name="GENERATOR" content="XnView v1.74">
<title>Galerie photos</title>

<link rel='stylesheet' type='text/css' href='./web_by_xnview.css'>

</head>
<BODY>
...

sommaire
créer une galerie photos avec XnView
créer une page avec nVu