{"id":6682,"date":"2020-02-16T22:15:05","date_gmt":"2020-02-16T22:15:05","guid":{"rendered":"https:\/\/blog.hostinger.io\/fr-tutoriels\/?p=6682"},"modified":"2025-03-03T23:41:16","modified_gmt":"2025-03-03T23:41:16","slug":"tutoriel-dreamweaver","status":"publish","type":"post","link":"\/fr\/tutoriels\/tutoriel-dreamweaver","title":{"rendered":"Tutoriel Dreamweaver d\u00e9taill\u00e9"},"content":{"rendered":"<p>Lorsque vous d&eacute;butez dans le d&eacute;veloppement de sites web, vous entendez probablement parler des &eacute;diteurs WYSIWYG (What You See Is What You Get) en fran&ccedil;ais, cela signifie &ldquo;ce que vous voyez est ce que vous obtenez&rdquo;. La tentation de cr&eacute;er un site internet sans aucune connaissance de programmation semble s&eacute;duisante et pourrait vous avoir conduit &agrave; chercher un tutoriel <a href=\"https:\/\/www.adobe.com\/products\/dreamweaver\" target=\"_blank\" rel=\"noopener\">Dreamweaver<\/a> sur Internet.<\/p><p>Cependant, lorsque vous utilisez Dreamweaver pour la premi&egrave;re fois, il peut &ecirc;tre intimidant. Ne vous inqui&eacute;tez pas, cet article couvre tout ce qu&rsquo;il y a &agrave; savoir sur <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/comment-creer-un-site-internet\">comment cr&eacute;er un site internet<\/a> &agrave; l&rsquo;aide de Dreamweaver. Commen&ccedil;ons donc avec le tutoriel Dreamweaver.<\/p><figure class=\"wp-block-image size-full\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Build-Website-in-9-Easy-Steps-FR.pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/eBook_-Build-website-FR-1024x283-1.png\/public\" alt=\"\" class=\"wp-image-41463\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/eBook_-Build-website-FR-1024x283-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/eBook_-Build-website-FR-1024x283-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/eBook_-Build-website-FR-1024x283-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/eBook_-Build-website-FR-1024x283-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 id=\"h-adobe-dreamweaver-cc-c-est-quoi-exactement\" class=\"wp-block-heading\">Adobe Dreamweaver CC, c&rsquo;est quoi exactement ?<\/h2><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"486\" class=\"wp-image-6683\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/page-accueil-dreamweaver.png\/public\" alt=\"Page d'accueil de Dreamweaver\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/page-accueil-dreamweaver.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/page-accueil-dreamweaver.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/page-accueil-dreamweaver.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/page-accueil-dreamweaver.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/page-accueil-dreamweaver.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Adobe Dreamweaver CC est un c&eacute;l&egrave;bre outil de cr&eacute;ation et de d&eacute;ploiement de sites web, et est consid&eacute;r&eacute; comme une ex&eacute;cution parfaite entre un WYSIWYG et d&rsquo;autres <a href=\"\/fr\/tutoriels\/editeur-html\">&eacute;diteurs HTML<\/a> plus conventionnels. Macromedia a d&rsquo;abord d&eacute;velopp&eacute; Dreamweaver, puis il a &eacute;t&eacute; achet&eacute; par Adobe Inc en 2005.<\/p><p>Dreamweaver a d&rsquo;abord utilis&eacute; une licence perp&eacute;tuelle, un paiement unique pour l&rsquo;utilisation du logiciel, mais a ensuite chang&eacute; pour un mod&egrave;le bas&eacute; sur un abonnement avec la structure Adobe Creative Cloud.<\/p><p>Adobe Dreamweaver CC est un logiciel d&rsquo;environnement de d&eacute;veloppement int&eacute;gr&eacute; (IDE), ce qui signifie qu&rsquo;il fournit des outils et un soutien complets &agrave; des fins de d&eacute;veloppement. Gr&acirc;ce &agrave; la structure Creative Cloud, vous pouvez choisir d&rsquo;inclure d&rsquo;autres logiciels de cr&eacute;ation d&rsquo;Adobe pour stimuler votre productivit&eacute;.<\/p><p>Dreamweaver vous permet de cr&eacute;er et de concevoir visuellement un site web en utilisant la m&eacute;thode du glisser-d&eacute;poser qui vous permet de d&eacute;placer des &eacute;l&eacute;ments dans le tableau de bord du designer. Vous pouvez &eacute;galement l&rsquo;utiliser comme n&rsquo;importe quel &eacute;diteur de code traditionnel &mdash; en codant uniquement avec du texte, et en t&eacute;l&eacute;chargeant instantan&eacute;ment le site web sur votre serveur.<\/p><p>Vous aurez &eacute;galement acc&egrave;s &agrave; un ensemble de ressources et de mat&eacute;riels p&eacute;dagogiques, ainsi qu&rsquo;&agrave; un forum communautaire d&rsquo;Adobe d&eacute;di&eacute; qui vous aidera &agrave; r&eacute;pondre &agrave; toutes les questions que vous vous posez sur le produit. Il prend &eacute;galement en charge 15 langues diff&eacute;rentes. De plus, si vous cherchez un tutoriel Dreamweaver, vous en trouverez beaucoup sur le web.<\/p><p>Ces caract&eacute;ristiques positionnent Dreamweaver comme un hybride entre un <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/meilleurs-cms\"><strong>syst&egrave;me de gestion de contenu (CMS)<\/strong><\/a> et un &eacute;diteur de code pur.<\/p><h2 id=\"h-caracteristiques-distinctives\" class=\"wp-block-heading\">Caract&eacute;ristiques distinctives<\/h2><p>Le fait de faire partie de l&rsquo;&eacute;cosyst&egrave;me cr&eacute;atif d&rsquo;Adobe a d&eacute;j&agrave; distingu&eacute; Dreamweaver des autres &eacute;diteurs de code visuel. Dreamweaver a acc&egrave;s &agrave; des ressources et &agrave; des avantages que seul Adobe peut offrir. N&eacute;anmoins, voici les deux caract&eacute;ristiques les plus dominantes :<\/p><h3 id=\"h-interface-visuelle-conviviale-pour-les-debutants\" class=\"wp-block-heading\">Interface visuelle conviviale pour les d&eacute;butants<\/h3><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"900\" height=\"506\" class=\"wp-image-6693\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/creer-un-nouveau-document.jpg\/public\" alt=\"Cr&eacute;er un nouveau document\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/creer-un-nouveau-document.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/creer-un-nouveau-document.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/creer-un-nouveau-document.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/creer-un-nouveau-document.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><p>Adobe Dreamweaver CC est facile &agrave; utiliser, mais, en m&ecirc;me temps, difficile &agrave; ma&icirc;triser. La qualit&eacute; de votre site d&eacute;pend de vos comp&eacute;tences. Autrement dit, bien que le logiciel offre de nombreuses fonctions de d&eacute;veloppement web, avec des connaissances de base ou limit&eacute;es, vous ne pouvez pas utiliser ces fonctions au maximum.<\/p><p>Malgr&eacute; cela, les d&eacute;butants peuvent commencer &agrave; construire un site web gr&acirc;ce &agrave; son &eacute;diteur visuel. Il existe des fonctions de glisser-d&eacute;poser pour ins&eacute;rer des &eacute;l&eacute;ments <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/differences-html\"><strong>HTML<\/strong><\/a> dans votre projet, et vous pouvez voir instantan&eacute;ment toutes les modifications que vous apportez sur le site web. Un simple tutoriel Dreamweaver vous aidera &agrave; d&eacute;marrer.<\/p><p>Il vous aide &eacute;galement &agrave; comprendre sur quelle partie de l&rsquo;&eacute;l&eacute;ment vous travaillez actuellement. Comme dans l&rsquo;exemple, lorsque vous cliquez sur le titre, le code correspondant est s&eacute;lectionn&eacute; dans l&rsquo;&eacute;diteur.<\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"900\" height=\"539\" class=\"wp-image-6694\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/facile-a-comprendre.jpg\/public\" alt=\"Un espace de travail facile &agrave; comprendre \" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/facile-a-comprendre.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/facile-a-comprendre.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/facile-a-comprendre.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/facile-a-comprendre.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><h3 id=\"h-editeur-de-code-integre-puissant\" class=\"wp-block-heading\">&Eacute;diteur de code int&eacute;gr&eacute; puissant<\/h3><p>Un autre aspect important de Dreamweaver est le puissant &eacute;diteur de code int&eacute;gr&eacute;. Si les d&eacute;veloppeurs professionnels veulent coder dans un &eacute;diteur de texte, ils peuvent le faire. Voici quelques-unes de ses principales fonctions :<\/p><ul class=\"wp-block-list\">\r\n<li><strong>Coloration syntaxique<\/strong>. Pour faciliter la lecture du code, il mettra en &eacute;vidence diff&eacute;rents &eacute;l&eacute;ments comme les variables, l&rsquo;ID, la classe et autres.<\/li>\r\n\r\n\r\n\r\n<li><strong>Compl&eacute;tion de code<\/strong>.Augmentez votre productivit&eacute; gr&acirc;ce &agrave; la compl&eacute;tion automatique des codes. Par exemple, il suffit de taper <strong>img<\/strong> et d&rsquo;appuyer sur la touche <strong>tabulation<\/strong> de votre clavier pour ins&eacute;rer <strong>&lt;img src=&rdquo;&rdquo; alt=&rdquo;&rdquo;&gt;<\/strong>.<\/li>\r\n\r\n\r\n\r\n<li><strong>Documentation du CSS<\/strong>.&nbsp;Chaque fois que vous avez besoin de r&eacute;f&eacute;rences pour les propri&eacute;t&eacute;s CSS, une fonction de Documentation rapide s&rsquo;affiche avec des informations pertinentes directement dans l&rsquo;&eacute;diteur de code.<\/li>\r\n<\/ul><p>A part cela, il existe d&rsquo;autres caract&eacute;ristiques importantes :<\/p><ul class=\"wp-block-list\">\r\n<li><strong>Bootstrap 4<\/strong>. La derni&egrave;re version du framework <strong>HTML<\/strong>, <strong>CSS<\/strong> et <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/qu-est-ce-que-javascript\"><strong>JavaScript<\/strong><\/a> pour le d&eacute;veloppement d&rsquo;un site web r&eacute;actif.<\/li>\r\n\r\n\r\n\r\n<li><strong>Prise en charge Git<\/strong>. Effectuez toutes les op&eacute;rations Git courantes, y compris <strong>Push<\/strong>, <strong>Pull<\/strong>, <strong>Commit<\/strong> et <strong>Fetch<\/strong>, directement depuis votre tableau de bord Dreamweaver.<\/li>\r\n\r\n\r\n\r\n<li><strong>Pr&eacute;visualisation du navigateur en temps r&eacute;el<\/strong>. Visualisez les changements sur votre site web tout en les modifiant en temps r&eacute;el.<\/li>\r\n\r\n\r\n\r\n<li><strong>Biblioth&egrave;ques Creative Cloud<\/strong>. Acc&eacute;der aux couleurs, graphiques et autres &eacute;l&eacute;ments cr&eacute;atifs pr&eacute;sents dans la base de donn&eacute;es.<\/li>\r\n\r\n\r\n\r\n<li><strong>Chromium Embedded Framework (CEF)<\/strong>. Pour aider les d&eacute;veloppeurs &agrave; int&eacute;grer des navigateurs &agrave; utiliser dans une application tierce.<\/li>\r\n<\/ul><h3 id=\"h-rien-n-est-parfait\" class=\"wp-block-heading\">Rien n&rsquo;est parfait<\/h3><p>N&eacute;anmoins, Adobe Dreamweaver CC a aussi ses inconv&eacute;nients. Comme indiqu&eacute; bri&egrave;vement ci-dessus, la qualit&eacute; de ce logiciel d&eacute;pend de vos comp&eacute;tences. Ainsi, m&ecirc;me si l&rsquo;interface en direct aide les d&eacute;butants &agrave; construire un site web, vous aurez probablement besoin de plus de temps pour en cr&eacute;er un vraiment sophistiqu&eacute;.<\/p><p>Malgr&eacute; toutes les informations fournies, Dreamweaver a encore beaucoup &agrave; apprendre. Vous devrez investir un temps consid&eacute;rable pour ma&icirc;triser pleinement toutes ses fonctionnalit&eacute;s. Donc si vous vous attendez &agrave; lire un tutoriel Dreamweaver et &agrave; devenir un pro &ndash; vous serez d&eacute;&ccedil;u.<\/p><p>De plus, c&rsquo;est un service payant qui n&rsquo;est pas vraiment abordable. Pour un d&eacute;veloppeur amateur, Dreamweaver n&rsquo;est donc probablement pas le meilleur outil &agrave; utiliser.<\/p><p><div class=\"protip\">\n                    <h4 class=\"title\"><\/h4>\n                    <p><strong>CONSEIL PRO<\/strong> : Si vous avez l'impression qu'Adobe Dreamweaver CC n'est pas pour vous, vous n'&ecirc;tes pas seul. En fait, environ 33 % des sites web sur internet choisissent WordPress pour la cr&eacute;ation de leur site, et vous pouvez vous aussi en cr&eacute;er un facilement. C'est encore mieux si vous &ecirc;tes sur Hostinger, notre fonction d'installation en 1 clic le fera pour vous.<span style=\"font-weight: 400\"><span style=\"font-weight: 400\"><\/p>\n                <\/div><\/span><\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-tarification-de-dreamweaver\">Tarification de Dreamweaver<\/h2><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>En tant que logiciel par abonnement, Dreamweaver offre une gamme de plans pour les utilisateurs particuliers. Le plan pr&eacute;pay&eacute; pour l&rsquo;application unique plus <strong>100 Go<\/strong> de stockage dans le cloud, <strong>Adobe Portfolio<\/strong>, <strong>Fonts<\/strong>, et <strong>Spark<\/strong> co&ucirc;te <strong>287,77 &euro;<\/strong> par an.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Et l&rsquo;option Tout Creative Cloud, qui comprend la collection compl&egrave;te de <strong>plus de 20<\/strong> logiciels de cr&eacute;ation, dont <strong>Photoshop CC<\/strong>, <strong>Illustrator CC<\/strong> et <strong>Adobe XD CC<\/strong>, vous co&ucirc;tera <strong>719,86 &euro;<\/strong> par an.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Voici les plans complets disponibles pour les particuliers :<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" class=\"alignnone wp-image-6697\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/tarifs.png\/public\" alt=\"Formules et tarifs pour particuliers\" width=\"1513\" height=\"900\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/tarifs.png\/w=1513,fit=scale-down 1513w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/tarifs.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/tarifs.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/tarifs.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/tarifs.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1513px) 100vw, 1513px\" \/><\/figure><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Vous pouvez &eacute;galement essayer Dreamweaver pendant sept jours dans le cadre d&rsquo;un essai gratuit. Il vous suffit de t&eacute;l&eacute;charger l&rsquo;application et de vous inscrire avec votre compte de messagerie, <a href=\"http:\/\/facebook.com\/\" target=\"_blank\" rel=\"noopener\"><strong>Facebook<\/strong><\/a> ou <a href=\"http:\/\/google.com\/\" target=\"_blank\" rel=\"noopener\"><strong>Google<\/strong><\/a>.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Commen&ccedil;ons par un tutoriel de base sur Dreamweaver et apprenons &agrave; cr&eacute;er une page d&rsquo;accueil.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-tutoriel-dreamweaver-cr-er-un-site-web\">Tutoriel Dreamweaver : Cr&eacute;er un site web<\/h2><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><h3 class=\"wp-block-heading\" id=\"h-1-cr-er-un-nouveau-site\">1. Cr&eacute;er un nouveau site<\/h3><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Dans votre tableau de bord Adobe Dreamweaver CC, allez &agrave; <strong>Site -&gt; Nouveau site<\/strong> et une fen&ecirc;tre s&rsquo;ouvrira.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"980\" height=\"677\" class=\"wp-image-6701\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/creer-un-nouveau-site.png\/public\" alt=\"Cr&eacute;er un nouveau site\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/creer-un-nouveau-site.png\/w=980,fit=scale-down 980w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/creer-un-nouveau-site.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/creer-un-nouveau-site.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/creer-un-nouveau-site.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 980px) 100vw, 980px\" \/><\/figure><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>La premi&egrave;re &eacute;tape est de donner un nom &agrave; votre site web et de l&rsquo;enregistrer dans un dossier unique. Cela permet d&rsquo;organiser les fichiers et facilitera le processus de t&eacute;l&eacute;chargement.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Si vous souhaitez inclure des images dans votre site, vous pouvez le faire en naviguant vers <strong>Param&egrave;tres avanc&eacute;s -&gt; Infos locales<\/strong>. Le dossier des images doit &eacute;galement &ecirc;tre cr&eacute;&eacute; dans le dossier de votre site.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"977\" height=\"675\" class=\"wp-image-6702\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/dossier-images.png\/public\" alt=\"Dossier images\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/dossier-images.png\/w=977,fit=scale-down 977w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/dossier-images.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/dossier-images.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/dossier-images.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 977px) 100vw, 977px\" \/><\/figure><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Cliquez sur <strong>Enregistrer<\/strong> lorsque vous avez termin&eacute;.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><h3 class=\"wp-block-heading\" id=\"h-2-cr-er-le-fichier-de-la-page-d-accueil\">2. Cr&eacute;er le fichier de la page d&rsquo;accueil<\/h3><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Vous aurez un espace de travail vide pour le moment. Mais, regardez dans le panneau en haut &agrave; droite, les fichiers de votre site devraient s&rsquo;y trouver. Maintenant, nous allons cr&eacute;er le fichier de la page d&rsquo;accueil &agrave; partir de z&eacute;ro.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Cliquez sur <strong>Fichier -&gt; Nouveau<\/strong> et choisissez <strong>Nouveau document<\/strong>. S&eacute;lectionnez HTML comme type de document et cliquez sur <strong>Cr&eacute;er<\/strong>. Le titre du document est facultatif.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1116\" height=\"695\" class=\"wp-image-6704\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/type-de-document.png\/public\" alt=\"Type de document\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/type-de-document.png\/w=1116,fit=scale-down 1116w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/type-de-document.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/type-de-document.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/type-de-document.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/type-de-document.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1116px) 100vw, 1116px\" \/><\/figure><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Vous serez redirig&eacute; vers l&rsquo;espace de travail et vous aurez une page blanche avec plusieurs lignes de code HTML. Ceci est en fait la vue en temps r&eacute;el de votre site web. Enregistrez ce fichier HTML sous le nom <strong>index.html<\/strong>, et placez-le dans le dossier du site.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1468\" height=\"826\" class=\"wp-image-6705\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/enregistrer-le-fichier-index.png\/public\" alt=\"Enregistrer le fichier d'index\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/enregistrer-le-fichier-index.png\/w=1468,fit=scale-down 1468w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/enregistrer-le-fichier-index.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/enregistrer-le-fichier-index.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/enregistrer-le-fichier-index.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/enregistrer-le-fichier-index.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1468px) 100vw, 1468px\" \/><\/figure><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><h3 class=\"wp-block-heading\" id=\"h-3-cr-er-un-en-t-te\">3. Cr&eacute;er un en-t&ecirc;te<\/h3><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Nous allons cr&eacute;er l&rsquo;en-t&ecirc;te du site web. Habituellement, il s&rsquo;agit du logo et du nom de votre site.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Cliquez sur la page blanche ou choisissez un endroit pr&eacute;cis dans l&rsquo;&eacute;l&eacute;ment <strong>&lt;body&gt;<\/strong> de l&rsquo;&eacute;diteur. Dans le menu sup&eacute;rieur, cliquez sur <strong>Insertion<\/strong>. Vous obtiendrez ainsi une liste d&rsquo;&eacute;l&eacute;ments HTML courants que vous pouvez ajouter &agrave; votre page.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Trouvez l&rsquo;&eacute;l&eacute;ment <strong>Header<\/strong>.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Cliquez ou glissez-d&eacute;posez-le dans votre espace de travail, et il sera ajout&eacute; &agrave; votre site web avec son code.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1486\" height=\"866\" class=\"wp-image-6707\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/ajouter-en-tete-dans-le-document.png\/public\" alt=\"Ajouter l'en-t&ecirc;te dans le document\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/ajouter-en-tete-dans-le-document.png\/w=1486,fit=scale-down 1486w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/ajouter-en-tete-dans-le-document.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/ajouter-en-tete-dans-le-document.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/ajouter-en-tete-dans-le-document.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/ajouter-en-tete-dans-le-document.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1486px) 100vw, 1486px\" \/><\/figure><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Ensuite, nous allons transformer l&rsquo;en-t&ecirc;te en un titre avec la balise <strong>&lt;H1&gt;&hellip;&lt;\/H1&gt;<\/strong>. Ceci est pour des raisons de r&eacute;f&eacute;rencement et pour informer les moteurs de recherche de la nature de votre site. Marquez le texte dans cette section et allez dans le menu <strong>Insertion<\/strong>. Faites une recherche et cliquez sur <strong>Titre : H1<\/strong>.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Ensuite, changez le texte en fonction du titre de votre site web. Il doit &ecirc;tre descriptif et repr&eacute;sentatif. Ici, nous allons utiliser &ldquo;Bienvenue sur le site de d&eacute;veloppement&rdquo;.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1873\" height=\"984\" class=\"wp-image-6709\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/ajouter-h1-et-changer-le-titre.png\/public\" alt=\"Ajouter H1 et modifier le titre\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/ajouter-h1-et-changer-le-titre.png\/w=1873,fit=scale-down 1873w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/ajouter-h1-et-changer-le-titre.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/ajouter-h1-et-changer-le-titre.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/ajouter-h1-et-changer-le-titre.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/ajouter-h1-et-changer-le-titre.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/ajouter-h1-et-changer-le-titre.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1873px) 100vw, 1873px\" \/><\/figure><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><h3 class=\"wp-block-heading\" id=\"h-4-ajouter-un-menu-de-navigation\">4. Ajouter un menu de navigation<\/h3><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Pour ajouter un bouton de navigation, ajoutez une ligne apr&egrave;s l&rsquo;en-t&ecirc;te en appuyant sur la touche retour ou entr&eacute;e. Allez maintenant dans le panneau <strong>Insertion<\/strong> et recherchez l&rsquo;&eacute;l&eacute;ment <strong>Navigation<\/strong>. Lorsque vous cliquez dessus, une fen&ecirc;tre s&rsquo;ouvre. Saisissez <strong>navigation<\/strong> comme ID et cliquez sur <strong>OK<\/strong>.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"631\" height=\"270\" class=\"wp-image-6710 aligncenter\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/inserer-navigation.png\/public\" alt=\"Ins&eacute;rer navigation\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/inserer-navigation.png\/w=631,fit=scale-down 631w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/inserer-navigation.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/inserer-navigation.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 631px) 100vw, 631px\" \/><\/figure>\r\n<\/div><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Cela ajoutera un &eacute;l&eacute;ment de navigation &agrave; l&rsquo;&eacute;diteur. Lorsque vous &ecirc;tes dans le contenu de l&rsquo;&eacute;l&eacute;ment, recherchez <strong>Hyperlink<\/strong>&nbsp;dans le panneau <strong>Insertion<\/strong>. Cliquez dessus et remplissez les d&eacute;tails comme suit :<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"604\" height=\"299\" class=\"wp-image-6711 aligncenter\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/details-hyperlink.png\/public\" alt=\"D&eacute;tails Hyperlink\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/details-hyperlink.png\/w=604,fit=scale-down 604w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/details-hyperlink.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/details-hyperlink.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 604px) 100vw, 604px\" \/><\/figure>\r\n<\/div><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\r\n<p><strong>Important<\/strong> : le lien correspondra &agrave; la page dans laquelle vous naviguerez sur votre site web. Actuellement, nous n&rsquo;utilisons qu&rsquo;un hashtag # pour combler le vide.<\/p>\r\n<\/blockquote><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Lorsque vous avez termin&eacute;, cliquez sur <strong>OK<\/strong>. C&rsquo;est maintenant un bouton d&rsquo;accueil cliquable et une nouvelle ligne de code a &eacute;t&eacute; ajout&eacute;e sur l&rsquo;&eacute;diteur.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1468\" height=\"867\" class=\"wp-image-6715\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/navigation-accueil.png\/public\" alt=\"Navigation d'accueil\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/navigation-accueil.png\/w=1468,fit=scale-down 1468w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/navigation-accueil.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/navigation-accueil.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/navigation-accueil.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/navigation-accueil.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1468px) 100vw, 1468px\" \/><\/figure><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><h3 class=\"wp-block-heading\" id=\"h-5-ajouter-une-description-du-site-web\">5. Ajouter une description du site web<\/h3><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Nous allons ins&eacute;rer un titre secondaire, un paragraphe et plusieurs puces comme description.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Ajoutez une ligne apr&egrave;s le code de navigation et cliquez sur <strong>Titre : H2<\/strong> et <strong>Paragraphe<\/strong> dans le panneau <strong>Insertion<\/strong>. Cela ajoutera les balises <strong>&lt;h2&gt;<\/strong> et <strong>&lt;p&gt;<\/strong> dans l&rsquo;&eacute;diteur. Remplissez-y votre contenu.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1465\" height=\"829\" class=\"wp-image-6716\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/ajouter-un-paragraphe.png\/public\" alt=\"Ajouter un paragraphe\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/ajouter-un-paragraphe.png\/w=1465,fit=scale-down 1465w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/ajouter-un-paragraphe.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/ajouter-un-paragraphe.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/ajouter-un-paragraphe.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/ajouter-un-paragraphe.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1465px) 100vw, 1465px\" \/><\/figure><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Maintenant, pour ajouter des puces, ajoutez une autre ligne sous le code du paragraphe. Allez dans le panneau <strong>Insertion<\/strong> et cliquez sur <strong>Liste simple<\/strong>. Cela devrait ajouter la balise <strong>&lt;ul&gt;<\/strong> sur l&rsquo;&eacute;diteur. Ensuite, cliquez sur <strong>&Eacute;l&eacute;ment de liste<\/strong> dans le panneau <strong>Insertion<\/strong> et il ajoutera la balise <strong>&lt;li&gt;<\/strong> &agrave; l&rsquo;int&eacute;rieur de la balise <strong>&lt;ul&gt;<\/strong>.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Le truc avec la liste en HTML, c&rsquo;est que vous devez vous-m&ecirc;me ajouter manuellement plusieurs balises en fonction du nombre de vos points. Pour nous, c&rsquo;est comme &ccedil;a.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1465\" height=\"833\" class=\"wp-image-6717\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/ajouter-une-liste-d-elements.png\/public\" alt=\"Ajouter une liste des &eacute;l&eacute;ments\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/ajouter-une-liste-d-elements.png\/w=1465,fit=scale-down 1465w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/ajouter-une-liste-d-elements.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/ajouter-une-liste-d-elements.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/ajouter-une-liste-d-elements.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/ajouter-une-liste-d-elements.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1465px) 100vw, 1465px\" \/><\/figure><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Vous avez essentiellement cr&eacute;&eacute; la structure de base de la page d&rsquo;accueil. Vous pouvez &eacute;galement ajouter du contenu suppl&eacute;mentaire comme des formulaires, des vid&eacute;os, des images, etc.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Bien que cela semble ennuyeux pour le moment, nous allons ajouter le style de la page pour la rendre plus attrayante.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><h3 class=\"wp-block-heading\" id=\"h-6-cr-er-un-fichier-css\">6. Cr&eacute;er un fichier CSS<\/h3><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>La feuille de style en cascade (CSS) est utilis&eacute;e pour styliser les &eacute;l&eacute;ments en HTML et va de pair lors de la cr&eacute;ation d&rsquo;un site web par les d&eacute;veloppeurs. Pensez &agrave; HTML comme la structure du corps, et CSS comme la partie esth&eacute;tique qui rend le corps visuellement attrayant.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Maintenant, la premi&egrave;re chose &agrave; faire est de donner un identifiant &agrave; votre Header. Allez en bas &agrave; droite du panneau Dreamweaver et choisissez le panneau <strong>DOM<\/strong>. Vous y verrez un aper&ccedil;u de la structure de votre site web.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Cliquez sur <strong>Header<\/strong>, et vous remarquerez qu&rsquo;il marque votre en-t&ecirc;te en bleu, ainsi que l&rsquo;&eacute;tiquette et le symbole plus.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1872\" height=\"952\" class=\"wp-image-6718\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/marquer-header-pour-css.png\/public\" alt=\"Marquer Header pour CSS\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/marquer-header-pour-css.png\/w=1872,fit=scale-down 1872w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/marquer-header-pour-css.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/marquer-header-pour-css.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/marquer-header-pour-css.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/marquer-header-pour-css.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/marquer-header-pour-css.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1872px) 100vw, 1872px\" \/><\/figure><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Cliquez sur le symbole plus et tapez <strong>#header<\/strong>. Le hashtag signifie que nous attribuons un identifiant &agrave; cet &eacute;l&eacute;ment. Appuyez sur la touche retour ou sur la touche entr&eacute;e. Dans le menu suivant, s&eacute;lectionnez une source : <strong>Cr&eacute;er un nouveau fichier CSS<\/strong>.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Une nouvelle fen&ecirc;tre s&rsquo;ouvrira. Choisissez <strong>Parcourir<\/strong> et localisez le dossier de votre site. Tapez <strong>style.css<\/strong> et cliquez sur <strong>Enregistrer<\/strong>. Ensuite, cliquez sur <strong>OK<\/strong>.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1871\" height=\"915\" class=\"wp-image-6719\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/nouveau-fichier-css-cree.png\/public\" alt=\"Nouveau fichier CSS cr&eacute;&eacute;\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/nouveau-fichier-css-cree.png\/w=1871,fit=scale-down 1871w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/nouveau-fichier-css-cree.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/nouveau-fichier-css-cree.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/nouveau-fichier-css-cree.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/nouveau-fichier-css-cree.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/nouveau-fichier-css-cree.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1871px) 100vw, 1871px\" \/><\/figure><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Vous remarquerez qu&rsquo;un nouveau <strong>style.css<\/strong> appara&icirc;t en haut de la vue en temps r&eacute;el et un nouvel &eacute;l&eacute;ment de lien sur l&rsquo;&eacute;diteur de code.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Faites de m&ecirc;me pour tous les &eacute;l&eacute;ments qui ont besoin d&rsquo;&ecirc;tre stylis&eacute;s. Cette fois, au lieu de cr&eacute;er un nouveau fichier CSS, enregistrez-le dans le m&ecirc;me fichier <strong>style.css<\/strong> que vous avez cr&eacute;&eacute; pr&eacute;c&eacute;demment.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Maintenant, vous &ecirc;tes pr&ecirc;t &agrave; le styliser en utilisant le s&eacute;lecteur CSS.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><h3 class=\"wp-block-heading\" id=\"h-7-cr-er-un-s-lecteur-css-pour-le-titre-du-site-web\">7. Cr&eacute;er un s&eacute;lecteur CSS pour le titre du site web<\/h3><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Nous allons changer la police de caract&egrave;res et aligner le titre de notre site web au centre.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>S&eacute;lectionnez le <strong>H1<\/strong> sous votre header dans le panneau DOM. Ensuite, choisissez <strong>CSS Designer<\/strong> dans le panneau ci-dessus.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"380\" height=\"855\" class=\"wp-image-6720 aligncenter\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/selectionnez-et-choisissez-designer.png\/public\" alt=\"S&eacute;lectionnez et choisissez Designer\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/selectionnez-et-choisissez-designer.png\/w=380,fit=scale-down 380w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/selectionnez-et-choisissez-designer.png\/w=133,fit=scale-down 133w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/selectionnez-et-choisissez-designer.png\/w=67,fit=scale-down 67w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><\/figure>\r\n<\/div><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Cliquez sur <strong>le symbole plus<\/strong> qui se trouve juste derri&egrave;re <strong>S&eacute;lecteurs<\/strong>. Il propose automatiquement un nom comme <strong>#header h1<\/strong>, et appuyez sur la touche Entr&eacute;e.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\r\n<p><strong>Remarque<\/strong> : Cela signifie que vous ne visez que l&rsquo;&eacute;l&eacute;ment nomm&eacute; <strong>h1<\/strong> &agrave; l&rsquo;int&eacute;rieur de l&rsquo;&eacute;l&eacute;ment <strong>#header<\/strong>. De cette fa&ccedil;on, le style ne s&rsquo;appliquera qu&rsquo;au texte &eacute;crit (le titre de votre site web) et non &agrave; l&rsquo;&eacute;l&eacute;ment header lui-m&ecirc;me.<\/p>\r\n<\/blockquote><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><h3 class=\"wp-block-heading\" id=\"h-8-changer-la-police-du-titre\">8. Changer la police du titre<\/h3><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Assurez-vous que les s&eacute;lecteurs pointent sur <strong>#header h1<\/strong>.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Cliquez sur <strong>Propri&eacute;t&eacute;s<\/strong> et d&eacute;cochez la case <strong>Ensemble<\/strong> pour d&eacute;verrouiller les options <strong>Mise en page<\/strong>, <strong>Texte<\/strong>, <strong>Bordure<\/strong>, <strong>Arri&egrave;re-plan<\/strong> et <strong>Autres<\/strong>.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"384\" height=\"542\" class=\"wp-image-6721 aligncenter\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/proprietes-du-css.png\/public\" alt=\"Propri&eacute;t&eacute;s du CSS\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/proprietes-du-css.png\/w=384,fit=scale-down 384w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/proprietes-du-css.png\/w=213,fit=scale-down 213w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/proprietes-du-css.png\/w=106,fit=scale-down 106w\" sizes=\"(max-width: 384px) 100vw, 384px\" \/><\/figure>\r\n<\/div><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Cliquez sur l&rsquo;option <strong>Texte<\/strong> et survolez <strong>font-family<\/strong> et cliquez sur <strong>default font<\/strong>. Vous aurez alors le choix entre de nombreuses options.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1875\" height=\"948\" class=\"wp-image-6722\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/options-de-police.png\/public\" alt=\"Options de police\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/options-de-police.png\/w=1875,fit=scale-down 1875w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/options-de-police.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/options-de-police.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/options-de-police.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/options-de-police.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/options-de-police.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1875px) 100vw, 1875px\" \/><\/figure><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>De plus, le menu <strong>G&eacute;rer les polices<\/strong> vous donnera une autre gamme d&rsquo;options disponibles dans la base de donn&eacute;es <a href=\"https:\/\/edgewebfonts.adobe.com\/fonts\" target=\"_blank\" rel=\"noopener\"><strong>Adobe Edge Web Fonts<\/strong><\/a>.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Choisissez votre police pr&eacute;f&eacute;r&eacute;e en cliquant dessus. Ici, nous utilisons une police appel&eacute;e <strong>Karla<\/strong>. Lorsque vous aurez termin&eacute;, la police de titre de votre site web sera modifi&eacute;e et le code n&eacute;cessaire sera ajout&eacute; au <strong>Code source<\/strong> et &agrave; <strong>style.css<\/strong>.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1468\" height=\"827\" class=\"wp-image-6723\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/choisir-la-police.png\/public\" alt=\"Choisir la police\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/choisir-la-police.png\/w=1468,fit=scale-down 1468w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/choisir-la-police.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/choisir-la-police.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/choisir-la-police.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/choisir-la-police.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1468px) 100vw, 1468px\" \/><\/figure><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><h3 class=\"wp-block-heading\" id=\"h-9-mettre-le-titre-au-centre\">9. Mettre le titre au centre<\/h3><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Dans l&rsquo;option <strong>Texte<\/strong>, survolez <strong>text-align<\/strong> et cliquez sur <strong>center<\/strong>. Vous remarquerez que le changement se produit et que du code suppl&eacute;mentaire est ajout&eacute; au fichier <strong>style.css<\/strong>.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"346\" height=\"183\" class=\"wp-image-6724 aligncenter\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/code-du-centre.png\/public\" alt=\"Code du centre\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/code-du-centre.png\/w=346,fit=scale-down 346w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/code-du-centre.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/code-du-centre.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 346px) 100vw, 346px\" \/><\/figure>\r\n<\/div><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Apportez toutes les modifications n&eacute;cessaires au contenu de votre site web. Pour ce tutoriel, nous avons &eacute;galement ajout&eacute; du contenu et donn&eacute; un nouveau style &agrave; notre site. Voici le look final :<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1799\" height=\"888\" class=\"wp-image-6725\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/site-web-du-tutoriel.png\/public\" alt=\"Site web du tutoriel\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/site-web-du-tutoriel.png\/w=1799,fit=scale-down 1799w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/site-web-du-tutoriel.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/site-web-du-tutoriel.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/site-web-du-tutoriel.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/site-web-du-tutoriel.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/site-web-du-tutoriel.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1799px) 100vw, 1799px\" \/><\/figure><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-cr-ation-d-un-site-web-l-aide-d-un-mod-le-dreamweaver\">Cr&eacute;ation d&rsquo;un site web &agrave; l&rsquo;aide d&rsquo;un mod&egrave;le Dreamweaver<\/h2><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Vous pouvez &eacute;galement cr&eacute;er un site web avec un mod&egrave;le pr&eacute;d&eacute;fini dans Dreamweaver. Avec un mod&egrave;le, vous aurez une longueur d&rsquo;avance et vous aurez l&rsquo;avantage de voir &agrave; quoi ressemblera le site final avec le code qui suivra.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>D&eacute;couvrons un autre tutoriel Dreamweaver et apprenons &agrave; utiliser un mod&egrave;le :<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><h3 class=\"wp-block-heading\" id=\"h-1-choisissez-un-mod-le\">1. Choisissez un mod&egrave;le<\/h3><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Pour cela, allez dans le menu <strong>Fichier -&gt; Nouveau<\/strong>. Choisissez <strong>Mod&egrave;les de d&eacute;marrage -&gt; Mise en page standard<\/strong>. Nous utiliserons une seule page pour ce tutoriel. Cliquez sur <strong>Cr&eacute;er<\/strong>.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" class=\"alignnone wp-image-6728\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/modele-de-d%C3%A9marrage-une-page.png\/public\" alt=\"Mod&egrave;le de d&eacute;marrage de page\" width=\"1115\" height=\"702\"><\/figure><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Dreamweaver a pratiquement cr&eacute;&eacute; toute la structure et le style n&eacute;cessaires pour votre site web. Il ne reste plus qu&rsquo;&agrave; adapter le contenu et le style &agrave; vos besoins.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1876\" height=\"951\" class=\"wp-image-6729\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/une-page-dans-espace-de-travail.png\/public\" alt=\"Une page dans l'espace de travail\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/une-page-dans-espace-de-travail.png\/w=1876,fit=scale-down 1876w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/une-page-dans-espace-de-travail.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/une-page-dans-espace-de-travail.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/une-page-dans-espace-de-travail.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/une-page-dans-espace-de-travail.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/une-page-dans-espace-de-travail.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1876px) 100vw, 1876px\" \/><\/figure><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Dans ce tutoriel, nous n&rsquo;effectuerons que des modifications de base, comme la modification du titre et de la description du site web, et nous changerons &eacute;galement certaines parties de la couleur de fond du site.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><h3 class=\"wp-block-heading\" id=\"h-2-modifier-le-logo-et-le-texte-de-l-en-t-te\">2. Modifier le logo et le texte de l&rsquo;en-t&ecirc;te<\/h3><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Pour changer le logo du texte, cliquez sur le logo <strong>h4 .logo<\/strong> dans le panneau <strong>DOM<\/strong>. Il mettra en &eacute;vidence la ligne de code sur l&rsquo;&eacute;diteur, changez-la pour le nom que vous voulez.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Vous pouvez &eacute;galement double-cliquer sur la case du logo dans la vue en temps r&eacute;el et modifier le texte &agrave; partir de l&agrave;. Faites de m&ecirc;me pour l&rsquo;en-t&ecirc;te et le titre d&rsquo;appel du site. Le n&ocirc;tre a &eacute;t&eacute; modifi&eacute; comme suit.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1304\" height=\"456\" class=\"wp-image-6731\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/modifier-le-titre-et-le-logo.png\/public\" alt=\"Modifier le titre et le logo\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/modifier-le-titre-et-le-logo.png\/w=1304,fit=scale-down 1304w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/modifier-le-titre-et-le-logo.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/modifier-le-titre-et-le-logo.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/modifier-le-titre-et-le-logo.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/modifier-le-titre-et-le-logo.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1304px) 100vw, 1304px\" \/><\/figure><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><h3 class=\"wp-block-heading\" id=\"h-3-changer-la-couleur-de-fond-de-l-en-t-te\">3. Changer la couleur de fond de l&rsquo;en-t&ecirc;te<\/h3><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Pour changer la couleur de l&rsquo;arri&egrave;re-plan, allez dans le fichier <strong>.css<\/strong> et cherchez l&rsquo;&eacute;l&eacute;ment d&rsquo;en-t&ecirc;te. Dans ce cas, il s&rsquo;agit de <strong>.hero<\/strong>. Cherchez la ligne de couleur d&rsquo;arri&egrave;re-plan, et vous remarquerez un certain nombre cryptique.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Ce num&eacute;ro est en fait le code couleur HTML. Chaque couleur a son propre num&eacute;ro et vous pouvez le <a href=\"http:\/\/html-color.org\/\" target=\"_blank\" rel=\"noopener\"><strong>v&eacute;rifier ici<\/strong><\/a>.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Ce qui est cool avec Dreamweaver, c&rsquo;est qu&rsquo;il n&rsquo;est pas n&eacute;cessaire d&rsquo;aller ailleurs pour trouver le code de couleur. Il suffit de s&eacute;lectionner ce num&eacute;ro, de faire un clic droit avec la souris et de choisir <strong>Edition rapide<\/strong>. Une fen&ecirc;tre de s&eacute;lection de couleur s&rsquo;ouvrira et vous pourrez l&rsquo;ajuster &agrave; partir de l&agrave;.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1467\" height=\"794\" class=\"wp-image-6732\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/selectionneur-de-couleurs-dreamweaver.png\/public\" alt=\"S&eacute;lectionneur de couleurs Dreamweaver\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/selectionneur-de-couleurs-dreamweaver.png\/w=1467,fit=scale-down 1467w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/selectionneur-de-couleurs-dreamweaver.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/selectionneur-de-couleurs-dreamweaver.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/selectionneur-de-couleurs-dreamweaver.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/selectionneur-de-couleurs-dreamweaver.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1467px) 100vw, 1467px\" \/><\/figure><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Nous avons chang&eacute; le n&ocirc;tre pour qu&rsquo;il en soit ainsi.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1467\" height=\"797\" class=\"wp-image-6733\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/changer-la-couleur-de-fond.png\/public\" alt=\"Changer la couleur de fond\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/changer-la-couleur-de-fond.png\/w=1467,fit=scale-down 1467w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/changer-la-couleur-de-fond.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/changer-la-couleur-de-fond.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/changer-la-couleur-de-fond.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/changer-la-couleur-de-fond.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1467px) 100vw, 1467px\" \/><\/figure><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Bien s&ucirc;r, vous avez encore du travail &agrave; faire. Il y a du contenu que vous devez ajouter et du style &agrave; ajuster. Ce tutoriel ne donne que les modifications de base que vous pouvez faire avec le mod&egrave;le.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Lorsque vous aurez fini de modifier le site web, vous pourrez le t&eacute;l&eacute;charger sur votre serveur. Vous apprendrez &agrave; le faire en une minute.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-pr-visualisez-votre-site-sur-mobile\">Pr&eacute;visualisez votre site sur mobile<\/h2><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>En cette &egrave;re de mobilit&eacute;, il est indispensable de disposer d&rsquo;un site web r&eacute;actif. Sinon, beaucoup de vos visiteurs abandonneront le site web. Et l&rsquo;une des caract&eacute;ristiques int&eacute;ressantes de Dreamweaver est que vous pouvez pr&eacute;visualiser instantan&eacute;ment votre site sur les appareils mobiles. Voici un tutoriel Dreamweaver sur la fa&ccedil;on de le faire :<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Acc&eacute;dez &agrave; l&rsquo;<strong>aper&ccedil;u en temps r&eacute;el<\/strong> en bas &agrave; droite de votre espace de travail. Ouvrez un navigateur sur votre t&eacute;l&eacute;phone et scannez ce code barre, ou tapez l&rsquo;URL manuellement.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1488\" height=\"950\" class=\"wp-image-6734\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/voir-dans-le-navigateur-de-votre-portable.png\/public\" alt=\"Voir dans le navigateur de votre portable\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/voir-dans-le-navigateur-de-votre-portable.png\/w=1488,fit=scale-down 1488w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/voir-dans-le-navigateur-de-votre-portable.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/voir-dans-le-navigateur-de-votre-portable.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/voir-dans-le-navigateur-de-votre-portable.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/voir-dans-le-navigateur-de-votre-portable.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1488px) 100vw, 1488px\" \/><\/figure><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\r\n<p>Important : pour effectuer cette op&eacute;ration, vous devez utiliser le m&ecirc;me identifiant Adobe sur votre Dreamweaver et votre appareil mobile. Utilisez &eacute;galement le m&ecirc;me r&eacute;seau WiFi, et activez Javascript et les cookies.<\/p>\r\n<\/blockquote><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Vous pouvez &eacute;galement utiliser la fonction d&rsquo;affichage mobile int&eacute;gr&eacute;e dans Dreamweaver. Allez dans le menu <strong>Taille de la fen&ecirc;tre<\/strong> et choisissez l&rsquo;option de votre appareil.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1514\" height=\"831\" class=\"wp-image-6735\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/autre-methode-de-visualisation-mobile.png\/public\" alt=\"Autre m&eacute;thode de visualisation mobile\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/autre-methode-de-visualisation-mobile.png\/w=1514,fit=scale-down 1514w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/autre-methode-de-visualisation-mobile.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/autre-methode-de-visualisation-mobile.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/autre-methode-de-visualisation-mobile.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/autre-methode-de-visualisation-mobile.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1514px) 100vw, 1514px\" \/><\/figure><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Vous devez savoir que les mod&egrave;les sont principalement con&ccedil;us pour &ecirc;tre compatibles avec les t&eacute;l&eacute;phones portables. Mais ce n&rsquo;est pas le cas si vous construisez votre site web &agrave; partir de z&eacute;ro.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n<\/span><\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-publier-votre-site-en-ligne\">Publier votre site en ligne<\/h2><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\">\r\n\r\n<\/span><\/span><\/p><p>&nbsp;<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"><\/span><\/span><\/p><p>Lorsque vous avez termin&eacute; la cr&eacute;ation d&rsquo;un site web, vous pouvez <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/mettre-site-en-ligne\">publier le site web en ligne<\/a> directement depuis Dreamweaver. Pour ce faire, il vous suffit d&rsquo;avoir un <a href=\"https:\/\/www.hostinger.com\/fr\/hebergement-web\"><strong>plan d&rsquo;h&eacute;bergement<\/strong><\/a> actif et un compte FTP. Voici un tutoriel Dreamweaver sur la mani&egrave;re de proc&eacute;der :<\/p><p>&nbsp;<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> <\/span><\/span><\/p><p>Pour &eacute;tablir une connexion <strong>FTP<\/strong> avec Dreamweaver, allez dans <strong>Site -&gt; G&eacute;rer les sites<\/strong>. Dans la fen&ecirc;tre suivante, choisissez le site web que vous avez d&eacute;velopp&eacute;, et cliquez sur l&rsquo;ic&ocirc;ne en forme de crayon en bas. Une nouvelle fen&ecirc;tre appara&icirc;tra. Allez dans <strong>Serveurs<\/strong>.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><h3 class=\"wp-block-heading\" id=\"h-1-cr-er-une-nouvelle-connexion-ftp\">1. Cr&eacute;er une nouvelle connexion FTP<\/h3><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" class=\"alignnone wp-image-6736\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/fenetre-de-gestion-du-site.png\/public\" alt=\"Fen&ecirc;tre de configuration de site\" width=\"1492\" height=\"927\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/fenetre-de-gestion-du-site.png\/w=1492,fit=scale-down 1492w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/fenetre-de-gestion-du-site.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/fenetre-de-gestion-du-site.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/fenetre-de-gestion-du-site.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/fenetre-de-gestion-du-site.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1492px) 100vw, 1492px\" \/><\/figure><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Cliquez sur l&rsquo;ic&ocirc;ne <strong>plus<\/strong> de la fen&ecirc;tre <strong>Serveurs<\/strong>, et le formulaire de connexion FTP s&rsquo;affichera. Vous devez le remplir.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Si vous &ecirc;tes sur <a href=\"https:\/\/www.hostinger.com\/fr\/\"><strong>Hostinger<\/strong><\/a>, vous pouvez trouver les d&eacute;tails FTP sur votre hPanel. Allez dans <strong>H&eacute;bergement&nbsp;-&gt; G&eacute;rer -&gt;<\/strong> <strong>Fichiers<\/strong> <strong>-&gt;<\/strong> <strong>Comptes FTP<\/strong>.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n<\/span><\/span><\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"645\" class=\"wp-image-24403\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/06\/hpanel-files-ftpaccounts-fr-1.png\/w=1024,h=1024,fit=scale-down\" alt=\"Comptes FTP hPanel\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/06\/hpanel-files-ftpaccounts-fr-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/06\/hpanel-files-ftpaccounts-fr-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/06\/hpanel-files-ftpaccounts-fr-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/06\/hpanel-files-ftpaccounts-fr-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\">\r\n\r\n <\/span><\/span><\/p><h3 class=\"wp-block-heading\" id=\"h-2-remplissez-les-d-tails-de-connexion-ftp\">2. Remplissez les d&eacute;tails de connexion FTP<\/h3><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"978\" height=\"678\" class=\"wp-image-6738\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/la-connexion-ftp-est-reussie.png\/public\" alt=\"La connexion FTP est r&eacute;ussie\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/la-connexion-ftp-est-reussie.png\/w=978,fit=scale-down 978w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/la-connexion-ftp-est-reussie.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/la-connexion-ftp-est-reussie.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/la-connexion-ftp-est-reussie.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/figure><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Lorsque vous avez termin&eacute; de remplir le formulaire, cliquez sur <strong>Tester<\/strong>. Dreamweaver vous indiquera si la connexion est r&eacute;ussie. N&rsquo;oubliez pas de cliquer sur <strong>Enregistrer<\/strong>.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>De retour &agrave; votre panneau <strong>Fichiers<\/strong>, vous pouvez maintenant initier une v&eacute;ritable connexion au serveur, avec des options telles que Obtenir et mettre des fichiers et Synchroniser. &Agrave; partir de l&agrave;, vous pouvez t&eacute;l&eacute;charger le site web sur le serveur.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"381\" height=\"527\" class=\"wp-image-6739 aligncenter\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/connexion-reussie.png\/public\" alt=\"Connexion r&eacute;ussie\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/connexion-reussie.png\/w=381,fit=scale-down 381w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/connexion-reussie.png\/w=217,fit=scale-down 217w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2020\/02\/connexion-reussie.png\/w=108,fit=scale-down 108w\" sizes=\"(max-width: 381px) 100vw, 381px\" \/><\/figure>\r\n<\/div><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.hostinger.com\/fr\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/public\" alt=\"\" class=\"wp-image-41467\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\r\n\r\n <\/span><\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Vous avez appris les bases de la cr&eacute;ation d&rsquo;un site web avec Dreamweaver.<\/p><p><span style=\"font-weight: 400\"><span style=\"font-weight: 400\"> \r\n\r\n <\/span><\/span><\/p><p>Dans ce tutoriel Dreamweaver, vous avez appris &agrave; cr&eacute;er un site &agrave; partir de z&eacute;ro, ainsi qu&rsquo;&agrave; utiliser des mod&egrave;les par d&eacute;faut ; &agrave; le pr&eacute;visualiser pour les appareils mobiles et &agrave; publier un site web sur un serveur FTP.<\/p><p><span style=\"font-weight: 400\"> <\/span><\/p><p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lorsque vous d&eacute;butez dans le d&eacute;veloppement de sites web, vous entendez probablement parler des &eacute;diteurs WYSIWYG (What You See Is What You Get) en fran&ccedil;ais, cela signifie &ldquo;ce que vous voyez est ce que vous obtenez&rdquo;. La tentation de cr&eacute;er un site internet sans aucune connaissance de programmation semble s&eacute;duisante et pourrait vous avoir conduit [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/fr\/tutoriels\/tutoriel-dreamweaver\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":142,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Tutoriel Adobe Dreamweaver : Apprenez \u00e0 Cr\u00e9er Un Site Web","rank_math_description":"L'utilisation de Dreamweaver peut \u00eatre difficile. Consultez notre tutoriel Dreamweaver, apprenez \u00e0 l'utiliser et cr\u00e9ez votre premier site web.","rank_math_focus_keyword":"dreamweaver","footnotes":""},"categories":[4804],"tags":[5373,5375,5374],"class_list":["post-6682","post","type-post","status-publish","format-standard","hentry","category-developpement-site-web","tag-dreamweaver","tag-dreamweaver-tuto","tag-tutoriel-dreamweaver"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/dreamweaver-tutorial","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/tutoriel-dreamweaver","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/tutorial-dreamweaver","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/adobe-dreamweaver-adalah","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/dreamweaver-tutorial","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/dreamweaver-tutorial","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/dreamweaver-tutorial","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/tutorial-dreamweaver","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/tutorial-dreamweaver","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/tutorial-dreamweaver","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/dreamweaver-tutorial","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/dreamweaver-tutorial","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/dreamweaver-tutorial","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/dreamweaver-tutorial","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/6682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/users\/142"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/comments?post=6682"}],"version-history":[{"count":35,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/6682\/revisions"}],"predecessor-version":[{"id":38733,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/6682\/revisions\/38733"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media?parent=6682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/categories?post=6682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/tags?post=6682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}