Site web en une page
Résolu
Maitre2B
Messages postés
341
Date d'inscription
Statut
Membre
Dernière intervention
-
zagaga Messages postés 37 Date d'inscription Statut Membre Dernière intervention -
zagaga Messages postés 37 Date d'inscription Statut Membre Dernière intervention -
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.
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.
A voir également:
- Site web en une page
- Supprimer une page word - Guide
- Site comme coco - Accueil - Réseaux sociaux
- Site de telechargement - Accueil - Outils
- Création site web - Guide
- Web office - Guide
4 réponses
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...
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
http://www.w3.org/TR/html401/present/frames.html
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) :
2. Tu ajoute ce code sur ta page d'accueil :
J'espère t'avoir aidé :)
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é :)
D'autre avis ?
À 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 :
menu.html :
page1.html :
page2.html :
page3.html :
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...
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...
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 :
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>
Plus d'infos :
https://openclassrooms.com/fr/courses
https://fr.wikipedia.org/wiki/Ajax_(informatique)