Page à trois cadres

Le
Kasfipasherov
Bonjour,
Comment créer une page à trois cadres verticaux. Je n'ai pas trouvé de model
correspondant dans FP. Je veux créer deux cadres verticaux, un à gauche et
un autre à droite et entre les deux, ma page web principale. Actuellement
une grosse barre de liens occupe le haut de ma page et prend trop d'espace
écran.
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Louise
Le #18921141
Bonjour,
Dans les modèles de cadre, choisissez celui Division verticale. Cliquez dans
l'un des cadres et choisissez le menu Cadres - Fractionner le cadre -
Fractionner en colonnes. Ajustez ensuite la largeur des cadres avec la
souris.

Les pages appelées dans des cadres sont parfois affichées seules (par
exemple quand elles sont trouvées en passant par un moteur de recherche). Il
serait bon d'ajouter un lien hypertexte pointant vers la page d'accueil au
début ou à la fin de chacunes des pages du site, de façon à permettre aux
visiteurs de naviguer quand même. Et n'oubliez pas d'utiliser l'onglet "Pas
de cadres" au bas de la page de cadres, pour inscrire une alternative
destinée aux visiteurs qui ne peuvent utiliser les cadres.

Au revoir,
Louise

"Kasfipasherov"
Bonjour,
Comment créer une page à trois cadres verticaux. Je n'ai pas trouvé de
model correspondant dans FP. Je veux créer deux cadres verticaux, un à
gauche et un autre à droite et entre les deux, ma page web principale.
Actuellement une grosse barre de liens occupe le haut de ma page et prend
trop d'espace écran.



Kasfipasherov
Le #18921921
Bonjour,
Un grand merci chère Louise pour vos précieux conseils. Effectivement je
n'avais jamais pensé que mes pages se trouvant dans ces cadres pouvaient
s'afficher seules, par conséquent, je m'attelle à créer un lien vers la page
d'accueil.

D'autre part, que dois-je faire dans l'onglet "pas de cadre"? Je clique
dessus, il y a effectivement un texte tout en haut sur une page blanche? Et
après, que se passe-t-il?

"Louise" %
Bonjour,
Dans les modèles de cadre, choisissez celui Division verticale. Cliquez
dans l'un des cadres et choisissez le menu Cadres - Fractionner le cadre -
Fractionner en colonnes. Ajustez ensuite la largeur des cadres avec la
souris.

Les pages appelées dans des cadres sont parfois affichées seules (par
exemple quand elles sont trouvées en passant par un moteur de recherche).
Il serait bon d'ajouter un lien hypertexte pointant vers la page d'accueil
au début ou à la fin de chacunes des pages du site, de façon à permettre
aux visiteurs de naviguer quand même. Et n'oubliez pas d'utiliser l'onglet
"Pas de cadres" au bas de la page de cadres, pour inscrire une alternative
destinée aux visiteurs qui ne peuvent utiliser les cadres.

Au revoir,
Louise

"Kasfipasherov"
Bonjour,
Comment créer une page à trois cadres verticaux. Je n'ai pas trouvé de
model correspondant dans FP. Je veux créer deux cadres verticaux, un à
gauche et un autre à droite et entre les deux, ma page web principale.
Actuellement une grosse barre de liens occupe le haut de ma page et prend
trop d'espace écran.







Louise
Le #18923161
Bonjour,
Quelques-uns de vos visiteurs ne pourront pas afficher les pages dans les
cadres. Ils ne verront que ce que vous aurez écrit dans l'onglet Pas de
cadres. Vous devez donc remplacer le message actuel: "Cette page utilise des
cadres, mais votre navigateur ne les prend pas en charge" par un texte
équivalent à vos pages. Cela peut-être un résumé, des liens vers les
principales pages (celles sans cadres) ou une répétition du contenu
principal.

Côté technique, le contenu de l'onglet Pas de cadres se trouve placé dans
une balise <noframes> visible seulement lorsque les cadres ne peuvent
s'afficher.

Au revoir,
Louise


"Kasfipasherov" %
Bonjour,

D'autre part, que dois-je faire dans l'onglet "pas de cadre"? Je clique
dessus, il y a effectivement un texte tout en haut sur une page blanche?
Et après, que se passe-t-il?



Louise
Le #18928081
Bonjour,
Pour les problèmes d'accessibilité causés par les cadres, la vraie solution
serait de se passer des cadres et de les remplacer par des balises <div>. Ce
sont des divisions, des blocs, pour encadrer une partie des paragraphes. On
peut les positionner de façon à simuler des colonnes. Et lorsqu'un
navigateur ne comprend pas cette commande <div>, cela ne cause pas de
problème, les divisions sont alors affichées l'une à la suite de l'autre. Le
contenu demeure accessible.

Vous pourriez faire un essai en recopiant le texte plus bas dans le code
d'une nouvelle page vide, en remplacement de celui actuel. Cette page
contient quatre divisions, une pour chaque colonne et une autre nommée
"container" qui encadre les trois premières:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<meta content="fr" http-equiv="Content-Language" />
<title>Exemple de page à trois colonnes</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>

<body>

<div id="container">
<div id="left_col">
<p>colonne à gauche</p>
</div>
<div id="right_col">
<p>colonne à droite</p>
</div>
<div id="page_content">
<p>colonne centrale</p>
</div>
</div>

</body>

</html>
-----------------------------


Dans le code de la page, remarquez la commande link dans la section head.
Elle réfère à une feuille de style où la position des divisions est définie.

Pour créer une feuille de style (un fichier texte avec l'extension .css),
vous pouvez utiliser le Bloc-notes ou, dans FrontPage 2003, le menu Fichier,
Nouveau, Autres modèles de pages, onglet Feuilles de style, Feuille de style
normal. Puis enregistrez la page sous le nom de "style3.css".

Placez-y les commandes pour positionner les blocs comme dans l'exemple
suivant. Le bloc qui contient les autres, #container, peut s'étirer pour
occuper tout l'écran, mais ici sa largeur minimale est définie à 600 pixels.
Ceux à gauche et à droite ont une largeur fixe de 200 pixels. Tandis que le
bloc central a des marges de 200 pixels, de façon à laisser de la place aux
autres divisions.

body {
margin: 0;
padding: 0;
}

#container {
min-width: 600px;
}

#left_col {
float: left;
width: 200px;
}

#right_col {
float: right;
width: 200px;
}

#page_content {
margin-right: 200px;
margin-left: 200px;
}
-----------------------------

Ensuite, vous pourrez changer le contenu des colonnes, y placer vos textes
et vérifier le résultat dans plusieurs navigateurs.

C'est une alternative qui remplace avantageusement les cadres et les
tableaux de disposition.
Bonne chance dans vos travaux,
Louise
Kasfipasherov
Le #18929301
Bonjour,
J'ai recopié en passant par le bloc-note tel quel le code dans une page
vierge (onglet html) et les colonnes apparaissent les unes au dessous des
autres au lieu de les avoir les unes à côté des autres.. Sinon, oui cette
possibilité semble adéquate car on peut j'imagine insérer des tableaux dans
ces colonnes?
A suivre...
"Louise"
Bonjour,
Pour les problèmes d'accessibilité causés par les cadres, la vraie
solution serait de se passer des cadres et de les remplacer par des
balises <div>. Ce sont des divisions, des blocs, pour encadrer une partie
des paragraphes. On peut les positionner de façon à simuler des colonnes.
Et lorsqu'un navigateur ne comprend pas cette commande <div>, cela ne
cause pas de problème, les divisions sont alors affichées l'une à la suite
de l'autre. Le contenu demeure accessible.

Vous pourriez faire un essai en recopiant le texte plus bas dans le code
d'une nouvelle page vide, en remplacement de celui actuel. Cette page
contient quatre divisions, une pour chaque colonne et une autre nommée
"container" qui encadre les trois premières:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<meta content="fr" http-equiv="Content-Language" />
<title>Exemple de page à trois colonnes</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>

<body>

<div id="container">
<div id="left_col">
<p>colonne à gauche</p>
</div>
<div id="right_col">
<p>colonne à droite</p>
</div>
<div id="page_content">
<p>colonne centrale</p>
</div>
</div>

</body>

</html>
-----------------------------


Dans le code de la page, remarquez la commande link dans la section head.
Elle réfère à une feuille de style où la position des divisions est
définie.

Pour créer une feuille de style (un fichier texte avec l'extension .css),
vous pouvez utiliser le Bloc-notes ou, dans FrontPage 2003, le menu
Fichier, Nouveau, Autres modèles de pages, onglet Feuilles de style,
Feuille de style normal. Puis enregistrez la page sous le nom de
"style3.css".

Placez-y les commandes pour positionner les blocs comme dans l'exemple
suivant. Le bloc qui contient les autres, #container, peut s'étirer pour
occuper tout l'écran, mais ici sa largeur minimale est définie à 600
pixels. Ceux à gauche et à droite ont une largeur fixe de 200 pixels.
Tandis que le bloc central a des marges de 200 pixels, de façon à laisser
de la place aux autres divisions.

body {
margin: 0;
padding: 0;
}

#container {
min-width: 600px;
}

#left_col {
float: left;
width: 200px;
}

#right_col {
float: right;
width: 200px;
}

#page_content {
margin-right: 200px;
margin-left: 200px;
}
-----------------------------

Ensuite, vous pourrez changer le contenu des colonnes, y placer vos textes
et vérifier le résultat dans plusieurs navigateurs.

C'est une alternative qui remplace avantageusement les cadres et les
tableaux de disposition.
Bonne chance dans vos travaux,
Louise





Louise
Le #18929471
Bonjour,
Si les colonnes paraissent l'une sous l'autre, c'est que la feuille de style
n'est pas là ou qu'elle n'est pas reconnue (c'est-à-dire le fichier
style3.css).

Cette commande est-elle en place dans la section head du code:

Avez-vous créé un deuxième fichier pour la feuille de style et l'avez-vous
enregistré sous le nom de style3.css?

Le fichier style3.css est-il placé dans le même dossier que la page de test?

En rappel, voici le contenu attendu pour ce fichier style3.css:

body {
margin: 0;
padding: 0;
}
#container {
min-width: 600px;
}
#left_col {
float: left;
width: 200px;
}
#right_col {
float: right;
width: 200px;
}
#page_content {
margin-right: 200px;
margin-left: 200px;
}


Si cela ne fonctionne pas, pouvez-vous publier votre page de test quelque
part, avec la feuille de style ? Je verrai peut-être le problème.

En réponse à votre question, oui, on peut insérer des tableaux à l'intérieur
d'une balise <div>.
Les points à faire attention pour l'accessibilité:
- ne pas imbriquer un tableau à l'intérieur d'un autre;
- ne pas fusionner de cellules.

Au revoir,
Louise


"Kasfipasherov" %23yeHFE%
Bonjour,
J'ai recopié en passant par le bloc-note tel quel le code dans une page
vierge (onglet html) et les colonnes apparaissent les unes au dessous des
autres au lieu de les avoir les unes à côté des autres.. Sinon, oui cette
possibilité semble adéquate car on peut j'imagine insérer des tableaux
dans ces colonnes?
A suivre...


Kasfipasherov
Le #18930611
Ce système est quand-même assez restrictif car si nous ne pouvons pas
fusionner de cellules ce qui est ma spécialité pour une bonne harmonisation
de mes tableaux... C'est un peu gênant... je pense que je vais garder le
syustème de cadre pour le moment, étant donné que le code et moi on est pas
très bon copain à part faire des copier/coller et corriger le code sous la
directive de personnes compétentes. De plus, tout est en anglais...
Vraiment, je suis un nul et à 60 ans, je crois que je le resterais...
Cependant, je n'ai pas le choix que d'intervenir dans ce fichu code car tout
ne peut pas se passer dans l'édition normale, j'en suis bien conscient...
Mon rève serait dans ces moments ou rien ne semble aller avoir quelqu'un à
mes côtés qui dit "Laisse je m'en occupe"... mais bon faut pas rêver....

"Louise" eSdTfW%
Bonjour,
Si les colonnes paraissent l'une sous l'autre, c'est que la feuille de
style n'est pas là ou qu'elle n'est pas reconnue (c'est-à-dire le fichier
style3.css).

Cette commande est-elle en place dans la section head du code:

Avez-vous créé un deuxième fichier pour la feuille de style et l'avez-vous
enregistré sous le nom de style3.css?

Le fichier style3.css est-il placé dans le même dossier que la page de
test?

En rappel, voici le contenu attendu pour ce fichier style3.css:

body {
margin: 0;
padding: 0;
}
#container {
min-width: 600px;
}
#left_col {
float: left;
width: 200px;
}
#right_col {
float: right;
width: 200px;
}
#page_content {
margin-right: 200px;
margin-left: 200px;
}


Si cela ne fonctionne pas, pouvez-vous publier votre page de test quelque
part, avec la feuille de style ? Je verrai peut-être le problème.

En réponse à votre question, oui, on peut insérer des tableaux à
l'intérieur d'une balise <div>.
Les points à faire attention pour l'accessibilité:
- ne pas imbriquer un tableau à l'intérieur d'un autre;
- ne pas fusionner de cellules.

Au revoir,
Louise


"Kasfipasherov" %23yeHFE%
Bonjour,
J'ai recopié en passant par le bloc-note tel quel le code dans une page
vierge (onglet html) et les colonnes apparaissent les unes au dessous des
autres au lieu de les avoir les unes à côté des autres.. Sinon, oui cette
possibilité semble adéquate car on peut j'imagine insérer des tableaux
dans ces colonnes?
A suivre...









Publicité
Poster une réponse
Anonyme