Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Faire le design du site Web avec le css Vous savez maintenant, qu'une page web

Faire le design du site Web avec le css Vous savez maintenant, qu'une page web est une combinaison de 2 parties : Un ﬁchier XHTML : Oú; se trouve le contenu de la page (le texte) et un ﬁchier CSS (.css) : Qui permet de faire la présentation de la page web. Le ﬁchier HTML : Oú se trouve le contenu de la page (le texte). Il est constitué de balises. Le ﬁchier CSS (.css) : Qui permet de faire la présentation de la page web. Il indique qu'un texte est de telle couleur, qu'il est centré, sa police "Arial" etc... Si vous avez suivi les chapitres précédents et vous les avez compris,ce qui va suivre dans ce chapitre sera plus facile à comprendre. Si non retournez les revoir puis revenez pour poursuivre le chapitre courant. Partie 1: Créer le contenu de la page XHTML HTML & CSS La conception de la page Web peut être ﬁxe de taille ﬁxée (par exemple de 760 pixels)ou extensible de taille qui varie suivant la résolution du visiteur du site. La conception ﬁxe. Vous vous rappelez du code de "base" d'une page XHTML que je vous ai montré dans un cours précèdent. Le revoici de nouveau : Sélectionner le code Ayoba INSTALLER <!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" xml:lang="fr" > <head> <title>Bienvenue sur mon site !</title> <meta http-equiv="Content-Type" content="text/html; charset=iso- 8859-1" /> </head> <body> </body> </html> Tapez le code dans votre éditeur de texte. Enregistrer le sous le nom cadre.html . Vous avez une page vide. Maintenant supposons que nous voulons que notre page aura un entête, un menu, un corps et un pied de page comme ceci. Comment on va s'y prendre ? Je suppose que vous avez trouvez la réponse vous même. Et bien on va utiliser la balise universelle <div> vous vous souveniez d'elle. On va créer ces 4 blocks à l'aide de 4 <div> qu'on mettra dans le corps <body> </body>: Code HTML: Sélectionner le code <div id="en_tete">  </div> <div id="menu">  </div> <div id="corps">  </div> <div id="pied_de_page">  </div> Allez y , tapez ce code entre <body> et </body> du code de la page de tout à l'heur. Qu'attendez vous? Il faire en même temps que moi. Enregistrez et vériﬁer ce que ça donne. Films & Séries En illimité Qualité HD Sans publicité Découvrir Et bien vous avez toujours une page vide. N'ayez pas de crainte on va la remplir. On utilise ici des attributs id et non des class. Vu que l'attribut id ne sera utilisé qu'une seule fois dans mon document. L'en-tête En général un en-tête c'est juste une bannière (une image), un titre <h1> (titre du site). Pour moi, je vais mettre une bannière, celle-ci par exemple : image de bannière Pour mettre cette image dans le <div> de l'en-tête ? On a 2 possibilités : 1, Crée une balise <img /> à l'intérieur, aﬁn d'insérer notre bannière. On sait le faire. 2, Soit on ne met rien à l'intérieur du <div id="en_tete"> et on mettra la bannière sous forme d'image de fond dans le CSS. C'est la seconde solution que je vais adopter,mai vous pouvez choisir la première méthode. Menu et sous-menus Dans le block du menu , on va créer plusieurs sous-blocks pour montrer les différents éléments du menu. Mettez ce code dans le block menu c'est à dire entre <div id="menu"> et </div> Code XHTML: Sélectionner le code <div id="menu"> <div class="element_menu"> <h3> Premier menu</h3>  <ul> <ul>  <li><a href="page1.html">Lien1<a></li>  <li><a href="http://booter.22web.net">Lien2<a></li> <li>Lien3</li> </ul> </div> <div class="element_menu"> <h3>Second menu</h3> <ul> <li>Lien1</li> <li>Lien2</li> <li>Lien3</li> </ul> </div> </div> Le corps C'est la partie principale de la page. Elle contiendra tout le contenu de votre page. On va donner un titre <h1> qui sera le titre de la page. on le mettra dans la balise <title> du <head>. Puis, on écrira nos paragraphes <p> et pour structurer son texte,on met des sous-titres <h2> Ce qui nous donne un code pour le corps : Code XHTML Sélectionner le code <div id="corps"> <h1>La Chèvre de Monsieur Seguin</h1> <h2>Paragraphe 1</h2> <p> Ah! qu'elle était jolie la petite chèvre de M. Seguin! Qu'elle était jolie avec ses yeux doux, sa barbiche de sous- officier, ses sabots noirs et luisants, ses cornes zébrées et ses longs poils blancs qui lui faisaient une houppelande!<br /> Et puis, docile, caressante, se laissant traire sans bouger, sans mettre son pied dans l'écuelle. Un amour de petite chèvre!<br /> M. Seguin avait derrière sa maison un clos entouré d'aubépines. Il avait attaché la petite chèvre à un pieu, au plus bel endroit du pré, en ayant bien soin de lui laisser beaucoup de corde.<br /> </p> <h2>Paragraphe 2</h2> <p> Mais un jour, elle se dit en regardant la montagne: «Comme on doit être bien là-haut . Quel plaisir de gambader dans la bruyère sans cette maudite longe qui vous écorche le cou!»<br /> A partir de ce moment, l'herbe du clos lui parut fade. Elle maigrit, son lait se fit rare. C'était pitié de la voir tirer tout le jour sur sa longe, la tête tournée du côté de la montagne en faisant Mê! tristement.<br /> M. Seguin s'apercevait bien que sa chèvre avait quelque chose, mais il ne savait pas ce que c'était<br /> </p> <h2>Paragraphe 3</h2> <p> Un matin, comme il achevait de la traire, elle se retourna et lui dit dans son patois: -écoutez, monsieur Seguin, je me languis chez vous, laissez-moi aller dans la montagne.<br /> - Ah! mon Dieu! Blanquette, tu veux me quitter!<br /> - Oui, monsieur Seguin.<br /> - Tu es peut-être attachée de trop court, veux-tu que j'allonge la corde?<br /> - Ce n'est pas la peine, monsieur Seguin.<br /> - Alors, qu'est-ce qu'il te faut? Qu'est-ce que tu veux?<br /> - Je veux aller dans la montagne, monsieur Seguin.<br /> - Mais, malheureuse, tu ne sais pas qu'il y a le loup dans la montagne...<br /> Que feras-tu quand il viendra? <br /> </p> </div> Le texte que j'ai écrit, est juste pour "remplir" la page. On insèrera peut être autres choses (des images!...que sais je? Vous seul saviez ce que vous voulez mettre dans votre site). le pied de page Le pied de page sert à écrire le nom de l'auteur en général, et vous pouvez mettre un copyright. Code : HTML Sélectionner le code <div id="pied_de_page"> <p>Copyright 2008, tous droits réservés</p> </div> voilà notre page est créée. Elle reste la decoration; Que nous allons voir dans la partie suivante. Partie 2: Créer le ﬁchier CSS pour la présentation de la page. La encore je vous suggère que vous suiviez en même temps que moi. Nous allons travailler sur la balise <body>. Rappelle: <body>, est la balise qui englobe tout le contenu de votre page web. Pour la taille de la page, mettons 760 pixels. Qui est moins que 800px, pour que les visiteurs qui ont une résolution 800*600 ne se déplaceront pas vers la droite pour voir le reste de la page. Pour les marges, un margin:auto centrera le design. Une marge en haut (top) et en bas (bottom) de 10 pixels pour que notre page ne collera pas avec le haut et le bas du navigateur. Enﬁn, une couleur de fond ou une image de fond (background-color ou background-image). Ouvrez une nouveau document dans votre notepad++, allez sur le menu Langage choisissez CSS comme langage enregistrer (sous le même nom que votre page si vous voulez). Code : CSS Sélectionner le code body { width: 760px; margin: auto; /* Pour centrer notre page */ margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. */ margin-bottom: 10px; /* aussi pour le bas du navigateur */ background-color: #33ffff; /* Un fond pour éviter d'avoir un fond blanc */ } Essayez d'enlever quelques lignes pour observer le résultat sur la page . N'oubliez pas de déclarer le ﬁchier CSS dans la balise <head> de votre page. Je vous rappelle le code XHTML à mettre dans la balise <head>. <link rel="stylesheet" media="screen" type="text/css" title="cadre" href="cadre.css" /> L'en-tête Nous allons aﬃcher la bannière du site à l'aide du CSS (avec background-image).Qu'on mettra dans le <div> de l'en-tête,que nous avons laissé tout à l'heur vide. C'est une technique que vous pourrez utiliser pour faire que tout votre conception soit compris dans le ﬁchier CSS. C'est très pratique pour réaliser un site qui à plusieurs conception différentes. 1. On va agrandir la taille du block "en_tete" aﬁn qu'il puisse contenir la bannière entière. Comme notre bannière fait 760x100 pixels, on va déﬁnir une largeur et une hauteur de ces dimensions : width:760px; Ayoba L'appli tout-en-un INSTALLER height:100px; uploads/S4/ html-et-css-faire-le-design-du-site-web-1614215960793.pdf