Introduction à Dreamweaver 8 - Free

Introduction à Dreamweaver 8Ecole Club MigrosEcole-ClubAl CAlainCourt

Dreamweaver dans la chaîne deproduction Weby Edité par Adobe (en réalité créé par Macromedia,Macromedia rachetérécemment par Adobe)y Le logiciel de création Web le plus utilisé par lesprofessionnels du secteury Très bien intégré avec dd'autresautres outils de productiony FireWorks ( logiciel de retouche photographique, concurrentde Photoshop et particulièrement spécialisé dans ll'imagerieimagerieWeb)y Flash ((Format et technologieg d'imageg et d'animation vectorielle,qui est devenu aujourd'hui un standard du Web - utilisable surtoutes les plateformes à travers le plugin Flash Player, installésur lal quasi-totalitél é desd navigateurs ded lla planète.l è

Position et concurrencey Dreamweaver malgré son prix (entre 550 et 600 ) reste unexcellent choixy Golive (édité également par Adobe) reste un ousider malgréune excellente intégration avec Photoshop et Acrobat (formatPDF)y FrontPage (Microsoft) très présent en entreprise, très décriécar peu standard pour le code généré et la gestion de site. Aété récemment remplacé par une nouvelle gamme de produit( p(Expression))y Une multitude d'autres logiciels d'édition Web sontdisponibles,p, mais aucun n'atteint la simplicitépet l'éventail depossibilités qu'offre Dreamweaver.

Démarrer avec Dreamweaver

Ecran d'accueild accueil au lancement

Editeur de pageet gestionnaire de sitey Dreamweaver permet de créer des pages de différents types((html, asp,p pphp,p css, xml, xslt,etc ))y Mais également de gérer les sites,sites ce qui simplifie le travail deconceptiony Permet la mise à jjour automatiqueq du code lorsqu'uneqimageg estrenommée ou déplacéey Lors de la ppublication du site, le ggestionnaire identifie les ppagesgqui ont été modifiées et doivent être mises à jour

Les élémentsééd'interface

Utilisation de l'interfacey Les différents modes dd'affichageaffichage permettent de simplifier letravail :y Affichage WYSIWYG la majorité du tempsy Affichage fractionné ou code pour intervenir sur des élémentsde détail du code source,, ou ppour identifier et sélectionner pplusfacilement certains éléments de la page

Les modes d'affichage

Créationéd'une nouvelle pagey LorsquLorsqu'uneune nouvelle page est crééecréée, tout le code nécessaireest inséré automatiquement (il est un peu plus complexe queceluiceu que nousous avonsavo s vu dansa s l'introductiont o uct o HTML,, maisa s laastructure et sa logique interne reste la même).y Lorsque vous ajoutez du texte dans la page, celuicelui-cici estautomatiquement converti avec tout le code nécessaire

La palette des propriétés(son contenu change selon l'objet sélectionné)

Visualiser une page dans lenavigateurMenu fichierVous ppouvez aussiemployer la touche deraccourci F12Le navigateur par défaut peut être différent si plusieurs dd'entreentre eux sontinstallés, mais vous pouvez les configurer selon vos besoins en choisissantl'option "Modifier liste des navigateurs"

Exercice 1y Créez une nouvelle pagey Basculez en mode codepour repérer lescomposants HTML debasey Revenez en modecréation et modifiez lescaractéristiques de lappageg (titre(et couleur defond)

Travailler avec le gestionnairede sitesy Il est assez rare dd'utiliserutiliser Dreamweaver pour créer une seulepage (mais cela reste utile pour effectuer une modificationpo ctue e)ponctuelle)y Majoritairement,Majoritairement on commence par mettre en place lastructure du site (dossier) et on crée les pages ensuite.Ainsi on profite des avantages du gestionnaire de site.

Créeré un nouveau site

Etape 1 - Nom et dossier du site

Le site est défini dansDreamweaver

Etape 2 - Créeré les pages du siteMenu fichier ppuis Nouveau

Enregistrer les pagesMMenufichierfi hi puisi enregistrerisous

Exercice 2y Créez dans Dreamweaver un site composé de 3 pagesy index.html (titre: Accueil principal)y images.htmlimages html (titre: Galerie des photographies)y liens.html (titre: Nos références préférées sur la Toile)

Ouvrir un site existanty Au démarrage Dreamweaver va ouvrir le dernier site ouvert(ce qui est bien pratique )y Toutefois il arrive assez fréquemment que ll'onon conçoiveplusieurs sites simultanément ou que l'on ai besoin d'ouvrirun autre site enregistré sur le disque dur.y Dans ce cas, il suffit de dérouler le menu des sites dans lafenêtre fichiersSi le dossier du site a été renommé ou déplacé,DW vous demandera d'indiquer où se trouve le dossier contenantles fichiers

Fin de cette partieVous connaissez maintenant un peu mieux Dreamweavery Vous avez repéré les éléments fondamentaux de l'interface deDreamweavery Vous savez insérer une page, modifier ses caractéristiques debasey Vous savez mettre en place la structure de base d'un site Webnous allons donc pouvoir insérer dans les pages de cesite différents types de contenus.

Dreamweaver dans la chaîne de production Web yEdité par Adobe (en réalité créé par Macromedia, racheté récemment par Adobe) yLe logiciel de création Web le plus utilisé par les professionnels du secteur yTrès bien intégré avec dTrès bien intégré avec dautres outils de production'autres outils de production