L'affichage des pages

Transcription

1 L'affchage des pages des pages L'affchage des pages dans les navgateurs 51 Tester la page dans un navgateur Avec Dreamweaver vous travallez dans un envronnement graphque : vous voyez à l'écran ce que vous avez nséré (texte, tableau, mage...). Mas vous devez ben comprendre que Dreamweaver n'est pas un navgateur web. Cela mplque que le rendu que vous avez dans la fenêtre de Dreamweaver n'est pas toujours ce qu sera affché dans un vra navgateur web. C'est pour cela qu'l faut toujours vérfer ce que donne l'affchage, le rendu de votre page web dans un navgateur. Ajouter des navgateurs Vous devez tester vos pages dans le plus de navgateurs possble, afn d'affcher le rendu dans pluseurs envronnements. Pour paramétrer les dfférents navgateurs à utlser dans Dreamweaver, allez dans les Préférences (menu Edton sous Wndows, menu Dreamweaver sous Mac OS), dans la catégore Aperçu dans le navgateur. À l'ade du bouton, vous pouvez ajouter un navgateur. Edtons ENI - Toute reproducton nterdte

2 52 Dreamweaver CC L'affchage des pages Dans la fenêtre suvante Ajouter un navgateur, clquez sur le bouton Parcourr pour sélectonner le navgateur. Vous pouvez lu donner un Nom précs. Deux navgateurs pourront être déclarés : un Navgateur prncpal et un Navgateur secondare. Le navgateur prncpal pourra affcher votre page web avec le raccourc Z (sous Wndows) ou AZ (sous Mac), le navgateur secondare avec le raccourc CZ (sous Wndows) ou Z (sous Mac). Affcher la page dans un navgateur En cours de créaton, ou une fos votre page termnée, pour l'affcher dans un navgateur, allez dans le menu Fcher - Aperçu dans le navgateur. Chosssez alors le navgateur qu dot être utlsé pour tester votre page. Vous pouvez auss utlser le bouton Aperçu/Débogage dans le navgateur dans la barre d'outls Document. Edtons ENI - Toute reproducton nterdte

3 Les modes d'affchage classques L'affchage des pages 53 Quand vous créez une page, vous pouvez l'affcher de tros manères dfférentes dans Dreamweaver : en mode Créaton, Fractonner ou Code. Le mode Créaton Dans la barre d'outls Document, clquez, s beson est, sur le bouton Créaton. Votre page est affchée dans un mode «rapde», qu n'est pas forcément très fdèle à ce que vous pourrez vor dans un navgateur. Vous pouvez auss passer par le menu Affchage - Créaton. Le mode Fractonner Le mode Fractonner vous permet de dvser l'écran de concepton en deux partes : une parte pour l'affchage de la page en mode Créaton et l'autre pour l'affchage du Code. Dans la barre d'outls Document, clquez, s beson est, sur le bouton Fractonner. Vous pouvez auss passer par le menu Affchage - Code et créaton. Par défaut, l'écran est dvsé vertcalement. Edtons ENI - Toute reproducton nterdte

4 54 Dreamweaver CC L'affchage des pages Pour avor le mode Créaton sur la gauche de l'écran, dans le menu Affchage, chosssez Mode créaton à gauche. La commande passe ensute à Mode créaton en haut. Pour dvser l'écran horzontalement, dans le menu Affchage, chosssez Fractonner vertcalement, ce qu permet de désactver ce mode et de passer en horzontal. Pour passer rapdement de l'écran Créaton à l'écran Code, dans le menu Affchage, chosssez Basculer entre les affchages (C $ sous Wndows ou p $ sous Mac). S vous fates des modfcatons en mode Code, pour actualser l'affchage de l'écran Créaton, dans le menu Affchage, chosssez Actualser mode Créaton (5). Le mode Code Le mode Code vous permet d'accéder et de modfer le code de votre page web. Dans la barre d'outls Document, clquez, s beson est, sur le bouton Code. Vous pouvez alors utlser Dreamweaver sous sa forme «édteur de code». Edtons ENI - Toute reproducton nterdte

5 L'affchage des pages 55 Quand vous avez des pages de code très longues, vous pouvez affcher deux fenêtres du code : dans le menu Affchage, chosssez Fractonner le code. Pour dvser l'écran horzontalement, dans le menu Affchage, chosssez Fractonner vertcalement. Pour paramétrer les éléments affchés dans le mode Code, dans le menu Affchage, chosssez Optons d'affchage de code. L'affchage en drect des pages statques Dreamweaver vous permet de vsualser vos pages web comme dans un navgateur. En effet, le mode En drect de Dreamweaver utlse le moteur d'affchage des navgateurs Apple Safar (moteur de rendu nommé WebKt) et Google Chrome (fork nommé Blnk). Ce moteur est un moteur d'affchage standard qu utlse parfatement les standards du web. Dans votre page web en créaton, dans la barre d'outls Document, clquez sur le bouton En drect. Ou dans le menu Affchage, chosssez Affchage en drect (AY). Vous vsualsez votre page comme dans le navgateur Safar. Pour revenr en mode Créaton, dans la barre d'outls Document, clquez à nouveau sur le bouton En drect. L'affchage en drect des pages dynamques Les pages dynamques Les pages web actuelles utlsent beaucoup les technologes «dynamques» : PHP, Ajax... Cela veut dre que les pages sont construtes à partr d'autres fchers que les smples pages HTML : des pages PHP, des pages JavaScrpt... Edtons ENI - Toute reproducton nterdte

6 56 Dreamweaver CC L'affchage des pages En affchage «classque», en mode Créaton, Dreamweaver n'affche que le code de la page HTML, mas pas l'affchage généré par les fchers externes (PHP, JavaScrpt...). Avec le mode Affchage en drect, Dreamweaver vous permet de vsualser la page qu sera réellement vue par l'utlsateur dans un navgateur, avec tous les fchers externes qu ntervennent dans la constructon de cette page. Les fchers lés Dans cet exemple, je travalle une page utlsant des fchers JavaScrpt et CSS. Cette page permet l'affchage d'un daporama nteractf avec des fchers JavaScrpt. Dès que j'ouvre la page HTML, Dreamweaver ouvre auss tous les fchers lés, les fchers apparentés dans la termnologe Dreamweaver. Dans cet exemple, le fcher HTML est nommé coda-slder.html, les fchers lés sont jquery.js, coda-slder.js, coda-slder.css... Sur la drote de la barre de ttre du document, vous avez la possblté de fltrer l affchage des fchers lés. Clquez sur le bouton Fltrer les fchers assocés et chosssez.css et/ou.js. À cette étape, la page est totalement statque, nutlsable. Edtons ENI - Toute reproducton nterdte