Page 1 sur 1
Arborescence de pages
Publié : 11 déc. 2008, 10:50
par DavidR
Bonjour,
je vais effectuer un lifting de mon site internet, et pour cela j'aimerais effectuer une traduction en anglais.
Pour simplifier ma gestion des liens, j'aimerais savoir comment effectuer une arborescence de pages, à savoir :
exemple:
Y'a t'il une histoire de pages et sous pages (comme pour les fichiers sous fichiers)?
Merci
David
[/quote]
Publié : 11 déc. 2008, 12:01
par chinon37
Bonjour,
Pour ton site exemple.fr, tu créeras sur le serveur de l'hébergeur deux dossiers: un dossier fr et un dossier eng à la racine du site à côté de la page d'accueil générale qui permet le choix de la langue.
Tout ce qui sera en français sera dans le dossier fr et tout ce qui sera en anglais sera dans le dossier eng. Par contre inutile de déplacer les fichiers images, feuilles de style ou script qui peuvent rester communs aux 2.
Publié : 11 déc. 2008, 12:23
par DavidR
Ok, c'est tout bête!
Par contre ce n'est que dans mon serveur que je vais devoir faire cela?
[j'utilise Mozilla, donc en gros j'aurais dans mon fichier public.html ma page index.html et 2 sous fichiers : Fr & Eng]
Ou dois-je déjà faire la séparation sur Kompozer?
En tout cas merci pour la réponse rapide
Publié : 11 déc. 2008, 13:29
par chinon37
Prépares tout directement sur ton disque dur lors de la création de tes pages avec KompoZer:
Tu as ton dossier
site qui contient l'ensemble des fichiers de ton site. Dans ce dossier, tu enregistres la page index.html d'accueil général qui permet le choix de la langue.
Dans ce même dossier
site, tu crées deux autres dossiers :
fr et
eng comme expliqué plus haut.
Lors du chargement sur le serveur de ton hébergeur (avec filezilla, fireftp, etc...), il te suffira de glisser les dossiers fr et eng ainsi que le fichier index.html dans le répertoire prévu par l'hébergeur (généralement
www ou
web, mais ça peut être autre chose en fonction de l'hébergeur).
David a écrit :j'utilise Mozilla, donc en gros j'aurais dans mon fichier public.html ma page index.html et 2 sous fichiers : Fr & Eng
J'ai l'impression que tu confonds fichier et dossier.
le fichier index.html que tu mets
dans le répertoire racine de ton site contiendra 2 liens: l'un renverra sur index.html
de ton dossier fr, et l'autre vers ton dossier index.html de
ton dossier eng.
Ces liens peuvent très bien être faits sur des images (drapeaux par exemple comme on le voit souvent)
Publié : 11 déc. 2008, 14:05
par DavidR
Oui en effet je me suis emmélé les pinceaux!
D'ailleurs quand je parlais de Mozilla en fait je parlais de Filezilla.
Sinon j'en profite aussi, pour cette page ajoutée (pour l'instant mon site est en français) est-ce que tu me conseille de mettre les 2 liens (FR / ENG) dans un tableau ou dans un menu horizontal?
Pour l'instant je tente avec cette deuxième solution, mais bizarrement ils ne s'alignent pas, mais se mettre l'un sous l'autre.
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Clôtures de chantier - Clôtures et Barrières - BATISEC</title>
<script type="text/javascript">
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
</script>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
background-image: url(Image/Background1.jpg);
width: 100%;
max-width: 100%;
background-position: center top;
background-repeat: no-repeat;
min-width: 100%;
height: 100%;
min-height: 100%;
max-height: 100%;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#entete {
background-color: transparent;
}
#imgbatisec {
float: right;
}
#imglogo160x80 {
margin-left: 200px;
}
#diventet {
height: 400px;
}
#menu {
border-style: none;
border-width: 0px;
background-color: transparent;
width: 100%;
text-align: center;
margin-top: 25%;
}
#vertical {
background-color: transparent;
font-family: verdana,arial,sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 80%;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
float: left;
}
dl, dt, dd, ul {
margin: 0;
padding: 0;
list-style-type: none;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#vertical {
position: absolute;
float: left;
}
dl#vertical {
width: 15em;
background-color: transparent;
}
dl#vertical dt {
border: 1px solid black;
margin: 2px 0;
background: transparent none repeat scroll 0% 50%;
cursor: pointer;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
}
dl#vertical dd {
border: 1px solid black;
background-color: transparent;
color: black;
}
dl#vertical li {
background: transparent none repeat scroll 0% 50%;
text-align: center;
color: black;
}
dl#vertical li a, dl#vertical dt a {
border: none;
text-decoration: none;
display: block;
height: 100%;
color: black;
}
dl#vertical li a:hover, dl#vertical dt a:hover {
background: transparent none repeat scroll 0% 50%;
color: red;
}
dl#vertical li a:visited, dl#vertical dt a:hover {
background: transparent none repeat scroll 0% 50%;
color: black;
}
#menu a {
border-style: none;
font-weight: bold;
text-align: center;
text-decoration: none;
list-style-type: none;
color: black;
background-color: transparent;
}
#menu a:visited {
text-decoration: none;
color: black;
background-color: transparent;
}
#menu a:hover {
color: red;
}
#menu li {
text-align: center;
text-decoration: none;
float: left;
list-style-type: none;
background-color: transparent;
width: 50%;
}
</style>
</head>
<body style="">
<div id="menu">
<ul>
<li><big><a href="FR/presentation.html"><img
style="width: 30px; height: 20px;" alt=""
src="Image/France.svg.png"></a><a
href="FR/presentation.html"> VERSION FRANCAISE</a>
</big></li>
<li><big><a href="ENG/presentation.html"><img
style="width: 30px; height: 20px;" alt=""
src="Image/Royaume%20Uni.svg.png"></a><a
href="ENG/presentation.html"> ENGLISH VERSION</a>
</big></li>
</ul>
<br>
</div>
</body>
</html>
Publié : 11 déc. 2008, 17:30
par chinon37
Ci-dessous une page avec les deux liens en ligne et sans tableau:
Une liste avec un positionnement en ligne des éléments de la liste:éditeur css > règle pour
li > boite > affichage > en ligne
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-15" http-equiv="content-type">
<title>
essai
</title>
<meta content="Porco rosso" name="author">
<style type="text/css">
li {
display: inline;
margin-right: 50px;
margin-left: 50px;
text-align: center;
}
body {
text-align: center;
width: 100%;
}
ul {
margin-top: 200px;
font-size: 1.5em;
text-decoration: none;
font-weight: bold;
color: black;
}
a {
color: #33cc00;
text-decoration: none;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">anglais</a>
</li>
<li>
<a href="#">français</a>
</li>
</ul>
</body>
</html>
Publié : 12 déc. 2008, 14:44
par DavidR
Merci !
Publié : 15 déc. 2008, 15:00
par DavidR
Par contre il s'emblerait que j'ai un problème avec l'affihage de cette page. Comment faire pour que l'affichage se fasse à 100% de l'éran que l'on soit en 1280 x 1024 ou en 800 x 600 ?
En fait cette page ne sera composé que d'une image et de 2 mots :
Français
Anglais
De plus j'ai le même genre de problèmes pour le menu horizontal qui va s'installer sur 2 lignes si je réduis ma fenêtre ! Pourtant, concernant mon menu j'ai ceci :
body {
margin: 0px;
padding: 0px;
width: 100%;
max-width: 100%;
background-image: url(../Image/Background.jpg);
min-width: 100%;
height: 100%;
min-height: 100%;
max-height: 100%;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-repeat: repeat-y;
background-position: center top;
}
#menu {
border-style: none;
border-width: 0px;
background-color: transparent;
width: 100%;
}
#menu a {
border-style: none;
font-weight: bold;
text-align: center;
text-decoration: none;
list-style-type: none;
color: black;
background-color: transparent;
}
#menu a:visited {
text-decoration: none;
color: black;
background-color: transparent;
}
#menu a:hover {
color: red;
}
Le " width: 100% " n'est-il pas suffisant??
Merci !