Structuration d'une page web

Résolu/Fermé
PeterJackson17 Messages postés 54 Date d'inscription lundi 20 juin 2011 Statut Membre Dernière intervention 21 avril 2014 - 1 nov. 2013 à 23:47
telliak Messages postés 3668 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 26 mars 2025 - 2 nov. 2013 à 14:25
Bonjour,


Je me suis lancé dans le webmastering, et je suis entrain de construire mon site web !
Mais étant avant tout un novice, j'ai quelques lacunes et quelques questions.
Tout d'abord voici un schéma d'une page web lambda que où j'ai encadrés de différentes couleurs différentes parties du site. Tout ceci pour mieux expliquer mes lacunes.

Ledit site : http://image.noelshack.com/fichiers/2013/44/1383345954-test.png

Donc voici mes questions :

Comment rétrécir la page web comme je l'ai encadré en rouge sur l'image ? Ce que je veux dire par là, c'est que dans mon site -enfin mon projet- l'arrière plan et la page web ne font qu'un. Alors que dans la majorité des sites web - comme celui-ci- il y a une partie page web -encadrée en rouge- et arrière plan -encadrée en noir-. Comment faire ceci s'il vous plait ?

Je voudrais aussi savoir comment faire un menu avec des onglets -l'encadrée en vert-. Je trouve des tutos sur internet mais ce sont des onglets très basiques, sans décorations. Je voudrais savoir comment décorer son menu onglet pour que ce soit jolie à voir.

Et enfin, puis-je placer une image dans la balise <header> comme c'est fait dans le site web ? -encadrée en jaune-.

Merci beaucoup de vos réponses !
A voir également:

6 réponses

Réponse 1 / 6
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 2/11/2013 à 00:30
Bonjour

tu fais un CSS externe que tu appelle grace a link href dans ta page web

dedans tu mets

body {
background-color:grey;
width: 100%;

#header {
width:960px;
margin: 0 auto;
background: url(chemin/image.jpg);
}

#page {
width:960px
margin:0 auto;
}

#menu {
width:800px;
margin: 20px auto;
}

Le code html

<body>

<div id="header"></div>

<div id="page">
<div id ="menu"> .....le code de ton menu....</div>

....le code de ta page ....
</div>

pour apprendre html + css
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1604192-decouvrez-le-fonctionnement-des-sites-web

Je ne vais pas te donner le code pour le menu tu dois apprendre d'abord des choses simples puis en reflechissant tu vas progresser mais ca ne se fait pas en un jour et personnne ne te donnera le code d'un site complet sans être payé

Un petit merci vaut mieux qu'une grande ignorance
1
Réponse 2 / 6
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 220
2 nov. 2013 à 13:34
Comment rétrécir la page web comme je l'ai encadré en rouge sur l'image ?
En diminuant la taille du "width" du conteneur concerné.
L'arrière plan noir doit être attribué via une feuille de style sur la balise <body>.
Le cadre rouge doit juste être un conteneur (div).
Je voudrais aussi savoir comment faire un menu avec des onglets -l'encadrée en vert-.
En utilisant une liste (ul) et en jouant avec du CSS sur les balises "li". 

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>liste</title>
<style type="text/css">
#onglet li{
display:inline;
border:1px solid #ddd;
margin:5px;
padding: 5px 8px;
color:white;
font-weight:bold;
background: #4c4c4c; /* Old browsers */
background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
}
</style>
</head>
<body>
<ul id="onglet">
<li>111111</li>
<li>222222</li>
<li>333333</li>
<li>444444</li>
<li>555555</li>
<li>666666</li>
</ul>
</body>
</html>

Et enfin, puis-je placer une image dans la balise <header> comme c'est fait dans le site web ? -encadrée en jaune-.
Rien ne l'empêche.
Enfait ce que je demande, ce n'est pas le code mais une astuce ou un tuto qui permet de personnaliser le tableau ^^
On ne construit pas un site sur des tableaux, ça c'est la méthode primitive. On construit une structure d'un site avec du XHTML et du CSS pour la mise en forme.
1
Réponse 3 / 6
PeterJackson17 Messages postés 54 Date d'inscription lundi 20 juin 2011 Statut Membre Dernière intervention 21 avril 2014
Modifié par PeterJackson17 le 2/11/2013 à 00:36
Merci de ta réponse animostab !

Enfait je sais faire des onglets mais "primitive" si je puis dire (avec un tableau etc). Enfait ce que je demande, ce n'est pas le code mais une astuce ou un tuto qui permet de personnaliser le tableau ^^

Et enfait, le code que tu m'a donné : c'est pour ma première question ou les autres ? Désolé j'ai pas bien compris.
0
Réponse 4 / 6
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
2 nov. 2013 à 14:01
La réponse était pour toutes tes questions sauf pour les onglets
faire quoi que ce soit qui ne soit pas des données tabulaires (mise en page, aspect graphique, positionnement d'éléments) ne se fait plus avec des tableaux depuis belle lurette donc ne pas utiliser la balise <table>.

je reprend le code avec explications

/***le fond de la page couleur gris**/
body {
background-color:grey;
width: 100%;
}

/****le haut de la page reduite à 960 pixel de large avec image image.jpg****/
#header {
width:960px;
margin: 0 auto;
background: url(chemin/image.jpg);
}

/***la suite de la page reduite à 960 pixel de large***/
#page {
width:960px
margin:0 auto;
}

/***le menu reduit a 800 pixel et centré comme le reste****/
#menu {
width:800px;
margin: 20px auto;
}

va voir le lien que je t'ai donné et suis les tutos pour apprendre
parce que si tu n'apprend pas un peu en faisant ton site tu fera des erreurs et apres ce sera plus difficile a corriger

pour un menu du style de celui de l'image voila le code

<div id="menu">
<ul>

<li> <a href="page1.php">page1</a></li>
<li> <a href="page2.php">page2</a></li>
<li> <a href="page3.php">page3</a></li>
<li> <a href="page4.php">page4</a></li>
<li> <a href="page5.php">page5</a></li>

</ul>
</div>

le CSS

#menu {
width:800px;
margin: 20px auto;
}

#menu li{
display:inline-block;
text-align:center;
}

#menu a {
display:block;
width:100px
text-align:center;
background: url (chemin/image_onglet.jpg;
}
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
PeterJackson17 Messages postés 54 Date d'inscription lundi 20 juin 2011 Statut Membre Dernière intervention 21 avril 2014
2 nov. 2013 à 14:19
Merci beaucoup pour vos réponses, je comprend mieux maintenant !
Tu as raison animostab, il vaut mieux que j'approfondisse mes connaissance avec les tutos :)

Encore une fois merci :)
0
Réponse 6 / 6
telliak Messages postés 3668 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 26 mars 2025 880
2 nov. 2013 à 14:25
tu dois apprendre d'abord des choses simples puis en réfléchissant tu vas progresser mais ça ne se fait pas en un jour presque tout est dit dans cette phrase d'Animostab.
Construire, écrire un site n'est pas une réalisation rapide qui se fait à partir de parcelles récupérées de-ci de-là; un apprentissage global est nécessaire. https://openclassrooms.com/fr/ propose un bon commencement. Sachant que quelques bons vieux livres papier ne sont pas inutiles.
Pour continuer, une réflexion devra être menés sur la présentation souhaitée pour éviter de faire et défaire.
0

Discussions similaires

connection ok mais aucune page ne s'affiche
gandounet -
fabiennetitou -

10 réponses