Comment faire un site sur une seul page ?
martine et chantal
Messages postés
485
Date d'inscription
Statut
Membre
Dernière intervention
-
avion-f16 Messages postés 19255 Date d'inscription Statut Contributeur Dernière intervention -
avion-f16 Messages postés 19255 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
je suis en train de créer un site pour mon groupe.
J'utilise Notepad++ pour l'html/css
j'ai créer une page d'acceuil en .jpg avec photoshop
Cette page comporte plusieurs cubes cliquables.
j'aimerai que ces cubes restent présents quelque soit la page.
Lorsqu'on clique sur un cube (lien "discographie", "contact", ... ) un élément s'ajoute à la page d'acceuil. Je tente de donner l'illusion de rester tjrs sur la même page.
pour cela chaque fois qu'on clique sur un lien on atteris sur une page identique à la page d'acceuil + l'info désirée (ex: la discographie).
Alors ... ok ça marche mais il y a de la latence et surtout sur IE.
Du coup entre chaque page les cubes disparaissent le temps du chargement.
Mon illusion est donc raté le temps d'1 seconde.
Quel est le moyen de faire apparaitre des modules, du texte, des infos quoi ! tout en restant sur la même page ?
Vers quel langage dois-je me pencher ? quel logiciel ?
Est-ce possible qu'avec du HTML/CSS ? je dirais oui ... mais comment me débarrasser de cette latence ?
Vos conseils sont la bienvenue !
je suis en train de créer un site pour mon groupe.
J'utilise Notepad++ pour l'html/css
j'ai créer une page d'acceuil en .jpg avec photoshop
Cette page comporte plusieurs cubes cliquables.
j'aimerai que ces cubes restent présents quelque soit la page.
Lorsqu'on clique sur un cube (lien "discographie", "contact", ... ) un élément s'ajoute à la page d'acceuil. Je tente de donner l'illusion de rester tjrs sur la même page.
pour cela chaque fois qu'on clique sur un lien on atteris sur une page identique à la page d'acceuil + l'info désirée (ex: la discographie).
Alors ... ok ça marche mais il y a de la latence et surtout sur IE.
Du coup entre chaque page les cubes disparaissent le temps du chargement.
Mon illusion est donc raté le temps d'1 seconde.
Quel est le moyen de faire apparaitre des modules, du texte, des infos quoi ! tout en restant sur la même page ?
Vers quel langage dois-je me pencher ? quel logiciel ?
Est-ce possible qu'avec du HTML/CSS ? je dirais oui ... mais comment me débarrasser de cette latence ?
Vos conseils sont la bienvenue !
A voir également:
- Comment faire un site sur une seul page ?
- Comment supprimer une page sur word - Guide
- Comment imprimer un tableau excel sur une seule page - Guide
- Site de telechargement - Accueil - Outils
- Site comme coco - Accueil - Réseaux sociaux
- Quel site remplace coco - Accueil - Réseaux sociaux
9 réponses
Bonjour,
C'est faisable en PHP.
Voici un tuto permettant de le faire:
http://phpdebutant.org/article68.php
C'est faisable en PHP.
Voici un tuto permettant de le faire:
http://phpdebutant.org/article68.php
Salut.
Pour commencer, Photoshop ne sert pas à créer des pages d'accueils. Tu peux créer ta maquette, la découper en petites images et assembler tout ça à la main en (x)HTML/CSS.
Le PHP nécessite un chargement de page pour être exécuté. Si tu ne veux aucun chargement total de la page, il faudra passer passer par du Javascript. Tu peux soit placer le contenu dans des div masqués et les afficher, ou bien aller chercher le contenu avec AJAX et remplacer le contenu d'un div principal.
Pour commencer, Photoshop ne sert pas à créer des pages d'accueils. Tu peux créer ta maquette, la découper en petites images et assembler tout ça à la main en (x)HTML/CSS.
Le PHP nécessite un chargement de page pour être exécuté. Si tu ne veux aucun chargement total de la page, il faudra passer passer par du Javascript. Tu peux soit placer le contenu dans des div masqués et les afficher, ou bien aller chercher le contenu avec AJAX et remplacer le contenu d'un div principal.
ok merci
J'ai tapé flash-référencement sur google et ... ok j'ai compris l'ampleur.
Avion-f16 dit " Le PHP nécessite un chargement de page pour être exécuté "
tant qu'à faire j'aimerai un site légé.
Je vais donc me pencher sur le JAVA.
Connaissez-vous un bon Tuto à part le site du zéro ?
J'ai tapé flash-référencement sur google et ... ok j'ai compris l'ampleur.
Avion-f16 dit " Le PHP nécessite un chargement de page pour être exécuté "
tant qu'à faire j'aimerai un site légé.
Je vais donc me pencher sur le JAVA.
Connaissez-vous un bon Tuto à part le site du zéro ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Ne confonds pas le Java et le Javascript, ça n'a rien à voir du tout (utilise JS pour abrégé Javascript).
Pour les tutoriels :
https://javascript.developpez.com/cours/
https://www.commentcamarche.net/faq/javascript-77
https://www.commentcamarche.net/contents/javascript-2229965047
https://www.commentcamarche.net/contents/dhtml-2477588841
https://www.alsacreations.com/tuto/liste/5-javascript.html
https://www.w3schools.com/js/default.asp
http://w3schools.com/htmldom/default.asp
Bonne lecture :)
Ton ordinateur ne fait pas ce que tu veux ... mais ce que tu lui dis de faire.
Pour les tutoriels :
https://javascript.developpez.com/cours/
https://www.commentcamarche.net/faq/javascript-77
https://www.commentcamarche.net/contents/javascript-2229965047
https://www.commentcamarche.net/contents/dhtml-2477588841
https://www.alsacreations.com/tuto/liste/5-javascript.html
https://www.w3schools.com/js/default.asp
http://w3schools.com/htmldom/default.asp
Bonne lecture :)
Ton ordinateur ne fait pas ce que tu veux ... mais ce que tu lui dis de faire.
Je vais donc me pencher sur le JAVA.
là ça va pas l'faire du tout ... c'est un langage de programmation à ne pas confondre avec "JavaScript" .... :-)))
Bon je me rends compte que le javascript s'intègre dans l'html.
Je me suis amusé à copier des pages html/javascript avec des liens cliquables pour comprendre comment ça marche.
J'ai trouvé une page html qui correspond à ce que je veux faire :
rester sur une même page et faire apparaître des images en cliquant sur des boutons.
Seulement la plupart des codes que je trouve prennent en exemple des textes qui font apparaître des textes.
Peut importe, j'ai remplacé le texte par des <img src= " " >
Je me suis arrêté à images cliquables pour faire apparaître du texte car
ça marche sur FF mais pas sur IE !
Pourquoi ?
Voici la page que j'ai copié avec mes modifications :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>GROUPE</title>
<head>
<script language="javascript">
function toggle(){ var div1 = document.getElementById('div1')
if (div1.style.display == 'none') { div1.style.display = 'block' }
else { div1.style.display = 'none' } }
function toggle1(){ var div2 = document.getElementById('div2')
if (div2.style.display == 'none') { div2.style.display = 'block' }
else { div2.style.display = 'none' } }
</script>
</head>
<body>
<div <a href='javascript: toggle()'><img src="ICONE1.jpg" border="0"></a> </div>
<div id='div1' style='display:none'> Album 1 (2010) </div>
<div <a href='javascript: toggle1()'><img src="ICONE2.jpg" border="0"></a> </div></a> </div>
<div id='div2' style='display:none'> groupe@myspace.com </div>
</body>
</html>
Je me suis amusé à copier des pages html/javascript avec des liens cliquables pour comprendre comment ça marche.
J'ai trouvé une page html qui correspond à ce que je veux faire :
rester sur une même page et faire apparaître des images en cliquant sur des boutons.
Seulement la plupart des codes que je trouve prennent en exemple des textes qui font apparaître des textes.
Peut importe, j'ai remplacé le texte par des <img src= " " >
Je me suis arrêté à images cliquables pour faire apparaître du texte car
ça marche sur FF mais pas sur IE !
Pourquoi ?
Voici la page que j'ai copié avec mes modifications :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>GROUPE</title>
<head>
<script language="javascript">
function toggle(){ var div1 = document.getElementById('div1')
if (div1.style.display == 'none') { div1.style.display = 'block' }
else { div1.style.display = 'none' } }
function toggle1(){ var div2 = document.getElementById('div2')
if (div2.style.display == 'none') { div2.style.display = 'block' }
else { div2.style.display = 'none' } }
</script>
</head>
<body>
<div <a href='javascript: toggle()'><img src="ICONE1.jpg" border="0"></a> </div>
<div id='div1' style='display:none'> Album 1 (2010) </div>
<div <a href='javascript: toggle1()'><img src="ICONE2.jpg" border="0"></a> </div></a> </div>
<div id='div2' style='display:none'> groupe@myspace.com </div>
</body>
</html>
- Utilise plutôt l'attribut "onclick" sans le protocol "javascript:" pour mettre ton code
- Les valeurs des attributs toujours entre guillemets doubles
- Avant les deux liens tu oublies le ">" pour fermer "<div".
- Les noms des fichiers doivent être en minuscules
- L'attribut alt est obligatoire sur la balise img
- Utilise le CSS au lieu de mettre le style avec les attributs (tu peux mettre du CSS avec l'attribut style).
- Les valeurs des attributs toujours entre guillemets doubles
- Avant les deux liens tu oublies le ">" pour fermer "<div".
- Les noms des fichiers doivent être en minuscules
- L'attribut alt est obligatoire sur la balise img
- Utilise le CSS au lieu de mettre le style avec les attributs (tu peux mettre du CSS avec l'attribut style).
<div>
<a href="#" onclick="toggle(); return false;">
<img src="icone1.jpg" alt="" style="border:0px;" />
</a>
</div>
<div id="div1" style="display:none"> Album 1 (2010) </div>
<div>
<a href="#" onclick="toggle1(); return false;">
<img src="icone2.jpg" alt="" style="border:0px;" />
</a>
</div>
<div id="div2" style="display:none;"> groupe@myspace.com </div>
merci avion-f16 !
effectivement mes images deviennent cliquables sous IE mais le texte attribué n'apparait pas.
par contre ça marche toujours sous FF.
( IE est un vrai casse-tête ! c'est pas possible ! j'ai passé énormément de temps à apprendre à feinter IE avec mon myspace. C'est ce qui m'a donné envie de faire un site mais je me rends compte que le problème IE reste le m^me)
PS: je n'oublie pas les liens tutos que tu m'as proposé. Seulement je ne pense pas qu'il soit nécessaire de tout apprendre. Ou plutôt je me concentre d'abord sur un objectif : faire des images cliquables pour faire apparaitre des images.
effectivement mes images deviennent cliquables sous IE mais le texte attribué n'apparait pas.
par contre ça marche toujours sous FF.
( IE est un vrai casse-tête ! c'est pas possible ! j'ai passé énormément de temps à apprendre à feinter IE avec mon myspace. C'est ce qui m'a donné envie de faire un site mais je me rends compte que le problème IE reste le m^me)
PS: je n'oublie pas les liens tutos que tu m'as proposé. Seulement je ne pense pas qu'il soit nécessaire de tout apprendre. Ou plutôt je me concentre d'abord sur un objectif : faire des images cliquables pour faire apparaitre des images.
tu as complètement le droit de me traiter de NAZE !
pardon.
en attendant il existe tt de même pleins de discussions sur les différences de compréhension entre les navigateurs non ?
En tout cas pour une configuration myspace chiadée j'ai roulé ma bosse et crois moi
IE est ultra pénible. il faut toujours un attribut, une ligne, quelque chose pour qu' IE comprenne ce qu'on lui demande de faire.
BREF. merci. je repars tête baissée sur mon site.
pardon.
en attendant il existe tt de même pleins de discussions sur les différences de compréhension entre les navigateurs non ?
En tout cas pour une configuration myspace chiadée j'ai roulé ma bosse et crois moi
IE est ultra pénible. il faut toujours un attribut, une ligne, quelque chose pour qu' IE comprenne ce qu'on lui demande de faire.
BREF. merci. je repars tête baissée sur mon site.
si j'ai bien compris tu utilise une seule et unique image pour tout ton site pour que l'illusion soie parfaite? Si c'est le cas une seule image pour tout un site doit peser trop trop lourde pour les navigateur. Le mieux c'est d'utiliser des images que pour les divers parti de ton site (bandeau, menu, pied, corp, etc) et ensuite faire tes encadrer par le biais de html, en utilisant les tableau. ton illusion restera parfaite et ta page se chargera bocou plus vite. j'espere t'avoir aidé.
Bonne Continuation