Dreamweaver 2éme séance Murat Keles. Présentation I.CSS et Dreamweaver II.Les calques III.Les scénarios IV.Les comportements V.Les cadres VI.Mise en ligne.

Présentation au sujet: "Dreamweaver 2éme séance Murat Keles. Présentation I.CSS et Dreamweaver II.Les calques III.Les scénarios IV.Les comportements V.Les cadres VI.Mise en ligne."— Transcription de la présentation:

1 Dreamweaver 2éme séance Murat Keles

2 Présentation I.CSS et Dreamweaver II.Les calques III.Les scénarios IV.Les comportements V.Les cadres VI.Mise en ligne du site

3 I.CSS et Dreamweaver A quoi ça va me servir ? –A séparer le contenu d'une page (mission du HTML) de sa présentation (mission du css). externe interne Sélecteur de style Feuille de style Classe de style

4 Feuille de style Externe : -Les codes sont indépendants de tous pages web => fichier.css -Utilisable par toutes les pages de votre site. Interne : -code incorporé dans la page HTML. -Style utilisable que pour la page dans laquelle elle se trouve. Objectif principal : redéfinir les balises HTML (,, …)

5 Classe de style Externe : -Les codes sont indépendants de tous pages web => fichier.css -Utilisable par toutes les pages de votre site. Interne : -code incorporé dans la page HTML. -Style utilisable que pour la page dans laquelle elle se trouve. Donner un style défini à un peu n'importe quoi dans une page.

6 Sélecteur de style Définissable en interne ou externe Permet de définir le style général des liens sous leurs quatre parfums possibles : -a:link -a:visited -a:hover -a:active Mais aussi, donner un style spécifique aux calques… calques ???

7 II.Les calques bloc rectangulaire (contenant n'importe quoi) garde une position précise par rapport au début du document, prescrite au pixel près, et cela même si le visiteur redimensionne sa fenêtre ou s'il modifie la taille des caractères. refusés par le consortium W3C mais qui c’est imposée dans la pratique des éditeurs wyziwyg comme Dreamweaver. Qu’est ce que c’est ?

8 Propriétés des calques Position : pour définir le type de calque et le positionner z-index : pour décider du niveau du calque dans l'empilement Visibility : pour rendre le calque visible ou invisible

9 III.Scénarios A quoi ça sert ? -Permet de mettre facilement et rapidement de l'animation sur votre page. Comment ? -en déplaçant un calque sur un chemin grâce à ses propriétés : -de positions sur la page -de visibilités

10 IV.Comportements Permet de créer des actions au sein de la page. Les actions consistent en un code JavaScript et HTML Quelques comportements (ou encore évènements) permettant d’exécuter des actions : -onClick -onMouseOver -onLoad

11 V.Les Cadres Souvent utilisés pour la navigation. Un jeu de cadres inclut généralement : -un cadre contenant une barre de navigation -cadre destiné à afficher le contenu principal Mais aussi refusé par le consortium W3C… A quoi ça sert ?

12 Cadres : avantages / inconvénients Avantages : -moins de chargements -chaque cadre possède sa propre barre de défilement… -cache URL de chacune des pages contenues dans les cadres => sécurité Inconvénients : -alignement graphique des éléments de différents cadres n'est pas toujours précis -Le test de la navigation peut être long -les visiteurs risquent de ne pas pouvoir ajouter de signet à une page donnée

13 VI.Mise en ligne du site Avant tout : paramétrer Dreamweaver, une fois pour toute, par rapport à votre compte vega. 1)upload : copier votre site dans votre compte vega 2)download : copier le site depuis vega sur votre ordinateur (pour pouvoir l’éditer ensuite) 3)update : -MAJ fichiers sur vega grâce aux fichiers de votre ordinateur ou -MAJ fichiers de votre ordinateurs grâce aux fichiers de votre compte sur vega ! Archiver régulièrement vos travaux (.rar,.zip…) !