Structure site web
yoyototo
-
hani_ Messages postés 333 Date d'inscription Statut Membre Dernière intervention -
hani_ Messages postés 333 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je suis en train de faire un site web. J'ai fait ma charte sur photoshop que j'ai découpé grace a des tranches.
Mais ensuite je ne sais pas comment integrer ca dans une pgae web, est ce qu'iil vaut mieux utiliser des tableaux pour faire la structure de la page ou plutot tout faire avec du css ?
Lorsque je fais des tableaux j'ai un probleme car mon des cellules se décalent.
Voici la structure de ma page sur cette image: http://lkadiss.free.fr/web/page.jpg
Lorsque j'essaie d'agrandir la cellule 1 pour mettre du texte la cellule 2 s'agrandie aussi et mon menu se retrouve au milieu de la page au lieu de rester en haut.
Merci a tous
Je suis en train de faire un site web. J'ai fait ma charte sur photoshop que j'ai découpé grace a des tranches.
Mais ensuite je ne sais pas comment integrer ca dans une pgae web, est ce qu'iil vaut mieux utiliser des tableaux pour faire la structure de la page ou plutot tout faire avec du css ?
Lorsque je fais des tableaux j'ai un probleme car mon des cellules se décalent.
Voici la structure de ma page sur cette image: http://lkadiss.free.fr/web/page.jpg
Lorsque j'essaie d'agrandir la cellule 1 pour mettre du texte la cellule 2 s'agrandie aussi et mon menu se retrouve au milieu de la page au lieu de rester en haut.
Merci a tous
A voir également:
- Structure site web
- Création site web - Guide
- Web office - Guide
- Site de telechargement - Accueil - Outils
- Site comme coco - Accueil - Réseaux sociaux
- Quel site remplace coco - Accueil - Réseaux sociaux
11 réponses
Salut,
Les tableaux, contrairement à l'usage que tout le monde en fait, ne devraient pas servir à la mise en page.
Il y a plusieurs bonnes raisons :
- ils utilisent plus de mémoire qu'une mise en page d'un autre type (tranches, calques, etc.) ;
- ils s'affichent seulement une fois que tout le contenu est chargé. Si ta mise en page contient beaucoup d'images, c'est handicapant pour les petites connections ;
- ils sont difficiles à contrôler vis-à-vis des problèmes de dépassement et d'alignement de contenu. (ton problème ^^)
Essaye de piocher un de ces modèles de mise en page, et dis-moi, que veux-tu mettre dans ta cellule n°3 ?
Les tableaux, contrairement à l'usage que tout le monde en fait, ne devraient pas servir à la mise en page.
Il y a plusieurs bonnes raisons :
- ils utilisent plus de mémoire qu'une mise en page d'un autre type (tranches, calques, etc.) ;
- ils s'affichent seulement une fois que tout le contenu est chargé. Si ta mise en page contient beaucoup d'images, c'est handicapant pour les petites connections ;
- ils sont difficiles à contrôler vis-à-vis des problèmes de dépassement et d'alignement de contenu. (ton problème ^^)
Essaye de piocher un de ces modèles de mise en page, et dis-moi, que veux-tu mettre dans ta cellule n°3 ?
Un site pour être correct devrait être fait de manière a ce que les fichier html ne contiennent que des balises de forme, dans lequel on placera le contenu.
De manière plus poussé, on contrôle aussi l'utilisation des balises de manière a ce que la page ai un sens sémantique.
De ce fait sans css un site devrait apparaitre comme suit:
titre
h1
h2
h3
p / ul / table->(rarement utilisé)
les balises b font i ou tout autre mise en forme sont a bannir...
seules les balises strong et em devrait être utilisée dans des cas ou un texte est plus "fort" de sens (c'est sémentiquement correct)
après la mise en forme passons a la mise en page.
elle se fait uniquement dans le css JAMAIS dans le html.
ainsi, une image qui n'est pas une image de contenu mais de style (font, logo bouton de menu etc etc etc) n'apparaitrons pas dans le html mais seulement dansle css. A l'inverse les images dites de contenu seront elle placées dans le html.
une fois un site correctement crée, il est conseillé de la valider
WAI VALODATOR
HTML VALIDATOR
CSS VALIDATOR
quand il ne reste plus d'erreur a corriger tu auras alors un site presque correct...
De manière plus poussé, on contrôle aussi l'utilisation des balises de manière a ce que la page ai un sens sémantique.
De ce fait sans css un site devrait apparaitre comme suit:
titre
h1
h2
h3
p / ul / table->(rarement utilisé)
les balises b font i ou tout autre mise en forme sont a bannir...
seules les balises strong et em devrait être utilisée dans des cas ou un texte est plus "fort" de sens (c'est sémentiquement correct)
après la mise en forme passons a la mise en page.
elle se fait uniquement dans le css JAMAIS dans le html.
ainsi, une image qui n'est pas une image de contenu mais de style (font, logo bouton de menu etc etc etc) n'apparaitrons pas dans le html mais seulement dansle css. A l'inverse les images dites de contenu seront elle placées dans le html.
une fois un site correctement crée, il est conseillé de la valider
WAI VALODATOR
HTML VALIDATOR
CSS VALIDATOR
quand il ne reste plus d'erreur a corriger tu auras alors un site presque correct...
merci pour les modeles de mise en page... je vais essayer avec ca.
dans la cellule n°3, je ne veux rien mettre.
dans la cellule n°3, je ne veux rien mettre.
@hani_ : je précise que les balises non sémantiques (div et span) ont été crées pour répondre à des besoins de mise en forme ou de script. On peut donc en mettre dans le HTML, à condition bien sûr de n'en user qu'avec parcimonie ...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
effectivement, c'est pourquoi j'ai précisé : "De ce fait sans css un site devrait apparaitre comme suit : "
les balises div et span n'apparaissent pas... cela ne veux pas dire qu'il ne faut pas les utiliser...
c'était pour moi évident et je suis navré si j'ai induis quelqu'un en erreur par manque de précision....
les balises div et span n'apparaissent pas... cela ne veux pas dire qu'il ne faut pas les utiliser...
c'était pour moi évident et je suis navré si j'ai induis quelqu'un en erreur par manque de précision....
No prob ;)
Alors, le plus dérangeant dans un design en tranches, c'est qu'on oublie souvent que l'utilisateur myope va faire CTRL+molette, et foutre en l'air la belle mise en page... xD
Pour le header, s'il ne change pas d'une page à l'autre tu peux simplement mettre une balise <img> seule.
Pour le menu, une <ul>, car sa sémantique lui permet de jouer le rôle de menu (eh oui, désolé hani), et pour le corps du texte, une <div> (une seule) qui contiendra tout ce qui a besoin d'y être, <h2>, <h3>, <p>, <form>, <img>, etc.
Et pour le footer, un <p> si tu n'as pas besoin de mettre des éléments de type block à l'intérieur, ou bien une <img>, ou sinon une autre <div>.
Bien sûr, au début la <ul> apparaît au-dessus de la <div> principale. C'est là que le CSS intervient. Il y a plusieurs solutions, voici ma préférée :
il s'agit de la rendre flottante avec un float : left, ce qui implique de mettre un clear : both sur le footer pour qu'il ne se retrouve pas recouvert par une partie de la <ul>. Du coup, le texte de la <div> va reprendre sa place sous la <ul> lorsque celle-ci est trop courte. Solution : mettre un float : left sur la <div> aussi. Ou mieux : un float : right, car si on est attentif au coup du CTRL+molette on évite de faire trop de largeurs fixes, donc on met des % et du coup ça colle pas exactement. Le float : right permet alors de faire coller la <div> au bord droit du body.
Ca donnerait un truc dans ce genre-là (c'est vraiment du très basique, c'est un "squelette") :
Alors, le plus dérangeant dans un design en tranches, c'est qu'on oublie souvent que l'utilisateur myope va faire CTRL+molette, et foutre en l'air la belle mise en page... xD
Pour le header, s'il ne change pas d'une page à l'autre tu peux simplement mettre une balise <img> seule.
Pour le menu, une <ul>, car sa sémantique lui permet de jouer le rôle de menu (eh oui, désolé hani), et pour le corps du texte, une <div> (une seule) qui contiendra tout ce qui a besoin d'y être, <h2>, <h3>, <p>, <form>, <img>, etc.
Et pour le footer, un <p> si tu n'as pas besoin de mettre des éléments de type block à l'intérieur, ou bien une <img>, ou sinon une autre <div>.
Bien sûr, au début la <ul> apparaît au-dessus de la <div> principale. C'est là que le CSS intervient. Il y a plusieurs solutions, voici ma préférée :
il s'agit de la rendre flottante avec un float : left, ce qui implique de mettre un clear : both sur le footer pour qu'il ne se retrouve pas recouvert par une partie de la <ul>. Du coup, le texte de la <div> va reprendre sa place sous la <ul> lorsque celle-ci est trop courte. Solution : mettre un float : left sur la <div> aussi. Ou mieux : un float : right, car si on est attentif au coup du CTRL+molette on évite de faire trop de largeurs fixes, donc on met des % et du coup ça colle pas exactement. Le float : right permet alors de faire coller la <div> au bord droit du body.
Ca donnerait un truc dans ce genre-là (c'est vraiment du très basique, c'est un "squelette") :
<html>
<head>
<style>
* {
padding : 0;
margin : 0;
}
body {
background : black;
color : white;
width : 950px; /* par exemple */
}
ul#nav {
float : left;
width : 33%;
background : gray;
}
ul#nav li a {
display : block; /* pour que le hover soit sur toute la case */
}
ul#nav li a:hover {
color : red;
}
div#main {
float : right;
width : 66%;
background : silver;
}
p#footer {
clear : both;
width : 100%;
text-align : center;
background : gray;
}
</style>
</head>
<body>
<img id="header" height="100px" width="950px" alt="title" />
<ul id="nav">
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
</ul><!-- nav -->
<div id="main">
<h2>babla</h2>
<p>machin</p>
<p>truc</p>
<h2>reblabla</h2>
<p>remachin</p>
<p>retruc</p>
</div><!-- main -->
<p id="footer">
footer
</p><!-- footer -->
</body>
</html>
Pour le menu, une <ul>, car sa sémantique lui permet de jouer le rôle de menu (eh oui, désolé hani).
Encore une fois chose que je fait toujours puisque sémentiquement correct...
mais rentrer dans des détails n'était pas le but de mon poste
d'où la dernière phrase du poste : "quand il ne reste plus d'erreur a corriger tu auras alors un site presque correct..."
zoom : "[...]PRESQUE[...]"
Encore une fois chose que je fait toujours puisque sémentiquement correct...
mais rentrer dans des détails n'était pas le but de mon poste
d'où la dernière phrase du poste : "quand il ne reste plus d'erreur a corriger tu auras alors un site presque correct..."
zoom : "[...]PRESQUE[...]"
Juste les pu****tain de tableau a la *** dont tout le monde se sert de manière abusive...
c'est d'eux que je parlais en disant que dans un site correct il sont rarement utilisé... (pour faire la différence avec tout les sites qu'on peut croiser...)
PS c'est bien la seule utilité que j'ai trouvé a dreamwerver : commande->nettoyer html ->cocher balise specifique -> table th td tr font hr...
XD
après notepad++ fait le reste...
c'est d'eux que je parlais en disant que dans un site correct il sont rarement utilisé... (pour faire la différence avec tout les sites qu'on peut croiser...)
PS c'est bien la seule utilité que j'ai trouvé a dreamwerver : commande->nettoyer html ->cocher balise specifique -> table th td tr font hr...
XD
après notepad++ fait le reste...