Arborescence de pages

DavidR · Message par **DavidR** » 11 déc. 2008, 10:50

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:

http://www.exemple.fr/fr/index.fr

&

http://www.exemple.fr/eng/index.fr

Y'a t'il une histoire de pages et sous pages (comme pour les fichiers sous fichiers)?

Merci

David

[/quote]

Message par **chinon37** » 11 déc. 2008, 12:01

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.

DavidR · Message par **DavidR** » 11 déc. 2008, 12:23

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

Message par **chinon37** » 11 déc. 2008, 13:29

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)

DavidR · Message par **DavidR** » 11 déc. 2008, 14:05

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>

Message par **chinon37** » 11 déc. 2008, 17:30

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>

DavidR · Message par **DavidR** » 12 déc. 2008, 14:44

Merci !

DavidR · Message par **DavidR** » 15 déc. 2008, 15:00

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 !

Geckozone

Arborescence de pages

Arborescence de pages

Qui est en ligne ?