{"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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Expert tip                <\/p>\n            <\/div>\n            <p class=\"protip__content\"><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>\n        <\/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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">&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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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":[5897,5847],"tags":[5373,5375,5374],"class_list":["post-6682","post","type-post","status-publish","format-standard","hentry","category-design-de-site-web","category-site-web","tag-dreamweaver","tag-dreamweaver-tuto","tag-tutoriel-dreamweaver"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/dreamweaver-tutorial\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/tutorial-dreamweaver\/","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-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/dreamweaver-tutorial\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/dreamweaver-tutorial\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/dreamweaver-tutorial\/","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},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/tutorial-dreamweaver\/","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":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/tutorial-dreamweaver\/","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}]}}