Site web en une page [Résolu/Fermé]

Signaler
Messages postés
342
Date d'inscription
jeudi 29 octobre 2009
Statut
Membre
Dernière intervention
15 juillet 2019
-
zagaga
Messages postés
40
Date d'inscription
lundi 26 octobre 2009
Statut
Membre
Dernière intervention
7 septembre 2013
-
Bonjour à tous,

Je suis début dans le développement web, je maîtrise uniquement le HTML/CSS.
Voici mon site si jamais cela vous intéresse (fait en 10h environ): wwww.georges-durand.fr

Comment vous pouvez sans doute le voir, j'ai ajouté un bande son que l'on trouver sur l'index en bas à gauche, le problème est que si l'on change de page la musique s'arrête et recommence du début.

A ce problème, j'ai pensé à une solution:
Seul le contenu en milieu de page change, quel est le langage permettant d'actualiser seulement un <div> et non pas la page entière ?

Concrètement, je veux que l'en appuyant sur le lien "Compétences", seul le contenu du <div> au centre change.

4 réponses

Messages postés
40
Date d'inscription
lundi 26 octobre 2009
Statut
Membre
Dernière intervention
7 septembre 2013
34
Le moyen le plus propre et professionnel c'est l'utilisation de la technologie AJAX, tu vas chercher en Javascript des données d'une autre page générée ou non à l'aide de PHP. Cette technologie est utilisée par tous les grands sites comme Google, Facebook, Yahoo...
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 83357 internautes nous ont dit merci ce mois-ci

Maitre2B
Messages postés
342
Date d'inscription
jeudi 29 octobre 2009
Statut
Membre
Dernière intervention
15 juillet 2019
15
zagaga, le moyen que tu proposes pour régler mon problème est proche de la solution de uliendefully, non ?
zagaga
Messages postés
40
Date d'inscription
lundi 26 octobre 2009
Statut
Membre
Dernière intervention
7 septembre 2013
34
Non, pas du tout, ceci est une méthode professionnelle, tout s'affichera sur la même page, pas besoin d'en ouvrir une autre.

Plus d'infos :
http://www.siteduzero.com/informatique/tutoriels/ajax-et-l-echange-de-donnees-en-javascript
https://fr.wikipedia.org/wiki/Ajax_(informatique)
Messages postés
16104
Date d'inscription
samedi 31 mai 2008
Statut
Modérateur
Dernière intervention
24 janvier 2020
2 504
En HTML tu peux faire des frameset, cela va afficher plusieurs pages sur la même, tu en feras une pour ton menu, une pour ton titre, qui resteront toujours affichées, et plusieurs pour le corps du site qui sera la seule chose à changer à chaque fois.

http://www.w3.org/TR/html401/present/frames.html
Maitre2B
Messages postés
342
Date d'inscription
jeudi 29 octobre 2009
Statut
Membre
Dernière intervention
15 juillet 2019
15
Les framset, d'accord, merci beaucoup.
Messages postés
46
Date d'inscription
mardi 9 avril 2013
Statut
Membre
Dernière intervention
5 janvier 2016
6
Salut,
Essaye de faire ça, tu fais les deux étapes ci-dessous et après normalement ça devrait ouvrir le lecteur dans une popup en arrière plan et donc continuer de lire quand on change de page

1. Tu fais la page "lecteur.html" avec le code suivant (la page devras être hébergée l'adresse : http://www.georges-durand.fr/lecteur.html) :

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Lecteur</title>
</head>
<body>
<audio controls="controls" preload="none" autoplay="true"> <source
src="http://www.georges-durand.fr/get_lucky.mp3" type="audio/mp3">
Votre navigateur n'est pas compatible
</source></audio>
<a href="#" onClick="window.close();return false;">Fermer la fenêtre</a>
</body>
</html>


2. Tu ajoute ce code sur ta page d'accueil :

<!-- DEBUT DU SCRIPT -->
<script language="JavaScript">
/*
SCRIPT
*/
window.open('http://www.georges-durand.fr/lecteur.html','message','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=100, height=100, left=100, top=300');
</script><!-- FIN DU SCRIPT --><noscript>
</noscript><!-- DEBUT DU SCRIPT --><!-- FIN DU SCRIPT --> <noscript></noscript>


J'espère t'avoir aidé :)
Maitre2B
Messages postés
342
Date d'inscription
jeudi 29 octobre 2009
Statut
Membre
Dernière intervention
15 juillet 2019
15
Ca ne fonctionne pas :/
Absolument aucun changement à noter.
Maitre2B
Messages postés
342
Date d'inscription
jeudi 29 octobre 2009
Statut
Membre
Dernière intervention
15 juillet 2019
15
la page lecteur.html fonctionne bien.
Par contre, aucun changement au niveau de mon index.html.

Peut etre que je n'ai pas comprit quelque chose.
Quelle était le but de la manoeuvre exactement ?
Maitre2B
Messages postés
342
Date d'inscription
jeudi 29 octobre 2009
Statut
Membre
Dernière intervention
15 juillet 2019
15
Ah ça fonctionne bien, sauf que ça ne fait pas très pro de faire une nouvelle page pour mettre de la musique :s
Messages postés
342
Date d'inscription
jeudi 29 octobre 2009
Statut
Membre
Dernière intervention
15 juillet 2019
15
D'autre avis ?
KX
Messages postés
16104
Date d'inscription
samedi 31 mai 2008
Statut
Modérateur
Dernière intervention
24 janvier 2020
2 504
À quoi ça sert d'avoir d'autres avis puisque l'on t'as déjà donné la réponse ?

Pour changer seulement une partie de la page tu peux faire des framesets, seul le frame qui change sera rechargé.

Exemple complet :

index.html :
<html>
<head>
</head>
<framset cols="20%, 80%">
<frame name="menu" src="menu.html">
<frame name="page" src="page1.html">
</frameset>
</html>

menu.html :
<h1>Menu</h1>
<script>alert("Menu");</script>
<a href="page1.html" target="page">Page 1</a><br/>
<a href="page2.html" target="page">Page 2</a><br/>
<a href="page3.html" target="page">Page 3</a>

page1.html :
<h1>Page 1</h1>
<script>alert("page 1");</script>

page2.html :
<h1>Page 2</h1>
<script>alert("page 2");</script>

page3.html :
<h1>Page 3</h1>
<script>alert("page 3");</script>

Après tu peux aussi faire de la manipulation du DOM en JavaScript, mais c'est plus compliqué et vu ce que tu veux faire je ne vois pas l'intérêt de se compliquer la tâche...
KX
Messages postés
16104
Date d'inscription
samedi 31 mai 2008
Statut
Modérateur
Dernière intervention
24 janvier 2020
2 504
Ici j'ai mis des alert pour montrer que celui de menu.html n'est appelé qu'une seule fois, lors du chargement de index.html, mais lorsque l'on change de page le menu reste en place, il n'est pas rechargé, et n'affiche donc pas l'alert.

Ta question initiale concernait de la musique, si tu mets celle-ci sur la page de menu, elle va se poursuivre malgré le changement de page.

Menu.html :

<h1>Menu</h1>

<a href="page1.html" target="page">Page 1</a><br/>
<a href="page2.html" target="page">Page 2</a><br/>
<a href="page3.html" target="page">Page 3</a><br/>

<div class = "lecteur">
	<audio controls height="100" width="100">
		<source src="get_lucky.mp3" type="audio/mpeg">
	</audio>
</div>