Site web en une page

Résolu/Fermé

Maitre2B Messages postés 341 Date d'inscription jeudi 29 octobre 2009 Statut Membre Dernière intervention 11 avril 2020 - 9 août 2013 à 20:47
zagaga Messages postés 37 Date d'inscription lundi 26 octobre 2009 Statut Membre Dernière intervention 27 mars 2020 - 7 sept. 2013 à 17:35

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.

A voir également:

Site web en une page
Site de telechargement - Accueil - Outils
Supprimer une page word - Guide
Traduire une page web - Guide
Site comme coco - Accueil - Réseaux sociaux
Création site web - Guide

4 réponses

Réponse 1 / 4

zagaga Messages postés 37 Date d'inscription lundi 26 octobre 2009 Statut Membre Dernière intervention 27 mars 2020 34
10 août 2013 à 01:48

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...

Maitre2B Messages postés 341 Date d'inscription jeudi 29 octobre 2009 Statut Membre Dernière intervention 11 avril 2020 33
13 août 2013 à 05:51

zagaga, le moyen que tu proposes pour régler mon problème est proche de la solution de uliendefully, non ?

zagaga Messages postés 37 Date d'inscription lundi 26 octobre 2009 Statut Membre Dernière intervention 27 mars 2020 34
7 sept. 2013 à 17:35

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 :
https://openclassrooms.com/fr/courses
https://fr.wikipedia.org/wiki/Ajax_(informatique)

Réponse 2 / 4

KX Messages postés 16754 Date d'inscription samedi 31 mai 2008 Statut Modérateur Dernière intervention 25 novembre 2024 3 020
9 août 2013 à 21:19

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 341 Date d'inscription jeudi 29 octobre 2009 Statut Membre Dernière intervention 11 avril 2020 33
12 août 2013 à 09:13

Les framset, d'accord, merci beaucoup.

Réponse 3 / 4

juliendefully Messages postés 46 Date d'inscription mardi 9 avril 2013 Statut Membre Dernière intervention 5 janvier 2016 13
9 août 2013 à 21:32

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 341 Date d'inscription jeudi 29 octobre 2009 Statut Membre Dernière intervention 11 avril 2020 33
12 août 2013 à 09:12

Ca ne fonctionne pas :/
Absolument aucun changement à noter.

Maitre2B Messages postés 341 Date d'inscription jeudi 29 octobre 2009 Statut Membre Dernière intervention 11 avril 2020 33
12 août 2013 à 09:20

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 341 Date d'inscription jeudi 29 octobre 2009 Statut Membre Dernière intervention 11 avril 2020 33
13 août 2013 à 13:58

Ah ça fonctionne bien, sauf que ça ne fait pas très pro de faire une nouvelle page pour mettre de la musique :s

Réponse 4 / 4

Maitre2B Messages postés 341 Date d'inscription jeudi 29 octobre 2009 Statut Membre Dernière intervention 11 avril 2020 33
18 août 2013 à 17:34

D'autre avis ?

KX Messages postés 16754 Date d'inscription samedi 31 mai 2008 Statut Modérateur Dernière intervention 25 novembre 2024 3 020
18 août 2013 à 17:56

À 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 16754 Date d'inscription samedi 31 mai 2008 Statut Modérateur Dernière intervention 25 novembre 2024 3 020
Modifié par KX le 18/08/2013 à 18:14

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>

Discussions similaires

C'est quoi le site qui remplace coco chat