Version complète: sur le forum Webmaster Hub : chargement des différentes pages
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
gatsu07
Bonjour, je suis nouveau sur le forum, donc bonjour a tout le monde.
Je suis actuellement entrain de réaliser un site web, mais je coince sur un problème tout bête. Comment gérer l'affichage de mes différentes pages.
Je structure mes pages avec du CCS, mais comment a partir d'un menu charger une autre page ... j'ai fait une version en ajax (surtout pour tester la technologie), mais je voudrais faire une version plus grand public
Théo B.
Bonjour,
Le problème que tu exposes n'est pas très précis.
Comment gérer l'affichage ?
C'est avant tout ton choix.
Tu as plusieurs possibilités que tu peux combiner.
Les principales :
Mettre en forme un site en (x)HTML et CSS.
Mettre en ligne un fil XML.
Mettre une version basse qualité (pas d'images, pas de javascript) pour les vieux browsers.
Et beaucoup d'autres possibilités.

Donne nous des informations sur ton contenu et ton site, ça nous aidera à te conseiller!


//EDIT : Et bienvenue sur le Hub! IMSTP2.gif
NorSeb
Bonjour,

Soit le bienvenue sur le Hub smile.gif

CITATION(gatsu07 @ mardi 28 mars 2006, 18h32)
Bonjour, je suis nouveau sur le forum, donc bonjour a tout le monde.

Même les anciens disent bonjour... ne perds pas l'habitude biggrin.gif

CITATION
Je suis actuellement entrain de réaliser un site web, mais je coince sur un problème tout bête. Comment gérer l'affichage de mes différentes pages.

Qu'entend-tu par gérer l'affichage ?
gatsu07
Mon site est léger, il est fait en html avec un fichier css derrière. Je pense passer au htxml, mais je vois pas trop la différence (enfin je lis un tuto dessus, peut être que j'aurais les idées plus claires après smile.gif).

ce que j'entends pas affichage :
pour l'instant :j'ai créer un fichier html pour chacune de mes pages, et au clic sur mon menu je charge la page correspondante. Seulement ce traitement est en ajax, donc pas top.
Je me demande donc comment gérer ces changements de pages autrement. En gros, comment quand on clique sur le menu, afficher le contenu correspondant dans ma page ?
MS-DOS_1991
CITATION(gatsu07 @ mardi 28 mars 2006, 18h42)
ce que j'entends pas affichage :
pour l'instant :j'ai créer un fichier html pour chacune de mes pages, et au clic sur mon menu je charge la page correspondante. Seulement ce traitement est en ajax, donc pas top.
Je me demande donc comment gérer ces changements de pages autrement.  En gros, comment quand on clique sur le menu, afficher le contenu correspondant dans ma page ?
*

Bonjour à toi smile.gif

Tu peux utiliser la balise object (valide XHTML 1.0 Strict):
HTML
<object type="text/html" id="main_content" data="ton_premier_contenu.html" style="width: 640px; height: 480px;"></object>

Ensuite, (je crois que) tu dois utiliser l'attribut target dans tes liens du menu:
HTML
<div id="menu">
<p><a href="ton_second_contenu.html" target="main_content">Lien 1</a></p>
<p><a href="ton_troisieme_contenu.html" target="main_content">Lien 2</a></p>
<p><a href="ton_quatrieme_contenu.html" target="main_content">Lien 3</a></p>
</div>


Je ne suis pas sûr de moi, alors dis-nous si ça marche B) (ou si ça ne marche pas unsure.gif )

P.S: Cette méthode ne doit pas être tellement meilleure que l'iframe côté référencement, alors à utiliser avec précaution wink.gif
Tu peux aussi utiliser les includes en PHP (top côté référencement), mais alors tu perdra l'avantage des iframes qui est de ne rafraîchir qu'une partie de la page rolleyes.gif
gatsu07
Merci de ton idée, mais j'ai des petits problèmes a l'appliquer :

j'ai essayé de le mettre dans mon ancienne balise
CODE
<li href="accueil.html" target="main_content" onmouseover="on_hover(this);" onmouseout="out_hover(this);">Accueil</li>

et ca marche pas

Par contre, en la mettant dans une balise <p> ca l'envoie dans une nouvelle page ...

ps : tu disais que c'était peut être pas la meilleur solution, c'est à dire ? il y en a d'autres mais plus compliqué ?
captain_torche
CITATION(MS-DOS_1991 @ mardi 28 mars 2006, 19h22)
Tu peux aussi utiliser les includes en PHP (top côté référencement), mais alors tu perdra l'avantage des iframes qui est de ne rafraîchir qu'une partie de la page
*


En même temps, avec une bonne intégration, recharger le menu (juste le HTML), ne coûte vraiment rien en bande passante.
Dans ce cas précis, je ne saurai que te déconseiller l'AJAX pour la gestion de tes pages.
Tu as plusieurs alternatives :
- un fichier par page, appelant (via des includes), tes fichiers de navigation
- un fichier central, contenant la navigation, et appelant par includes le contenu (en rechargeant la page avec différents paramètres).

Dans le dernier cas, pour bénéficier d'un bon référencement, il faudra gérer dynamiquement le titre de la page, et il faudra également utiliser de l'url-rewriting, pour transformer une page du genre h**p://monsite/index.php?menu=news&page=2, en h**p://monsite/news/page-2.html.

Bien sûr, ça ne suffira pas à bien être placé dans les moteurs, mais ça évitera d'être pénalisé (une seule page appelée, avec différents paramètres).
gatsu07
Ces autres solutions ont l'air interessantes.

CITATION
- un fichier par page, appelant (via des includes), tes fichiers de navigation

ce qui veut dire un fichier qui contient le contenu, le menu, enfin tout .... vue que mon site devrait être léger, ca ne devrait pas être pénalisant ? Mais au niveau esthétisme, voir toute la page rechargé n'est il pas un peu disgracieu ?

CITATION
- un fichier central, contenant la navigation, et appelant par includes le contenu (en rechargeant la page avec différents paramètres).

cela ressemble à la solution de MS-DOS utilisant la balise <object>, qu'elle est la différence avec la gestion par include ? est ce que tu aurais une aide, un tutorial pour utiliser les includes ? et aussi un tuto sur l'url rewritting .. ? merci
MS-DOS_1991
CITATION(gatsu07 @ mardi 28 mars 2006, 19h57)
est ce que tu aurais une aide, un tutorial pour utiliser les includes ? et aussi un tuto sur l'url rewritting .. ? merci
*

Fais donc un tour du côté des Publications du HUB (Réécriture d'URLs à la volée avec mod_rewrite) wink.gif
captain_torche
La première solution, implique un fichier par élément 'fixe' de ton site (menu, header, footer ...), ainsi qu'un fichier par page de contenu, qui incluront chacun aux mêmes endroits, les fichiers d'éléments fixes.

La seconde méthode, plus complexe à mettre en oeuvre, centralise tout l'affichage sur une seule page.
Par exemple : la page appelée sans argument, inclut un fichier par défaut (par exemple la page d'accueil).
La même page appelée avec un argument (par exemple, page=liens), inclura une autre page (ici, celle des liens).

Tu peux trouver des tutos sur l'include, dans la plupart des sites traitant de PHP (phpdebutant, le site du zéro, etc).
Quant à l'url rewriting, les publications de webmaster-hub regorgent de bonnes trouvailles.
gatsu07
Merci de toutes ces réponses.
Quelles sont les avantages et inconvénients de ces deux méthodes ?
Et comment est ce que je dois procéder pour inclure mes fichiers sans passer par php, mon site est statique, pas de traitement côté serveur ...
captain_torche
Si tu ne peux pas utiliser PHP, oublie les deux méthodes pour l'instant, et fais ton site entièrement en statique.

En gros, tu vas devoir faire un fichier par page, chacun contenant le menu et son contenu spécifique.

Concernant les deux autres méthodes, l'avantage certain est qu'en cas de modification du menu (ajout d'un élément, ou autre), la modification est répercutée automatiquement dans chacune des pages du site.

La première des deux méthodes est plus simple à mettre en oeuvre, mais oblige toutefois à répéter dans chaque page, la structure de base du site.

La seconde est plus complexe, mais permet, quand elle est bien gérée, de n'avoir que le contenu informatif dans chacune des pages appelées. Comme tout s'organise autour d'un seul fichier, il est plus aisé de réotganiser l'intégralité du site, en ne modifiant que le fichier de base.
gatsu07
Je vais donc devoir me résigner à faire ce que je ne voulais pas faire, faire plusieurs pages identiques avec juste une partie qui change ... wacko.gif

Mais la solution préconisé par "MS-DOS" ne permet t'elle pas de charger nos pages dans une balise définie (balise object) ? ou ce n'est pas une solution interprété par la plupart des navigateurs ? ou ca ne marche pas ?
cf
CITATION
Tu peux utiliser la balise object (valide XHTML 1.0 Strict):
HTML
<object type="text/html" id="main_content" data="ton_premier_contenu.html" style="width: 640px; height: 480px;"></object>

Ensuite, (je crois que) tu dois utiliser l'attribut target dans tes liens du menu:
HTML
<div id="menu">
<p><a href="ton_second_contenu.html" target="main_content">Lien 1</a></p>
<p><a href="ton_troisieme_contenu.html" target="main_content">Lien 2</a></p>
<p><a href="ton_quatrieme_contenu.html" target="main_content">Lien 3</a></p>
</div>
captain_torche
Ben, comme il te l'a dit, c'est 'sous réserve de fonctionnement', donc il va falloir que tu testes par toi-même.

Sinon, le gros inconvénient de cette méthode, est exactement le même qu'avec les frames, donc je serai enclin à te la déconseiller :
- Il n'existe qu'une seule page de présentation, avec une seule URL d'accès (pas de paramètres modifiables dans l'url) : on ne peut donc accéder à ton site QUE par cette page.
- les moteurs de recherche suivront les liens de ton menu, indexeront sans doute tes pages de contenu, et par conséquent, un internaute risque d'arriver sur ton site par une de ces pages, qui ne contient ni en-tête (sur quel site suis-je ?), ni navigation. Il y a de fortes chances que le visiteur n'aille pas plus loin.

Sinon, par rapport aux "pages identiques avec une partie qui change", c'est comme ça que les sites statiques (sans frames) fonctionnent.
Et, si tu as bien géré la création de tes pages (séparation du contenu et de la présentation), le code récurrent dans tes pages ne sera pas bien gros.
gatsu07
Merci pour ces éclaircissements, je vais mettre en application cela.
MS-DOS_1991
CITATION(gatsu07 @ mercredi 29 mars 2006, 12h20)
Merci pour ces éclaircissements, je vais mettre en application cela.
*

Tiens-nous au courant wink.gif
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.