création d'un site web

[arkayn]

Il y a aussi une solution à laquelle je n'avais pas pensé tout de suite : les frames.

Si tu mets ton menu dans une frame, il restera toujours à l'écran, quel que soit le contenu de la frame de droite (le texte).

Mais c'est vrai qu'on voit de moins en moins de frames sur les sites.

[svernoux]

Alors là, tu vas regretter d'avoir dit ça, aprce que maintenant, va falloir m'expliquer !

Non, je plaisante, je ne suis pas sûre qu'on parle de la même chose. Tu dis "mon menu restera toujours à l'écran" : je tiens pas à ce que les liens du menu apparaissent tout le temps, il peuvent très bien rester en haut de la page, c'est même ce que je veux. Ce que je voulais, c'est juste que le bloc du menu (le cadre bleu quoi) desence aussi bas que le cadre blanc (invisible ) du corps de texte. Sommes-nous sur la même longueur d'ondes ?

[arkayn]

Effectivement, nous n'étions pas sur la même longueur d'onde. Je fais un petit test après le boulot et je te donne la solution.

Quand à expliquer les frames, pas de soucis, tu auras ça en même temps.

[Latinus]

Heu désolé de tomber comme un cheveux dans la soupe, mais à l'heure actuelle (et depuis pas mal de temps déjà, c'est que ça passe vite ! ) il est préférable d'éviter l'utilisation de frame.
Pour des sites existants depuis longtemps comme ça, c'est sûr que ça peut demander du temps à changer, mais pour un site qui est en train d'être réalisé, autant arrêter avant de commencer

Les frames, c'est anti-référencement au possible et à moins d'user de javascripts bien tordus pour forcer les visiteurs à afficher le site en entier plutôt qu'une seule frame en dehors de tout contexte, rares sont ceux qui auront un apperçu entier de ton site.

[svernoux]

OK, OK, pas de frames ! (J'avais rien demandé, moi, de toute façon !)
d'accord, j'en mets pas, mais je veux quand même bien savoir ce que c'est, par curiosité
Et si je comprends bien, arkayn, tu comptes trouver une solution à ma question ?

[Latinus]

OK, OK, pas de frames ! (J'avais rien demandé, moi, de toute façon !)
d'accord, j'en mets pas, mais je veux quand même bien savoir ce que c'est, par curiosité
Et si je comprends bien, arkayn, tu comptes trouver une solution à ma question ?

Des frames, ce sont des zones de ta page qui contiennent chacune une page.
"des pages dans une page".

exemple :

index.html (ou .php) possède un menu Haut, un menu Gauche ainsi qu'une partie Principale (là où on affiche le contenu).
Dans le cas de frame, on pourrait très bien en même temps faire en sorte que chaque zone soit en faite enregistrée dans un fichier séparé.
On aurait donc un index.html qui fédère l'ensemble, un haut.html contenant le menu du haut, un gauche.html pour le menu de gauche et un main.html pour le contenu affiché en partie principale.
Chaque zone étant identifé par une "id" (genre : LEFT, TOP, MAIN, FOOTER, ...) on peut définir dans la balise <a></a> dans quelle zone va se produire le chargement de la page que le lien renseigne (target="MAIN") pour un lien dans le menu gauche, par exemple).

L'inconvénient est qu'un moteur de recherche renseigne chaque page indépendemment de l'ensemble ; ce qui à pour résultat d'avoir des recherches qui renseigneront uniquement l'une des pages html chargée dans une frame et non l'ensemble du site avec toutes les parties nécessaires à sa navigation.
En général on a des résultats qui ne donnent que les pages chargées en "MAIN", mais une fois qu'on en a lu le contenu, rien ne permet de visiter le reste du site dont la page dépend.

Je pense qu'il doit y avoir une astuce pour descendre ta colonne jusqu'au même niveau que le partie centrale, si Arkayn ne l'a pas trouvée avant moi je verrai pour trouver ça (mais demain promet d'être chargé).

[arkayn]

La soirée fût plus chargée que prévu et je n'ai pas eu le temps de me pencher sur la question.

Pourtant, j'ai jeté un petit coup d'oeil et la colonne bleu était toujours au même niveau que la colonne de droite, blanche. Je dois avoir des neurones qui ont besoin de repos ou tu as trouvé une solution ?

Sinon, tu peux tenter quelque chose. Sous le menu de gauche, tu rajoutes une image d'un pixel invisible (de même couleur que le fond ou sans couleur -transparente) et tu définies sa hauteur sur 100%.

Logiquement, l'image doit s'allonger jusqu'à s'adapter à la colonne de droite.


Pour les frames, effectivement, j'avais dit qu'on en voyait de moins en moins. Mais malgré les défauts cités par Lat, on peux parfois en tirer parti.

Une simple ligne de code dans le header (et qu'il faut que je retrouve) empêche de se trouver avec une page solitaire.

Un moteur de recherche même à cette page et donc le navigateur l'ouvre. Mais aussitôt le code inclus dans le header vérifie que cette page fait partie d'une frame et ouvre le site lui même.

Je me penche sur la question mais au boulot, je risque d'avoir très peu de temps.

[iubito]

j'ai pas tout suivi, mais je vois que ça parle de menu et frames...
je te propose ce menu.
Si tu veux un menu vertical, mais juste une liste de liens les uns en dessous des autres (donc pas de menu se déroulant vers la droite comme c'est le cas ici) du CSS suffira. Dis-moi ce que tu souhaites faire exactement.

[arkayn]

Toujours aussi bien ces menus, Iubito. Va falloir que je me décide à les adopter, le temps de tester aussi avec d'autres navigateurs que IE.

J'ai retrouvé l'info plus vite que prévu :

<script Language="javascript">
if (parent.frames.length==0) parent.location.href="url_de_la_frame_parente"
</SCRIPT>
à copier dans le header de chaque frame.

Tu remplaces url_de_la_frame_parente par l'url de ton site. Désormais, ce sera ton site qui s'ouvrira même si tu suis le lien qui mène à une des frames de ton site.


Les frames :

On pourrait les comparer à un tableau. La page web est divisée en cellules. Mais ici, chaque cellule est indépendante et est vraiment une nouvelle page web.

Chaque page web (frame) est regroupée au sein d'un frameset.
Exemple de page en frames

Si tu cliques sur un des liens (Menu 1, Menu 2...) la partie verte (une page html donc) sera remplacée par une autre page web.

Nous avons donc affaire ici avec 4 pages web différentes, l'une (la principale) incluant les 3 autres en elle.

Voici le code source du header de la page principale :

<html>
<head>
<title>creation et realisation de site : exemple avec des frames</title>
</head>
<frameset border="1" rows=20%,80% no resize>
<frame name="haut" scrolling="no" src="framehaut.html">
<frameset border="1" cols=10%,90%>
<frame name="menu" scrolling="no" src="framemenu.html">
<frame name="principal" src="frameprincipal.html">
<noframes>

<frameset border="1" rows=20%,80% no resize>
indique que la page est coupée en 2 horizontalement. La première "ligne" occupe 20 % de l'espace et la deuxième 80 %.

La première "ligne" (en rouge donc) est appellée par <frame name="haut" scrolling="no" src="framehaut.html">.
Ce qui veut dire qu'il a fallu créer aussi aussi une page framehaut.html.

Ensuite les 80 % restants sont coupés en deux verticalement par <frameset border="1" cols=10%,90%>.
<frame name="menu" scrolling="no" src="framemenu.html">
appelle la page framenu.html (jaune) qui comporte le menu.
<frame name="principal" src="frameprincipal.html">
elle, appelle la page verte frameprincipal.html. Mais si tu cliques sur un des liens du menu, cette page web sera remplacée par une autre page web.

Je ne détaille pas plus ici la fabrication des frames car il ne s'agissait que de montrer leur fonctionnement. Je les aborderai dans mon cours sur le HTML (quand j'aurai eu le temps de l'avancer ). Mais si tu besoin d'explications avant, n'hésites pas.

Par contre, n'oublies pas. De moins en moins de sites utilisent de frames. Outre les problèmes de référencement, il y a aussi un phénomène de mode.

[svernoux]

Ah, merci pour les explications sur les frames ! J'ai compris en gros...

je te propose ce menu.
Si tu veux un menu vertical, mais juste une liste de liens les uns en dessous des autres (donc pas de menu se déroulant vers la droite comme c'est le cas ici) du CSS suffira. Dis-moi ce que tu souhaites faire exactement.

Tes menus sont très jolis effectivement, mais je n'en demande pas tant. En fait, ce que je veux, c'est un menu vertical à gauche, comme sur la version actuellement en ligne de mon site, parce que ce design ma plaît bien. seulement, il était uniquement en html (avec des tableaux) et là, j'essaie de faire la même chose mais avec un css. Pour ça, je suis un modèle trouvé dans un tuto qui, au lieu d'un tableau ( ) comme avant, me fait 4 blocs <div>. Un truc très basique, quoi ! J'arrive presque au résultat que je veux, sauf qu'avant, grâce au tableau (c'était son seul avantage), quand j'ajoutais du texte dans le corps à droite, mon menu à gauche s'ajustait automatiquement en hauteur. Alors qu'avec mon nouveau design, forcément, c'est plus le cas. donc, je cherche la propriété à coller à mon bloc menu pour qu'il s'ajuste automatiquement en hauteur avec mon bloc corps. Voilà pour le résumé !
Ah oui, et je préfère pas du tout de javascript, parce que je sais pas ce que c'est que cette bête-là, moi ! Tout doux, tout doux...

Arkayn, merci pour l'idée de l'image... même si j'avoue ne pas trop l'avoir compris... Mon image, je la mets à l'extérieur de toute balise div, entre la div du menu et celle du corps ? (possible, ça ???) Ou dans le menu mais sous les sous-menus ?

Vous inquiétez pas pour le délai de réponse, on est pas à l'usine et je sais que tout le monde a du taf. Moi non plus de toute façon je peux pas y toucher au boulot, c'est tout à la maison

[arkayn]

Arkayn, merci pour l'idée de l'image... même si j'avoue ne pas trop l'avoir compris... Mon image, je la mets à l'extérieur de toute balise div, entre la div du menu et celle du corps ? (possible, ça ???) Ou dans le menu mais sous les sous-menus ?

Ca va être la pause café et mon collègue rame sur un dossier, je vais avoir 5 minutes

L'image doit se trouver sous ton menu, en dehors des balises div.

Regardes sur mon site :
http://inexplique.arkayn.free.fr/gevaudan.htm.
Fait un clic droit sous le loup, à gauche et à l'angle de la zone de texte. Et demande "propriétés". Tu découvriras une image invisible. J'avais des difficultés avec la largeur de la colonne de gauche qui variait, même en lui donnant des dimentions fixes. J'ai donc inséré une image qui assure que d'une page à l'autre, cette zone est toujours de la même dimention.

Tu peux copier l'image depuis
http://inexplique.arkayn.free.fr/images/spacer.gif

Mais au lieu de lui donner une dimention fixe comme moi, tu indiques 100 % pour la hauteur.

[iubito]

en fait ce que je crois comprendre... c'est que verticalement tu as un petit blanc en haut de ta page, et puis en bas (en bas ça se voit sur la gauche).
Tu as également ce petit blanc à gauche et à droite.

Code: Select all

body {margin:0; padding:0; }

devrait corriger ça.

c'était ça le pb ?

[arkayn]

En fait, ce que je veux, c'est un menu vertical à gauche, comme sur la version actuellement en ligne de mon site, parce que ce design ma plaît bien.

Je crois surtout qu'on a mal lu et que ce que l'on voit n'est pas ce sur quoi travaille Svernoux, d'où notre confusion.

Ouvertes avec Dreamweaver, les pages actuelles sont bien équilibrées entre le bleu et le blanc.

[svernoux]

Allez, je vous fais des petits dessins pour que tout le monde suive bien

Avant j'avais ça :

Je dis avant, mais c'est ce que vous voyez en ligne. Le menu à gauche et le corps à droite ont la même hauteur, que j'écrive 10 lignes dans le corps ou 350.

Actuellement, je travaille à une nouvelle version hors ligne. Pour l'instant, j'en suis là :

Mon menu reste petit à gauche (fixe) même si j'écris trois tonnes de texte à droite.
J'ai essayé une propriété height: 100% sur le menu, mais ça marche pas.
bien sûr, je peux lui définir une hauteur plus grande pour qu'il aille plus bas, mais après, là où j'écris moins de texte, j'aurai ça :


donc, ce que je veux, c'est que le menu ne soit pas plus long que le corps et le corps pas plus long que le menu, mais qu'ils aient toujours la même hauteur, alignée sur celle du corps. Il me faut donc une hauteur variable (genre pourcentage) et pas fixe. Ou une autre astuce.

***

Merci iub, mais les marges elles me vont bein en fait, elles sont même faites exprès

Merci arkayn, j'essayerai le coup de l'image ce soir. Faut quand même pas sacrifier la pause café pour moi, hein !

[arkayn]

Merci arkayn, j'essayerai le coup de l'image ce soir. Faut quand même pas sacrifier la pause café pour moi, hein !

Non non ! Ne t'inquiètes pas. Mais c'était mon collègue qui payait, ce matin. Fallait bien que je l'attende.