STUDIO MX 2004-A LA DCOUVERTE DE STUDIO MX - Développement Web MACROMEDIA - Notice d'utilisation et mode d'emploi gratuit
Retrouvez gratuitement la notice de l'appareil STUDIO MX 2004-A LA DCOUVERTE DE STUDIO MX MACROMEDIA au format PDF.
| Type de produit | Logiciel de développement web |
| Caractéristiques techniques principales | Ensemble d'outils pour la création de sites web dynamiques, incluant Dreamweaver, Flash, Fireworks, et ColdFusion |
| Compatibilités | Compatible avec Windows et Mac OS |
| Fonctions principales | Édition de code, création d'animations, design graphique, gestion de bases de données |
| Utilisation | Conçu pour les développeurs web et les designers souhaitant créer des applications interactives et des sites web |
| Maintenance et réparation | Pas de maintenance physique, mise à jour logicielle recommandée pour corriger les bugs et améliorer la sécurité |
| Sécurité | Recommandation d'utiliser des mises à jour régulières pour éviter les vulnérabilités |
| Informations générales | Version 2004, inclut des fonctionnalités avancées pour le développement web, nécessite une configuration système adéquate |
FOIRE AUX QUESTIONS - STUDIO MX 2004-A LA DCOUVERTE DE STUDIO MX MACROMEDIA
Questions des utilisateurs sur STUDIO MX 2004-A LA DCOUVERTE DE STUDIO MX MACROMEDIA
0 question sur cet appareil. Repondez a celles que vous connaissez ou posez la votre.
Poser une nouvelle question sur cet appareil
Téléchargez la notice de votre Développement Web au format PDF gratuitement ! Retrouvez votre notice STUDIO MX 2004-A LA DCOUVERTE DE STUDIO MX - MACROMEDIA et reprennez votre appareil électronique en main. Sur cette page sont publiés tous les documents nécessaires à l'utilisation de votre appareil STUDIO MX 2004-A LA DCOUVERTE DE STUDIO MX de la marque MACROMEDIA.
MODE D'EMPLOI STUDIO MX 2004-A LA DCOUVERTE DE STUDIO MX MACROMEDIA
Marques commerciales
Add Life to the Web, Afterburner, Aftershock, Andromedia, Allaire, Animation PowerPack, Aria, Attain, Authorware, Authorware Star, Backstage, Bright Tiger, Clustercats, ColdFusion, Contribute, Design In Motion, Director, Dream Templates, Dreamweaver, Drumbeat 2000, EDJE, EJIPT, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, Generator, HomeSite, JFusion, JRun, Kawa, Know Your Site, Knowledge Objects, Knowledge Stream, Knowledge Track, LikeMinds, Lingo, Live Effects, MacRecorder Logo and Design, Macromedia, Macromedia Action!, Macromedia Flash, Macromedia M Logo and Design, Macromedia Spectra, Macromedia xRes Logo and Design, MacroModel, Made with Macromedia, Made with Macromedia Logo and Design, MAGIC Logo and Design, Mediamaker, Movie Critic, Open Sesame!, Roundtrip, Roundtrip HTML, Shockwave, Sitespring, SoundEdit, Titlemaker, UltraDev, Web Design 101, what the web can be et Xtra sont des marques déposées ou des marques commerciales de Macromedia, Inc. susceptibles d'être déposées aux États-Unis ou dans d'autres juridictions, y compris à l'échelle internationale. Les autres noms de produits, logos, graphiques, mises en page, titres, mots ou phrases mentionnés dans cette publication peuvent être des marques, des marques de service ou des noms de marque appartenant à Macromedia, Inc. ou à d'autres entités et peuvent être déposés dans certains pays, états ou provinces.
Informations de tiers
Ce manuel contient des liens vers des sites Web tiers qui ne sont pas contrôlés par Macromedia et Macromedia ne peut en aucune cas être tenu responsable du contenu de ces sites. Si vous accédez à l'un de ces sites, vous le faites à vos propres risques. Macromedia mentionne ces liens pour faciliter leur travail et l'inclusion de ces liens n'implique pas que Macromedia approuve le contenu de ces sites tiers ou en accepte la responsabilité.
Technologie de compression et décompression audio discours utilisée sous licence de Nellymoser, Inc. (www.nellymoser.com).
Sorenson spark.
Technologie de compression et décompression vidéo Sorenson™ Spark™ utilisée sous licence de Sorenson Media, Inc.
Navigateur Opera © Copyright © 1995-2002 Opera Software ASA et ses fournisseurs. Tous droits réservés.
Dénégation de responsabilité d'apple
APPLE COMPUTER, INC. NE FOURNIT AUCUNE GARANTIE, EXPRESSE OU IMPLICITE, CONCERNANT LE LOGICIEL INCLUS, QUANT A SA QUALITE LOYALE ET MARCHANDE, OU SON ADAPTATION A UN OBJECTIFPARTICULIER. L'EXCLUSION DES GARANTIES IMPLICITES N'ETANT PAS AUTORISEE DANS CERTAINS ETATS, L'EXCLUSION CI-DESSUS PEUT DONC NE PAS S'APPLIQUER A VOTRE CAS. CETTE GARANTIE VOUS OFFRE DES DROITS JURIDIQUES SPECIFIQUES. VOUS POUVEZ DISPOSER DE CERTAINS AUTRES DROITS, QUI VARIENT SELON LES ETATS.
Copyright © 2003 Macromedia, Inc. Tous droits réservés. Ce manuel ne peut pas être copié, photocopié, reproduit, traduit ou converti sous forme électronique ou informatique, en partie ou en totalité, sans l'autorisation écrite préalable de Macromedia, Inc. Numéro de référence : ZWS70M100F
Remerciements
Gestion de projet : Sheila McGinn
Gestion de production : Patrice O'Neill
Première édition : septembre 2003
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
Chapitre 1: introduction 9
Apprentissage des fonctions de base de Studio 9
Présentation générale des outils Studio 11
Installation de Studio MX 2004 15
Activation et enregistrement du produit 18
Chapitre 2: nouveautés de studio MX 2004 19
Nouveautés de Dreamweaver MX 2004. 19
Nouveautés de Flash MX 2004 23
Nouveautés de Flash MX Professionnel 2004 25
Nouveautés de Fireworks MX 2004. 26
Nouveautés de FreeHand MX. 28
Chapitre 3: espace de travail de studio MX 2004 31
Premier contact avec l'espace de travail de Dreamweaver 31
Premier contact avec l'espace de travail de Flash 35
Description de l'espace de travail de Fireworks 42
Premier contact avec l'espace de travail de FreeHand 48
Chapitre 4: description des applications web 55
Fonctionnement d'une application Web 56
Création de pages dynamiques. 61
Choix d'une technologie de serveur 62
Terminologie du développement d'applications Web 63
CHAPITRE 5: Installation d'un serveur Web 67
Bien démarrer 68
Installation de Personal Web Server 68
Installation d'Internet Information Server 69
Test de PWS ou IIS. 69
Test du serveur Web Macintosh (développeurs PHP). 70
Fonctions élémentaires du serveur Web 70
CHAPITRE 6: Configuration d'un exemple de site ColdFusion. 73
Aide-mémoire pour la configuration à l'intention des développeurs ColdFusion.. 73
Configuration du système 74
Définition d'un site Dreamweaver 78
Connexion à l'exemple de base de données 82
PARTIE II : utilisation de macromedia studio
CHAPITRE 7: Processus de développement Web. 91
Planification du site Web 92
Définition de l'environnement de développement 96
Planification de la conception et de la mise en forme de la page 100
Création d'actifs de contenu 103
Création d'actifs d'application 106
Assemblage, test et déploiement 111
DIDACTICIEL 1: Didacticiel Dessin du plan de navigation sur le site dans FreeHand 117
Planification de la navigation sur le site 117
Personnalisation de FreeHand pour une sortie multimédia/Web 118
Création de rectangles pour le plan de navigation 120
Modification du texte du rectangle 124
Ajout de lignes connecteur au document 126
Exportation du plan au format SWF 129
DIDACTICIEL 2 : Création d'une mise en forme basée sur un tableau dans
Dreamweaver 131
Insertion de tableaux 131
Définition des propriétés d'un tableau. 133
Insertion d'un espace réservé pour l'image 136
Ajout de texte de l'espace réservé dans les cellules du tableau 136
Didacticiel 3: création d'une bannière dans fireworks 141
Création d'un document Fireworks. 142 Insertion d'une image 142 Ajout de texte à la bannière 144 Optimisation de la bannière 146 Exportation de la bannière dans Dreamweaver 147
Didacticiel 4: création d'une barre de navigation avec Fireworks.
Création d'un document Fireworks 150 Création d'un symbole de bouton 151 Création des états de bouton 154 Création de plusieurs occurrences d'un bouton 156 Modification du texte de l'occurrence du bouton 157 Affectation des URL et des noms aux boutons. 158 Optimisation de la barre de navigation 159 Définition des préférences HTML 160 Exportation du document au format HTML 161 Affichage des fichiers exportés dans le panneau Fichiers de Dreamweaver 162 Affichage du fichier HTML de Fireworks dans un navigateur 163
Didacticiel 5: création de médias enrichis avec Fireworks et Flash 165
A propos des animations Flash. 165 Examen des fichiers de téléchargement Fireworks 166 Création d'un document Flash 167 Importation et conversion du fichier Fireworks 168 Création d'un calque de texte et d'un symbole. 170 Création d'images-clés. 172 Définition de la transparence alpha 172 Création d'interpolations de mouvement. 174 Publication du fichier FLA final 175
Didacticiel 6: Assemblage et modification d'actifs studio. 177
Insertion de la barre de navigation Fireworks. 177 Modification de la bannière Fireworks. 179 Insertion de l'animation Flash 180 Lecture de l'animation Flash 182 Modification de l'animation Flash 182 Dernière étape de création de la page. 184
Didacticiel 7: création d'une fonction de recherche dans une base de données 189
À propos des pages de recherche/de résultats 189 Création de la page de recherche 190 Création de la page de résultats 195 Publication et test de vos pages 200
Familiarisez-vous avec la suite de produits Macromedia Studio MX 2004 pour apprendre tout ce que vous devez savoir avant de commencer à créer votre site Web.
Cette partie du manuel contient les sections suivantes :
Chapitre 1, Introduction, page 9
Chapitre 2, Nouveautés de Studio MX 2004, page 19
Chapitre 3, Espace de travail de Studio MX 2004, page 31
Chapitre 4, Description des applications Web, page 55
Chapitre 5, Installation d'un serveur Web, page 67
Chapitre 6, Configuration d'un exemple de site ColdFusion, page 73
Ce manuel vous présente Macromedia Studio MX 2004, un ensemble d'outils de développement Web intégrés comprenant Macromedia Dreamweaver MX 2004, Macromedia Flash MX 2004 (ou Macromedia Flash MX Professionnel 2004), Macromedia Fireworks MX 2004, Macromedia FreeHand MX, et Macromedia ColdFusion MX. Après une présentation générale des différents produits, ce manuel expose quelques-uns des concepts sur lesquels repose le développement d'applications Web, puis vous explique comment créer un site Internet dynamique simple, mais fonctionnel, au travers d'une série de didactériels.
Ce manuel s'adresse de manière générale aux utilisateurs de niveau débutant à intermédiaire, et en particulier à ceux qui ne connaissent pas encore tous les produits de la suite Studio MX 2004, voire aucun. Les utilisateurs plus confirmés pourront tirer parti de la lecture de ce manuel, par l'apprentissage de techniques plus efficaces et la découverte des nouvelles fonctions de chaque produit.
Remarque: Ce manuel ne constitue pas une référence complète décrivant toutes les fonctions des outils Studio MX 2004. Pour des informations plus approfondies sur l'un des outils, voir le système d'aide de chacun de ces produits. Pour accéder à l'aide en ligne d'un produit, ouvre le menu Aide du produit concerné et sélectionnez l'option Utilisation de Dreamweaver, Utilisation de Flash, Aide de Fireworks ou Utilisation de FreeHand. Le guide d'utilisation de ColdFusion est disponible à partir du menu Aide de Dreamweaver.
Apprentissage des fonctions de base de studio
Pour acquérir les bases de l'utilisation de Dreamweaver, Flash, Fireworks, FreeHand et ColdFusion, commencez par lire le présent manuel. Passez ensuite aux autres ressources disponibles: didacticiels, aides en ligne et assistance en ligne de Macromedia.
Utilisation de ce manuel
Le présent manuel est scindé en deux parties. La première partie (chapitres 1 à 6) propose une présentation générale et une explication des concepts permettant de bien démarrer avec Studio MX 2004, et compte un chapitre vous expliquant comment configurer votre système pour développer une application ColdFusion. La seconde partie compte un chapitre décrivant le processus de développement d'un site Web, ainsi que sept didacticiels vous guidant dans la création de tous les éléments qui composent un site Web dynamique simple et fonctionnel.
Vous pouvez lire les chapitres dans l'ordre ou bien prendre connaissance de la suite de cette introduction avant de passer au chapitre ou au didacticiel de votre choix. La liste suivante décrit le contenu de chaque chapitre :
- Le présent chapitre d'introduction décrit comment installer Studio MX 2004; les outils Studio vous y sont également rapidement présentés. Lisez ce chapitre en premier, puis étudiez celui ou ceux qui vous intéressent en priorité.
- Chapitre 2, Nouveautés de Studio MX 2004, page 19, présente les nouvelles fonctions mises à disposition dans les outils Studio MX 2004.
- Chapitre 3, Espace de travail de Studio MX 2004, page 31, présente les espaces de travail des applications Dreamweaver, Flash, Fireworks et FreeHand. Chacun de ces espaces de travail ayant évolué dans nombre de ses aspects, vous trouverez peut-être intéressant de lire ce chapitre même si vous connaissiez déjà les produits.
- Chapitre 4, Description des applications Web, page 55, fait le point sur le contexte conceptuel des applications Web et leur fonctionnement.
- Chapitre 5, Installation d'un serveur Web, page 67, explique aux utilisateurs Windows comment installer et utiliser un serveur Web Microsoft sur un ordinateur local. Il explique également aux utilisateurs Macintosh comment tester le serveur Web Apache déjà installé sur leurs systèmes.
- Chapitre 6, Configuration d'un exemple de site ColdFusion, page 73, vous guide pas à pas dans l'installation du serveur d'application ColdFusion MX (lequel comprend un serveur Web), la définition d'un site Dreamweaver et la création d'une connexion à la base de données. Vous devez avoir toutes les procédures décrites dans ce chapitre si vous souhaitez terminer l'ensemble des didactériels dans la seconde partie de ce guide.
- Chapitre 7, Processus de développement Web, page 91, propose un scenario idéal d'organisation du travail pour le développement d'un site dynamique.
- Les didacticiels suivant le chapitre 7 vous expliquent comment développer les éléments communs d'un site Web dynamique, dont des graphismes, du contenu Flash et une fonction de recherche ColdFusion.
Le chapitre 6 Configuration d'un exemple de site ColdFusion et les didacticiels utilisent l'exemple de contenu fourni avec Studio MX 2004. Si vous préférez créer votre premier site Studio avec vos propres contenus et mises en forme, vous pouvez le faire, mais les didacticiels sont plus faciles à suivre avec les contenus d'exemple fournis.
Autres ressources
Les outils de la suite Studio MX 2004 offrent des ressources variées pour vous aider à acquérir rapidement une belle connaissance des programmes et vous sentir à l'aise dans la création de vos propres sites. Vous pouvez également trouver une aide en ligne, un support technique et de la documentation explicative sur le site Web de Macromedia.
L'ensemble des didacticiels accompagnant chaque produit permet de compléter la formation initiale sur des sujets plus précis, par l'apport d'informations non traitées dans ce manuel.
Les manuels de démarrage permettent de découvrir les fonctions de base de chaque produit. Pour y accéder, ouvre le menu Aide de chaque produit.
L'aide en ligne du produit fournit des informations complètes permettant d'exploiter toutes les possibilités des outils Studio MX 2004. Pour accéder à l'aide en ligne d'un produit, ouvrez le menu Aide du produit concerné et sélectionnez l'option Utilisation de Dreamweaver, Aide de Fireworks, Utilisation de Fireworks ou Utilisation de FreeHand. Le guide d'utilisation de ColdFusion est disponible à partir du menu Aide de Dreamweaver.
Des versions PDF de l'ensemble de la documentation pour chaque produit, y compris les manuels de démarrage, d'utilisation et autres sont inclus sur le CD de Studio MX 2004. Certaines rubriques de référence générées dans les manuels d'utilisation ne sont pas reprises dans cette version PDF; pour tout complément d'information sur ces rubriques, consultez l'aide en ligne du produit concerné.
Des versions imprimées de la documentation pour Dreamweaver, Flash, Fireworks, FreeHand et ColdFusion sont également disponibles à la vente auprès de Macromedia. Pour vous les procurer, veillez visiter le site http://dynamic.macromedia.com/fr/bin/MM/store/FR/catalog_training.jsp.
Les manuels Macromedia Press constituent une grande variété de manuels qui contribuent à améliorer votre maîtrise des outils Studio et des autres produits Macromedia. Pour plus d'informations, visitez www. macromedia. com/go/st2004_help_mmp/.
Le support technique de Macromedia Studio vous apporte les réponses dont vous avez besoin, de jour comme de nuit, avec un support technique Studio de haute qualité fourni par des ingénieurs connaissant le produit. Pour plus d'informations, visitez www.macromedia.com/go/st2004_support_fr/.
La formation et certification Macromedia Studio vous aide à développer vos compétences avec Studio grâce à des essais pratiques et à des mises en situation. Vous avez le besoin entre une formation avec un professeur ou une formation en ligne. Vous pouvez même combiner les deux solutions de façon à créer une véritable formation personnalisée. Pour plus d'informations, visitez www. macromedia. com/go/studio_training_fr/.
Le centre des développeurs Macromedia Studio vous informe sur les dernières tendances et techniques de développement de Studio. Il fournit des didacticiels, des articles et des exemples d'application vous aidant à travailler de manière efficace. Pour plus d'informations, visitez www. macromedia. com/go/developer_studio_fr/.
Par ailleurs, vous pouvez trouver des mises à jour régulières d'astuces, de notes techniques, d'exemples, de didacticiels, ainsi que des informations diverses pour tous les produits Studio MX 2004 au centre de support Macromedia (www.macromedia.com/fr/support/).
Conventions typographiques
Ce manuel utilise les conventions typographiques suivantes :
- Les options de menu sont indiquées comme suit : intitulé du menu > intitulé de l'option de menu. Les options des sous-menus sont indiquées comme suit : intitulé du menu > intitulé du sous-menu > intitulé de l'option de menu.
- La police de code indique les intitulés des balises et attributs HTML, ainsi que le texte utilisé littéralement dans les exemples.
- La police de code en italique indique les éléments replacables (parfois appelés métasymboles) dans le code.
- Texte en gras indique le texte que vous devez saisir exactement à l'identique.
Présentation générale des outils studio
La suite Studio MX 2004 rassemble cinq produits Macromedia : Dreamweaver, Flash, Fireworks, FreeHand et ColdFusion. Chacun d'eux fait l'objet d'une rapide présentation dans cette section.
Dreamweaver MX 2004
Dreamweaver MX2004 est unéditeur HTML professionnel destiné à la conception, au codage et au développement de sites, de pages et d'applications Web. Quel que soit l'environnement de travail utilisé (codage manuel HTML ou environnement d'édition visuel), Dreamweaver propose des outils qui vous aidont à créé des applications Web.
Les fonctions d'édition visuelles de Dreamweaver vous permettent de créer rapidement des pages sans rédiger une seule ligne de code. Si vous préférez faire appel au codage manuel, Dreamweaver intègre également de nombreux outils et fonctions de codage. Avec Dreamweaver, vous pouvez créer des applications Web dynamiques reposant sur des bases de données utilisant les langages serveur ASP, ASP.NET, ColdFusion Markup Language (CFML), JSP et PHP.
Dreamweaver fournit également un support de pointe pour l'utilisation de feuille de style en cascade (CSS) avec les fonctions de conception et de codage manuel, vous offrant une plus grande flexibilité, ainsi qu'un moyen de contrôle plus efficace de l'apparence de votre page Web. Que vous soyez un expert commercant à améliorer vos procédures de création actuelles ou un débutant souhaitant créé des feuilles de style en cascade dans vos conceptions, Dreamwe weaver répondra à vos besoin.
Pour plus d'informations sur Dreamweaver et ses fonctions, voir l'aide Utilisation de Dreamweaver.
Pour découvrir les nouvelles de Dreamweaver MX 2004, voir Chapitre 2, Nouveautés de Studio MX 2004, page 19.
Flash MX 2004
Flash MX 2004 vous apporte tout ce dont vous avez besoin pour créer et déployer des applications Internet puissantes, au contenu d'une grande richesse. Que vous souhaitiez créer des graphiques animés ou des applications de données, Flash possède tous les outils nécessaires pour générer de superbes résultats et vous proposer les activités expériences utilisateur sur de multiples plates-formes et périphériques.
Les éléments d'interface prédéfinis et les modèles permettent à la fois aux utilisateurs confirmés comme aux débutants de mettre en place des systèmes interactifs complexes rapidement et en toute facilité en utilisant le glisser-déposer. Concepteurs et développeurs peuvent élaborer très rapidement des interfaces utilisateurs grâce au haut niveau de contrôle et de fonctionnalité qu'offre Flash Player. Grâce à un éditeur ActionScript évolué, un puissant débogueur et une gestion optimisée des données en XML, ils peuvent par ailleurs s'appuyer sur leurs connaissances existantes pour produire des applications Web en utilisant le module Flash comme support de présentation.
Pour plus d'informations sur Flash et ses fonctions, voir l'aide Utilisation de Flash.
Pour découvrir les nouvelles de Flash MX 2004, voir Chapitre 2, Nouveautés de Studio MX 2004, page 19.
Flash MX professionnel 2004
Si vous avez acheté un exemplaire de Macromedia Studio MX 2004 avec Flash Professionnel, votre version inclut l'environnement de développement Flash haut de gamme pour la création d'applications de données, de présentations interactives et d'expériences vidéo de haute qualité. Avec toutes les fonctions de Macromedia Flash MX 2004 et bien davantage, Macromedia Flash MX Professionnel 2004 est la version de Macromedia Flash la plus complète. Les développeurs peuvent créer rapidement des applications de données efficaces avec un développement basé sur les formulaires, une liaison de données puissante et une intégration Microsoft Visual Source Safe. Les professionnels de l'audiovisuel peuvent ajouter de l'interactivité et des interfaces personnalisées aux vidéos de haute qualité et présenter le client vidéo le plus omniprésent dans le monde, Macromedia Flash Player. Vous pouvez aussi déployer du contenu et des applications sur des appareils et des téléphones portables pour atteindre l'audience la plus large à l'aide d'émulateurs, de modèles prédéfinis et d'échantillons.
De plus, Flash Professionnel vous permet d'ajouter des fonctions spécialisées avec des extensions tierces s'intégrant directement à l'interface de l'application et au processus de création. Vous pouvez ajouter des animations 3D vectorielles, des effets raster, de l'animation de texte automatisée, des bitmaps haute résolution interactifs, des graphiques à présentation dynamique et de nombreuses autres fonctions.
Pour plus d'informations sur Flash Professionnel et ses fonctions, voir l'aide Utilisation de Flash.
Pour découvrir les nouvelles fonctionnalités de Flash MX 2004 Professionnel, voir Chapitre 2, Nouveautés de Studio MX 2004, page 19.
Fireworks MX 2004 offre la solution de facilité pour créer, optimiser et exporter des graphismes interactifs depuis un environnement unique orienté vers le Web. L'environnement rationalisé de cet outil permet de tout créer, depuis le simple bouton graphique jusqu'au effet de survol ou au menu contextuel le plus sophistiqué. Avec Fireworks MX 2004, vous pouvez créer, modifier et animer des graphismes Web, ajouter de l'interactivité avancée et optimiser vos images. Vous avez également la possibilité d'automatiser votre travail pour faire face aux exigences de longues modifications et mises à jour.
De puissants outils de création, la prise en charge des principaux formats de fichiers et normes HTML, l'intégration aux éditeurs HTML les plus courants sont autant d'atouts qui permettent aux concepteurs d'exploiter aisément Fireworks dans n'importe quel environnement de travail. L'espace de travail unique, orienté vers le Web, offre des outils robustes d'édition bitmap, un contrôle précis du texte et une grande liberté de création. La prise en charge étendue des différents formats de fichier, des normes émergentes, telles que l'XHTML, et le respect des dispositions de la législation américaine (Section 508) garantissant la pérennité de vos créations face aux exigences actuelles et à partir.
Pour plus d'informations sur Fireworks et ses fonctions, voir l'aide de Fireworks.
Pour découvrir les nouvelles de Fireworks MX 2004, voir Chapitre 2, Nouveautés de Studio MX 2004, page 19.
FreeHand MX est une application de dessin vectorielle. Avec FreeHand, vous pouvez créer des graphismes vectoriels redimensionnables et imprimables dans toute résolution, sans perte de détails ou de lisibilité.
Vous pouvez utiliser FreeHand pour créer, imprimer et mettre en ligne des objets d'illustration graphique, tels que des logos et des bannières publicitaires. FreeHand vous permet aussi de transformer vos dessins en animations Flash.
Son interface utilisateur intègre un espace de travail et un panneau d'outils cohérents avec ceux des autres applications Studio MX 2004, afin de vous offrir une solution pour le Web et l'impression véritablement intégrée.
Pour plus d'informations sur FreeHand et ses fonctions, voir l'aide Utilisation de FreeHand.
Pour découvrir les nouveaux de FreeHand MX, voir Chapitre 2, Nouveautés de Studio MX 2004, page 19.
ColdFusion MX est un environnement rapide de création de scripts serveur. Associant une grande facilité de création de scripts, une facilité de connectivité aux données d'entreprise et de puissantes fonctions intégrées de recherche et de présentation en tableaux, ColdFusion MX permet aux développements de construire et déployer facilement des sites Web dynamiques, des systèmes de publication de contenu, des applications en libre service, des sites commerciaux, etc.
Particulièrement simple, l'environnement ColdFusion MX prend en charge les systèmes d'exploitation Windows, Linux et UNIX, s'intègre aux standards Java et .NET et offre une simplicité d'utilisation sans égale pour le XML et les services Web. ColdFusion apporte une connectivité de haute performance avec les clients Flash et la prise en charge native d'ActionScript côté serveur. Exploitable comme serveur autonome ou en déploiement sur serveurs d'applications d'entreprise (IBM WebSphere par exemple), ColdFusion MX permet à l'équipe de développement d'obtenir plus rapidement des applications ayant un meilleur rapport utilisateur.
Pour plus d'informations sur ColdFusion, voir l'aide Utilisation de ColdFusion (disponible à partir du menu Aide de Dreamweaver).
Installation de studio MX 2004
Cette section décrit la configuration système requise minimale et les procédures d'installation pour Studio MX 2004. Pour obtenir une liste complète de la configuration système requise du produit et des recommandations, y compris la configuration système requise pour ColdFusion MX, veuillez consulter le site www.macromedia.com/go/sysreqs/.
Configuration requise
Voudez-vous équiper du matériel et des logiciels suivants pour exécuter les outils StudioMX2004:
Configuration système requise minimale sous microsoft windows
- Processeur Intel Pentium III 600 MHz ou équivalent
- Windows 98 Deuxième Edition, Windows 2000 ou Windows XP 256 Mo de RAM (512 Mo recommends)
- 800 Mo d'espace disque disponible
Configuration système requise minimale sur macintosh
- Processeur PowerPC G3 500 MHz Mac OS 10.2.6 256 Mo de RAM (512 Mo recommandés)
- 500 Mo d'espace disque disponible
Avant toute utilisation, ce produit doit être activé via l'Internet ou par téléphone. Les utilisateurs de Windows 98 Deuxième Edition doivent disposer de Microsoft Internet Explorer 5.1 ou une version ultérieure pour procéder à l'activation sur Internet.
Pour plus de détails, voir Activation et enregistrement du produit, page 18.
Installation de studio MX 2004
La suite Studio MX 2004 est très facile à installer, que ce soit sur un système Windows ou Macintosh. Macromedia préconise l'installation en une seule opération de la suite complète ; vous pouvez cependant installer individuellement chaque application si vous le souhaitez.
La version Developer Edition de ColdFusion MX pour Windows s'installe séparément. Pour plus de détails, voir Installation de ColdFusion MX, page 74.
Installation de studio MX 2004 sous windows
Suivez la procédure décrite ci-après pour installer Studio MX 2004 sous Windows.
Pour installer studio MX 2004 sous windows :
1. Insérez le CD de Studio MX 2004 dans le lecteur de CD-ROM de votre ordinateur pour afficher l'écran d'installation de Studio MX 2004.
Remarque : Si cet écran n'apparaît pas automatiquement, ou si vous effectuez l'installation depuis un lecteur réseau, ouvrez l'Explorateur de Windows pour rechercher le programme Installer.exe Studio MX 2004 dans le réseau Accessibilité, puis double-cliquez sur le programme et suivez les instructions d'installation.
2. Procédez de l'une des manières suivantes:
- Sélectionnez l'option d'installation de Macromedia Studio MX 2004 proposée dans l'écran d'installation. (Il doit s'agir de la valeur par défaut.) Macromedia recommande la sélection de cette option.
- Si vous préférez n'installer qu'un seul programme, sélectionnez-le dans l'écran. Répétez la procédure pour installer séparément les autres produits.
Remarque: Avant d'installer ColdFusion MX, voir Installation de ColdFusion MX, page 74.
3. Cliquez sur Installation 4. Suivez les instructions d'installation.
Si vous avez sélectionné l'option d'installation de Macromedia Studio MX 2004, le fichier Lisezmoi de Macromedia Studio MX 2004 s'ouvre automatiquement. Si vous avez installé un seul produit, le fichier d'informations s'y rapportant s'ouvre.
La fenêtre principale d'installation reste ouverte tant que vous n'avez pas cliqué sur le bouton Fermer.
Les applications Studio MX 2004 installées sont à présent disponibles dans le menu Démarrer de Windows sous Programmes > Macromedia.
Pour explorer la documentation supplémentaire fournie avec Studio MX 2004, sélectionnez l'option d'exploration du contenu du CD sur l'écran d'installation.
Pour déinstaller les programmes :
- Sélectionnez Démarrer > Paramètres > Panneau de configuration > Ajout/Suppression de programmes, puis sélectionnez l'application que vous souhaitez désinstaller.
Installation de studio MX 2004 sur macintosh
Suivez la procédure décrite ci-après pour installer Studio MX 2004 sur Macintosh.
Pour installer studio MX 2004 sur macintosh :
1 Insérez le CD de Macromedia Studio MX 2004 dans le lecteur de CD-ROM de votre ordinateur, pour afficher l'écran d'installation de Macromedia Studio MX 2004.
Si cet écran ne s'ouvre pas automatiquement, double-cliquez sur l'icône d'installation de Studio MX 2004 du CD-ROM.
2. Procédez de l'une des manières suivantes:
- Sélectionnez l'option d'installation de Macromedia Studio MX 2004 proposée dans l'écran d'installation. (Il doit s'agir de la valeur par défaut.) Macromedia recommande la sélection de cette option.
- Si vous préférez n'installer qu'un seul programme, sélectionnez-le dans l'écran. Répétez la procédure pour installer séparément les autres produits.
Cliquez sur Installation. Suivez les instructions d'installation.
Remarque : Si on vous demande une phrase secrète, entrez le mot de passe de connexion de l'administrateur système et cliquez sur OK.
Si vous avez sélectionné l'option d'installation de Macromedia Studio MX 2004, le fichier Lisezmoi de Macromedia Studio MX 2004 s'ouvre automatiquement. Si vous avez installé un seul produit, le fichier d'informations s'y rapportant s'ouvre.
La fenêtre principale d'installation reste ouverte tant que vous n'avez pas cliqué sur le bouton Fermer.
Les applications Studio MX 2004 installées sont à présent disponibles dans le dossier Applications.
Pour explorer la documentation supplémentaire fournie avec Studio MX 2004, sélectionnez l'option d'exploration du contenu du CD sur l'écran d'installation.
Pour déinstaller les programmes :
- Glissez-déposez le dossier du produit à désinstaller depuis le dossier Applications dans la corbeille.
Activation et enregistrement du produit
Si vous disposez d'une licence pour utiliser unique, vous devez activer votre licence pour les produits Macromedia sous trente jours après installation du programme. Cette activation peut être effectuée rapidement et en toute simplicité via Internet ou par téléphone et ne prend que quelques minutes. Vous ne devez fournir aucune information personnelle, uniquement le numéro de série de votre produit.
Remarque: Les utilisateurs de Windows 98 Deuxième Edition doivent disposer de Microsoft Internet Explorer 5.1 ou une version ultérieure pour procéder à l'activation sur Internet.
Pour activer un produit :
1 Double-cliquez sur l'icône exécutable de Dreamweaver, Flash, Fireworks ou FreeHand pour démarrer l'un des produits.
2 Cliquez sur Continuer pour passer à l'écran suivant.
3 Entrez votre numéro de série dans la fenêtre Activation des produits Macromedia et cliquez sur Continuer.
Une fois activé, votre produit est prêt à être utilisé. Lorsque vous activez un produit de la suite Studio MX 2004, tous les autres le sont également.
Pour plus d'informations sur l'activation du produit, connectez-vous au site www.macromedia.com/go/activation_fr.
Il est judicieux d'enregistrer votre copie des produits Studio MX 2004 par voie électronique ou par courrier. L'enregistrement vous permet de bénéficier du support technique de Macromedia.
Lorsque vous vous enregistrez, vous pouvez demander à recevoir des informations de dernière minute concernant les mises à jour et les nouveaux produits Macromedia. Vous pouvez également demander à être averti par courriel des dernières mises à jour disponibles pour les produits et à être informé des nouvelles informations placées sur le site www.macromedia.com/fr/.
Pour enregistrer un produit :
- Dans l'un des produits de la suite Studio MX 2004, ouvre le menu Aide et sélectionnez au besoin l'option d'enregistrement en ligne ou par courrier, avec impression d'un formulaire. Lorsque vous enregistrerez un produit de la suite Studio MX 2004, tous les autres le sont également.
Nouveautés de studio MX 2004
Que vous soyez totalement débutant avec les produits Macromedia Studio MX 2004 ou déjà expérimenté sous Dreamweaver, Flash, Fireworks ou FreeHand, vous pouvez tirer parti des nombreuses nouvelles fonctionnalités qui vous sont proposées dans les outils Macromedia Studio MX 2004. Ce chapitre répertorie toutes les nouvelles fonctions, par produit et comme suit :
Nouveautés de Dreamweaver MX 2004, page 19
Nouveautés de Flash MX 2004, page 23
Nouveautés de Flash MX Professionnel 2004, page 25
Nouveautés de Fireworks MX 2004, page 26
Nouveautés de FreeHand MX, page 28
Nouveautés de dreamweaver MX 2004
Sous sa nouvelle interface rationalisée, Dreamweaver MX 2004 cache une performance produit accrue. Il propose également de nombreuses nouvelles fonctions qui en améliorent la convivialité et vous aident à créer des pages, que vous travailliez dans les environnements de création ou de codage.
Simplification du produit et de l'interface de développement
L'interface de Dreamweaver est plus intuitive pour vous aider à améliorer votre productivité et la qualité de votre travail.
Amélioration de la barre Insérer : grâce à sa présentation plus simple, la barre Insérer prend moins de place dans l'environnement de travail. Une nouvelle catégorie de favoris vous permet en outre de la personnaliser en regroupant les objets que vous utilisez le plus souvent. Pour plus d'informations, voir Barre Insérer dans l'aide Utilisation de Dreamweaver.
Commandes Copier/Coller pour Microsoft Word et Microsoft Excel : ces commandes vous permettent de copier et de coller un document Microsoft Word ou Excel directement dans Dreamweaver. Lorsque vous collez un document Word ou Excel, Dreamweaver en conserve la mise en forme et génère du code HTML de bonne qualité. Pour plus d'informations, voir Copie et collage de texte à partir de documents MS Office dans l'aide Utilisation de Dreamweaver.
Affichage visuel des modifications de tableau : cette fonction vous permet de voir l'impact des opérations de redimensionnement de colonnes sur vos tableaux. Elle simplifie également la sélection des éléments dans les tableaux. Pour plus d'informations sur le redimensionnement, voir Redimensionnement des tableaux, des colonnes et des lignes dans l'aide Utilisation de Dreamweaver. Pour plus d'informations sur l'utilisation du mode Tableaux développés pour la sélection des éléments, voir Utilisation du mode Tableaux développés pour une modification de tableau plus simple dans l'aide Utilisation de Dreamweaver.
Modification de l'interface utilisateur : l'interface utilisateur a été repensée pour optimiser l'espace de travail utilisable et afficher le contexte et les éléments actifs de manière plus claire. Désormais, l'interface est plus logique et intuitive. Pour plus d'informations sur l'espace de travail de Dreamwe[...] voir A propos de l'espace de travail de Dreamweaver dans l'aide Utilisation de Dreamweaver.
Page de démarrage: cette page vous permet d'accéder rapidement aux derniers fichiers utilisés, de créer de nouveaux fichiers et d'accéder aux didactériels de Dreamweaver. Elle s'affiche lorsque vous démarrez Dreamweaver ou lorsque aucun document n'est ouvert. Pour plus d'informations sur l'affichage ou le masquage de la page de démarrage, voir Affichage et masquage de la page de démarrage dans l'aide Utilisation de Dreamweaver.
Bureau enregistré : cette option vous permet d'indiquer à Dreamweaver de rouvrir les documents sur lesquels vous travailliez lorsque vous redémarrez Dreamweaver. Pour plus d'informations sur la configuration de cette option, voir Définition des préférences générales de Dreamweaver dans l'aide Utilisation de Dreamweaver.
Prise en charge intégrale d'Unicode : sous Windows, Dreamweaver prend en charge tous les codages de texte pris en charge par Internet Explorer. Dans Dreamweaver, vous pouvez vous servir de la quasi-totalité des polices de caractères installées sur votre système en ayant la certitude que Dreamweaver en assurera correctement le rendu et l'enregistrement. Pour plus d'informations sur la définition des codages de police, voir Définition des préférences de police pour l'affichage Dreamweaver dans l'aide Utilisation de Dreamweaver.
Secure FTP : cette fonction vous permet de crypter intégralement tous les transferts de fichiers et d'empêcher les utilisateurs non autorisés d'accéder à vos données, fichiers, noms d'utilisateur et mots de passe. Pour plus d'informations sur la configuration d'une connexion à distance à l'aide du protocole FTP, voir Configuration d'un dossier distant dans l'aide Utilisation de Dreamweaver.
Actualisation de la mise en page et de l'environnement de création
Dreamweaver s'enrichit des nouvelles fonctions CSS présentées ci-dessous, qui vous permettent de prendre vos projets dynamiques et interactifs de manière plus sophistiquée. Il permet également d'afficher immédiatement les modifications apportées pour améliorer l'édition visuelle.
Validation dynamique entre navigateurs : cette fonction permet de vérifier automatiquement la compatibilité du document ouvert avec différents navigateurs lors de chaque enregistrement. Spécifiez les navigateurs à vérifier et Dreamweaver s'assure que les pages ne contiennent pas de balises ou d'éléments CSS non pris en charge par ces navigateurs. Pour plus d'informations, voir Vérification de la compatibilité du navigateur dans l'aide Utilisation de Dreamweaver.
CSS pertinents : cet onglet affiche les règles CSS appliquées à la sélection en cours en mode Code ou Création. Cliquez sur une règle pour connaître les attributs qu'elle gère (style de bordure, marge, marge intérieure, taille de texte, etc.). Les attributs ignorés sont mis en évidence. Des modifications rapides peuvent être apportées directement et s'affichent instantanément en mode Création. Pour plus d'informations, voir Onglet Propriétés CSS dans l'aide Utilisation de Dreamweaver.
Visualisation de mise en forme CSS : la mise en forme de pages à l'aide de feuilles de style en cascade (CSS) est désormais beaucoup plus simple. Vous pouvez facilement sélectionner des balises div et d'autres blocs de contenu en mode Création, puis en modifier les propriétés sous l'onglet Propriétés CSS. Pour plus d'informations, voir Mise en forme des pages avec les styles CSS dans l'aide Utilisation de Dreamweaver.
Amélioration du rendu CSS : Dreamweaver peut afficher les mises en forme complexes reposant sur les styles CSS avec plus de précision. L'amélioration du rendu vous permet de réaliser des mises en forme plus sophistiquées et d'effectuer des manipulations visuelles poussées à l'aide des outils de création de Dreamweaver.
Amélioration du panneau Styles CSS : le panneau propose désormais davantage d'options de modification des styles dans le document. A créé, vous pouvez également appliquer directement des styles depuis l'inspecteur des propriétés de texte. Pour plus d'informations, voir Utilisation des feuilles de style en cascade dans l'aide Utilisation de Dreamweaver.
Inspecteur des propriétés de texte reposant sur des feuilles de style en cascade (CSS) : cet inspecteur dresse la liste de tous les styles disponibles applicables au texte et comprend une fonction d'aperçu permettant de connaître l'aspect du texte après application du style. Pour plus d'informations, voir Inspecteur des propriétés et formatage de texte dans l'aide Utilisation de Dreamweaver.
Propriétés de page reposant sur des feuilles de style en cascade (CSS) : ces propriétés vous offrent un meilleur contrôle des propriétés de page (affichage des en-têtes et des liens, par exemple) à l'aide d'éléments de codage CSS récents. Pour plus d'informations, voir A propos de la définition des propriétés de page dans l'aide Utilisation de Dreamweaver.
Barre d'outils de retouche d'image intégrée: cette fonction vous permet d'effectuer des retouches d'image simples dans Dreamweaver à l'aide de la technologie Macromedia Fireworks. Vous avez la possibilité de recadrer, de redimensionner ou encore de rééchantillonner des images sans quitter Dreamweaver. Pour plus d'informations, voir Modification d'images dans Dreamweaver dans l'aide Utilisation de Dreamweaver.
Environnement de codage puissant et ouvert
Dreamweaver offre aux rédacteurs de code les nouvelles fonctions représentées ci-dessous, qui concernent notamment le mode Création et la possibilité de modifier des fichiers sans créer de site Dreamweaver. Dreamweaver prend également en charge les technologies de serveur actuelles.
Amélioration de l'inspecteur de balises : cet inspecteur affiche la liste des propriétés disponibles applicables à la sélection en cours et vous permet d'effectuer des modifications rapides et complètes. Pour plus d'informations, voir Modification d'attributs dans l'inspecteur de balises dans l'aide Utilisation de Dreamweaver.
Modification de fichiers sans site : cette fonction vous permet de travailler directement sur un serveur FTP ou RDS sans créer de site Dreamweaver. Pour plus d'informations sur la configuration de Dreamweaver pour travailler sur un serveur, voir Configuration de Dreamweaver pour fonctionner sans avoir à définir de site dans l'aide Utilisation de Dreamweaver. Pour plus d'informations sur la configuration d'un site Dreamwe weaver, voir Configuration d'un nouveau site Dreamweaver dans l'aide Utilisation de Dreamweaver.
Comportements de serveur PHP : ces comportements vous permettent de créer un ensemble de pages Principale-Détails et des pages d'authentification des utilisateurs. Pour plus d'informations, voir Création d'un ensemble de pages Principale-Détails (PHP) et Création de pages limitant l'accès à votre site (PHP) dans l'aide Utilisation de Dreamweaver.
Amélioration de la prise en charge des contrôles de formulaire ASP. NET : de nouvelles méthodes plus perfectionnées (notamment de nouveaux inspecteurs des propriétés) vous sont proposées pour créer et modifier des formulaires Web ASP. NET en mode Création. Pour plus d'informations, voir Création rapide d'applications ASP et JSP dans l'aide Utilisation de Dreamweaver.
Menu contextuel en mode Code : ce menu vous permet de modifier rapidement la mise en forme du code sélectionné. Pour plus d'informations, voir Modification rapide d'une sélection de code dans l'aide Utilisation de Dreamweaver.
Nouveautés de flash MX 2004
Les nouvelles fonctions de Flash MX 2004 améliorent la Productivité, élargissant l'éventail des médias enrichis pris en charge et rationalisant la publication.
Productivité
Flash MX 2004 inclut de nombreuses fonctions visant à simplifier des tâches autrement complexes et donc à améliorer la productivité :
Effets de scénario Vous pouvez appliquer des effets de scénario à un objet de la scène pour ajouter rapidement des transitions et des animations, telles que des entrées en fondu, des vols en fondu, des affichages flous et des tornades. Pour plus d'informations, voir Utilisation des effets scénario dans l'aide Utilisation de Flash.
Comportements Les comportements permettent d'ajouter de l'interactivité au contenu Flash sans avoir à rédiger une seule ligne de code. Vous pouvez par exemple utiliser des comportements pour créer un lien vers un site Web, charger des sons et des graphiques, contrôler la lecture de vidéos intégrées, déclencher des sources de données. Pour plus d'informations, voir Contrôle d'occurrences à l'aide de comportements dans l'aide Utilisation de Flash.
Support pour l'accessibilité dans l'environnement auteur Les fonctions d'accessibilité dans l'environnement auteur de Flash offrent des raccourcis clavier destinés à faciliter la navigation et l'utilisation des commandes d'interface. Vous pouvez ainsi travailler avec ces éléments d'interface sans avoir à utiliser la souris. Pour plus d'informations, voir Accessibilité dans l'environnement auteur Flash dans l'aide Utilisation de Flash.
Modèles mis à jour Flash inclut des modèles mis à jour permettant de créer des présentations, des applications de formation en ligne, des publicités, des applications pour périhériques mobiles et d'autres types de documents Flash couramment utilisés. Pour plus d'informations, voir Utilisation des modèles dans l'aide Utilisation de Flash.
Système d'aide intégré Le nouveau panneau Aide offre des références contextuelles, des références ActionScript et des leçons dans l'environnement auteur de Flash. Pour plus d'informations, voir Utilisation du panneau Aide dans l'aide Utilisation de Flash.
Correcteur orthographique Le correcteur orthographique recherche les fautes d'orthographe dans votre texte. Pour plus d'informations, voir Verification de l'orthographé dans l'aide Utilisation de Flash.
Onglets de documents Les onglets des documents ouverts s'affichent en bas de l'espace de travail pour que vous puissiez rapidement localiser les documents ouverts et passer facilement de l'un à l'autre. Pour plus d'informations, voir Utilisation des onglets dans des documents multiples (Windows uniquement) dans l'aide Utilisation de Flash.
Page de démarrage Les tâches les plus couramment utilisées sont à votre portée sur la page de démarrage. Pour plus d'informations, voir Utilisation de la page de démarrage dans le guide Bien démarrer avec Flash (disponible dans l'aide de Flash).
Prise en charge des médias enrichis
De nouvelles fonctions de support des médias enrichis améliorent la qualité de vos présentations.
Importation haute-fidélité L'importation haute-fidélité vous permet d'importer des fichiers Adobe PDF et Adobe Illustrator 10 et de préserver une représentation vectorielle précise de vos fichiers source. Pour plus d'informations, voir Importation de fichiers Adobe Illustrator, EPS ou PDF dans l'aide Utilisation de Flash.
Assistant d'importation vidéo L'assistant d'importation vidéo simplifie le codage vidéo et offre des codages préréglés et des modifications de clip. Pour plus d'informations, voir A propos de l'assistant d'importation vidéo dans l'aide Utilisation de Flash.
Rendu des petites polices Les petites polices ont un rendu plus net. Pour plus d'informations, voir Création de texte dans l'aide Utilisation de Flash.
Publication
De nouvelles fonctions de publication facilitent la détection des versions de Flash Player, améliorent l'accessibilité et simplifient la localisation.
Détexion de Flash Player Vous pouvez désormais publier les fichiers SWF avec des fichiers associés qui déectent si la version spécifiée de Flash Player est installée sur l'ordinateur de l'utilisateur. Vous avez la possibilité de configurer les fichiers publiés afin que l'utilisateur soit dirigé vers des fichiers secondaires s'il ne dispose pas de cette version de Flash Player. Pour plus d'informations, voir Configuration des paramètres de publication pour la détexion de Flash Player dans l'aide Utilisation de Flash.
Profil de publication Vous pouvez créer des profils afin d'enregistrer les paramètres de publication, puis les exporter pour les utiliser sur tous vos projets, pour une plus grande cohérence. Pour plus d'informations, voir Création d'un profil de publication dans l'aide Utilisation de Flash.
Accessibilité et composants Les nouvelles fonctions d'accessibilité et une nouvelle génération de composants vous offrent des fonctions d'organisation des tabulations et de gestion du focus pour les tabulations, ainsi qu'un support renforcé pour les lecteurs d'écran tiers et les programmes codés.
Globalisation et Unicode Une meilleure prise en charge de la globalisation et d'Unicode permettent une programmation multilingue, utilisant tous les produits de caractères. Pour plus d'informations, voir Création de texte multilingue dans l'aide Utilisation de Flash.
Sécurité La version 7 de Flash Player est dotée d'un modèle de sécurité plus strict que les versions antérieures. Dans le nouveau système de filtrage de Domaine, le domaine de données auquel vous VOULEZ accéder doit correspondre exactement au domaine du fournisseur de données pour que les domaines communiquent. La restriction HTTPS/HTTP spécifique qu'un fichier SWF utilisant des protocôles non sécurisés (non HTTPS) ne peut pas accéder au contenu chargé à l'aide d'un protocole sécurisé (HTTPS), même si les deux fichiers résident dans le même domaine. Pour plus d'informations, voir Fonctions de sécurité de Flash Player dans le Guide de référence ActionScript de l'aide.
Autres améliorations
Les performances de Flash Player ont été considérablement améliorées et ActionScript a été perfectionné pour respecter les spécifications du langage script ECMA. Par ailleurs, Flash garde désormais la trace des interactions afin qu'elles puissent être converties en commandes réutilisables.
Les performances d'exécution de Flash Player ont été multipliées par 2 et jusqu'à 5 pour la vidéo, la programmation et le rendu général de l'affichage.
ActionScript 2 ActionScript 2 est un langage orienté objet qui suit la Specification du langage script ECMA et supporte l'héritage, le typage fort et le modèle d'événement. Pour plus d'informations, voir Conformité avec le standard ECMA-262, quatrième édition dans le Guide de référence ActionScript de l'aide.
Panneau Historique Le panneau Historique assure le suivi de toutes les interactions pour que vous puissiez les convertir en commandes réutilisables. Pour plus d'informations, voir Utilisation du panneau Historique dans l'aide Utilisation de Flash.
Nouveautés de flash MX professionnel 2004
Flash MX Professionnel 2004 offre toutes les fonctions disponibles dans Flash MX 2004, plus un éventail de fonctions inédites qui vous permettront d'améliorer le développement et la conception de vos applications. Ces fonctions incluent l'environnement de développement visuel sur écran et des outils de gestion interactive des données, vous permettant de renforcer la productivité de votre équipe.
Environnement de développement visuel sur écran
Un environnement visuel de programmation Flash MX Professionnel 2004 introduit un environnement visuel de programmation s'appuyant sur des formulaires, un environnement idéal pour le développement d'application
Programmation basée sur les diapositives Les écans de diapositives fournissent une fonctionnalité concise pour les presentations séquentielle
Une nouvelle génération de composants
Support des composants avancés Les nouveaux composants prennent désormais en charge la gestion du focus, pour vous permettre de contrôler la navigation par tabulation. Même si les composants ont une nouvelle présentation plus sophistiquée, vous pouvez facilement leur appliquer une nouvelle enveloppe pour modifier leur aspect. Pour plus d'informations, voir Avantages des composants v2 dans l'aide Utilisation des composants.
Interactivité des données
Liaison des données La liaison des données vous permet de lier les composants à différentes sources de données pour manipuler, afficher et mettre à jour les données à l'aide des composants ou d'ActionScript. Pour plus d'informations, voir Liaison des données dans l'aide Utilisation de Flash.
Connecteurs de données prédéfinis pour les services Web et XML De nouveaux composants vous permettent de vous connecter facilement aux services Web et aux sources de données XML. Pour plus d'informations, voir Composants Macromedia Flash MX 2004 et Macromedia Flash MX Professionnel 2004 dans l'aide Utilisation des composants.
Améliorations des performances L'amélioration des performances des produits d'enregistrements volumineux permet un fonctionnement plus efficace de l'application avec de gros volumes de données.
Productivité de l'équipe
Gestion de projet Le panneau Projet permet une gestion centralisée des fichiers du projet, le contrôle de version, ainsi qu'une optimisation du flux de travail des utilisateurs Flash travaillant en équipe. Pour plus d'informations, voir Utilisation des projets (Flash Professionnel uniquement) dans l'aide Utilisation de Flash.
Contrôle des codes source Flash Professionnel intègre la gestion du code source via des modules de systèmes de gestion de la source, tels que Microsoft Visual Source Safe. Pour plus d'informations, voir Utilisation du contrôle de version dans les projets (Flash Professionnel uniquement) dans l'aide Utilisation de Flash.
Nouveautés de fireworks MX 2004
Grâce à ses nouvelles fonctions, Fireworks MX 2004 devient une application de plus en plus accessible et offre une capacité accrue d'insertion de graphismes et d'éléments interactifs dans les sites Web. Fireworks MX 2004 optimise la Productivité des concepteurs Web expérimentés, des développeurs HTML qui créent également des graphiques, et des développeurs Web débutants qui doivent développer des pages Web interactives et riches en graphiques sans avoir de connaissances techniques avancées de la programmation ou du langage JavaScript.
Page de démarrage La page de démarrage apparait au démarrage de Fireworks. Elle contient différentes approches d'apprentissage du produit et vous dirige vers des emplacements auxquels vous pouvez obtenir plus d'informations ou de l'aide. Pour plus d'informations, voir Utilisation de la page de démarrage dans l'aide de Fireworks.
Enregistrement au format d'origine Amélioration majeure du processus de création de Fireworks, cette nouvelle fonction vous permet d'enregistrer des documents importés dans leur format d'origine après y avoir inséré des changements dans Fireworks. Voir Enregistrement de documents dans d'autres formats dans l'aide de Fireworks.
Prise en charge des fichiers côté serveur Fireworks MX 2004 inclut désormais une prise en charge complète des formats de fichiers côté serveur, tels que CFM, PHP et ASP. Voir « Working with other Programs » (Travailler avec d'autres applications) du centre de support de Fireworks à l'adresse suivante: www.macromedia.com/fr/support/.
Formes automatiques Les formes automatiques sont de nouveaux objets primaires qui savent comment déplacer leurs points et qui se comportent intelligemment lorsque vous les transformez. Voir Dessin de formes automatiques dans l'aide de Fireworks.
Envoi sous forme de courriel Vous pouvez désormais envoyer des documents en pièce jointe d'un courriel à partir de Fireworks. Voir « Working with other programs » (Travailler avec d'autres applications) sur la page du centre de support Fireworks à l'adresse www.macromedia.com/fr/support/.
Masquer/Afficher les panneaux Ce nouveau bouton vous permet de masquer et d'afficher rapidement tous les panneaux Fireworks et de libérer de la place dans l'espace de travail. Voir Organisation des groupes de panneaux et des panneaux dans l'aide de Fireworks.
Onglets Document (PC) Vous pouvez désormais naviguer entre plusieurs documents en cliquant sur les onglets Document situés en bas de l'espace de travail. Voir Utilisation des onglets de documents dans l'aide de FireFireworks.
Ajuster le document Vous pouvez aisément adapter l'image à la taille du document en cliquant sur le bouton Ajuster le document de l'Inspecteur des propriétés. Voir Réduction ou réglage du document dans l'aide de Fireworks.
Mise à l'échelle à partir du centre Appuyez sur la touche Alt (Windows) ou Option (Macintosh) pour que l'outil Mise à l'échelle effectue une mise à l'échelle à partir du centre. Voir Mise à l'échelle des objets dans l'aide de Fire Fireworks.
Outil Suppression de l'oeil rouge L'outil Suppression de l'oeil rouge permet d'éliminer facilement l'effet yeux rouges sur vos photos numériques. Voir Suppression de l'effet yeux rouges sur des photos dans l'aide de Fireworks.
Outil Remplacer la couleur Ce nouvel outil facilite le remplacement d'une couleur dans les images bitmap de vos documents. Voir Remplacement des couleurs dans l'aide de Fireworks.
Amélioration des effets appliqués en direct De nouvelles options d'effets appliqués en direct vous permettent de créer des flous artistiques et d'autres effets attrayants. Voir Utilisation des effets en direct dans l'aide de Fireworks.
Fonction d'aperçu des menus contextuels Les menus contextuels de trait, de remplissage et de police de l'Inspecteur des propriétés vous montrent la manière dont une nouvelle valeur de trait, de remplissage ou de police va modifier l'objet auquel elle est appliquée. Voir Application de couleurs, de traits et de remplissages dans l'aide de Fireworks.
Trait de ligne pointillée La nouvelle fonction de ligne pointillée offre davantage d'options pour créer des effets de trait utiles et attrayants. Voir Création de traits personnalisés dans l'aide de Fireworks.
Dégradé de contour Cette fonction vous permet de créer des dégradés multicolores qui suivent le contour d'un objet. Elle facilite la représentation d'illustrations organiques et fluides dans Fireworks. Voir Application d'une trame en dégradé dans l'aide de Fireworks.
Bouton Gestion des fichiers Utilisez cette nouvelle barre d'outils pour archiver et extraire les fichiers d'un site Web Macromedia Studio MX 2004. Voir Working with other Programs (Travailler avec d'autres applications) sur la page du centre de support de Fireworks à l'adresse suivante: www.macromedia.com/fr/support/.
Prise en charge d'Unicode Exploitez les nouvelles fonctions de langue de votre système d'exploitation. Les utilisateurs de la version anglaise de Fireworks MX 2004 peuvent désormais créer du texte de description et des graphiques à double octet, et utiliser des caractères à double octet, tels que Kanji et Hiragana, dans tout champ de texte.
Anticrénelage amélioré Basées sur l'anticrénelage système Windows ou Quartz pour Macintosh, les différentes options d'anticrénelage améliorent la lisibilité du texte. Vous pouvez également utiliser l'option innovante d'anticrénelage personnalisé de Fireworks. Voir Lissage du bord des caractères dans l'aide de Fireworks.
Nouveautés de freehand MX
Que les illustrations que vous créez soient destinées à l'impression, au Web ou aux deux, FreeHand MX offre de nouvelles fonctions qui en améliorent la convivialité, la créativité et la puissance.
Remarque : La version de FreeHand MX comprise dans Studio MX 2004 est la même version fournie avec Macromedia Studio MX Plus.
Standards et interactivité
FreeHand MX dispose d'une nouvelle interface utilisateur qui simplifie le travail et propose une meilleure organisation de l'espace de travail. Cette nouvelle interface facilite l'apprentissage de FreeHand si vous connaissiez déjà un autre produit de la suite Macromedia Studio MX 2004, comme Dreamweaver, Flash ou Fireworks.
Panneaux groupés/onglets Les panneaux sont désormais judicieusement ancrés ensemble sur le bord droit de la fenêtre d'application. Totalement personnalisables, ces groupes de panneaux peuvent être déplacés, séparés ou combinés. Pour plus d'informations, voir Utilisation des panneaux dans l'aide Utilisation de FreeHand.
Panneau Objet Le panneau Objet est un panneau contextuel qui vous permet d'afficher et de modifier les propriétés des objets et textes sélectionnés. Il est très utile pour mener à bien pratiquement toutes les opérations de dessin. Pour plus d'informations, voir Utilisation du panneau Objet dans l'aide Utilisation de FreeHand.
Travail sous Flash Il est désormais possible de lancer Flash directement depuis FreeHand pour modifier du contenu Flash importé. Pour plus d'informations, voir Modification d'animations Flash importées dans l'aide Utilisation de FreeHand.
Travail sous Fireworks Lorsque vous travailliez sur un fichier bitmap, FreeHand peut automatiquement démarrer Macromedia Fireworks pour vous permettre d'utiliser les outils de modification de bitmap de ce dernier, afin de faciliter le travail de retouche ou d'optimisation du fichier. Les deux applications associées permettent une meilleure rationalisation du travail de création et de modification de graphismes. Pour plus d'informations, voir Utilisation d'illustrations importées dans l'aide Utilisation de FreeHand.
Panneau Réponses Le panneau Réponses vous aide à travailler plus efficacement en vous donnant accès aux divers contenus du site Web Macromedia : didacticiels, leçons, notes techniques et autres informations utiles. Pour plus d'informations, voir Le panneau Réponses dans l'aide Utilisation de FreeHand.
Puisant outil d'illustration
Les nombreuses nouvelles fonctions font de FreeHand MX un outil d'illustration très puissant.
Outil Extrusion Ce nouvel outil vous permet d'appliquer des effets d'extrusion 3D à n'importe quel objet. Pour en savoir plus, voir Extrusion d'objets dans l'aide Utilisation de FreeHand.
Traits et remplissages multiples Avec FreeHand MX, il vous est désormais possible d'appliquer plusieurs traits et remplissages à un objet, ce qui vous ouvre des perspectives pour vos illustrations. Voir Utilisation des trames et des traits dans l'aide Utilisation de FreeHand.
Effets de trame et de transparence en direct Les effets de trame en direct permettent d'obtenir des résultats similaires à certains outils de manipulation d'images des logiciels de retouche photo, tels que Fireworks. Ces effets font office de propriétés pour l'objet auquel ils sont appliqués; ils ne modifient en rien l'objet lui-même. Pour plus d'informations, voir Applications d'effets de trame en direct dans l'aide Utilisation de FreeHand.
Les effets de transparence permettent d'obtenir un remplissage ou un trait (ou une partie seulement) transparent ou semi-opaque. Pour en savoir plus, voir Utilisation d'un attribut d'effet Transparence dans l'aide Utilisation de FreeHand.
Effets vectoriels en direct Ces effets permettent d'obtenir des résultats similaires à certains autres outils de manipulation d'images de FreeHand, à l'exception près qu'ils font office de propriétés pour l'objet auquel ils sont appliqués et ne modifient en rien l'objet en lui-même. Pour plus d'informations, voir Application d'effets vectoriels en direct dans l'aide Utilisation de FreeHand.
Outil Fondu Les fondus sont désormais plus faciles à appliquer. L'outil vous permet de créer un fondu en reliant deux formes par une ligne. Voir Utilisation de l'outil Fondu dans l'aide Utilisation de FreeHand.
Trait calligraphique Cette nouvelle fonction vous permet de créer de jolies calligraphies en tant qu'objet vectoriel. Pour plus d'informations, voir Utilisation d'attributs de traits calligraphiques dans l'aide Utilisation de FreeHand.
Outil Gomme Ce nouvel outil vous permet d'effacer en partie les objets vectoriels. Pour en savoir plus, voir Effacement d'un trajet dans l'aide Utilisation de FreeHand.
Canaux alpha d'image FreeHand MX prend en charge l'importation et l'affichage des canaux alpha des fichiers communs d'image bitmap. Voir Utilisation d'images bitmap dans FreeHand dans l'aide Utilisation de FreeHand.
Nouvelles trames de dégradé Deux nouvelles trames de dégradé ont été ajoutées à FreeHand MX : rectangulaire et en cône. Par ailleurs, les trames de dégradé proposent désormais davantage d'options. Pour plus d'informations, voir Utilisation d'attributs de trames dégradées dans l'aide Utilisation de FreeHand.
Améliorations du pinceau L'attribut Angles arrondis donne un effet plus fluide et naturel aux passages du pinceau, en leur faisant épouser les coins et les angles fermés. Pour en savoir plus sur les pinceaux, voir Utilisation d'attributs de traits de pinceau dans l'aide Utilisation de FreeHand.
Fonctions liées au web
Nombre des fonctions nouvelles ou améliorées de FreeHand MX vous aient à planifier, élaborer la maquette et développer vos éléments de site Web. Enrichi de ces nouvelles, FreeHand MX s'impose comme l'outil de choix pour mener à bien les premières étapes du développement d'un site, et donc est la première application utilisée dans la suite Macromedia Studio MX 2004.
Outils Connecteur Cet outil vous permet de dessiner des lignes connecteur qui établissent sans lien dynamique entre les objets. Ces lignes connecteur s'ajustent automatiquement lorsque vous déplacez les objets connectés dans la fenêtre de document. Pour plus d'informations, voir Liaison dynamique d'objets dans l'aide Utilisation de FreeHand.
Outil Action Cet outil vous permet d'assigner des actions Flash à un objet. Pour plus d'informations, voir Utilisation de l'outil Action dans l'aide Utilisation de FreeHand.
Zone de sortie Vous pouvez désormais imprimer ou exporter une zone de la fenêtre de document avec l'outil Zone de sortie. Pour en savoir plus, voir Exportation d'une zone de document dans l'aide Utilisation de FreeHand.
Paramètres simplifiés de Flash Il est à présent plus facile de contrôler les paramètres d'une animation Flash depuis FreeHand. Pour plus d'informations, voir Utilisation d'animations Flash dans l'aide Utilisation de FreeHand.
Importation, placement et exportation de fichiers SWF. Vous pouvez importer directement des fichiers SWF Flash, les placer dans FreeHand MX, puis les exporter. Voir Modification d'animations Flash importées et Exportation de documents FreeHand en tant qu'animations Flash dans l'aide Utilisation de FreeHand.
Facilité d'emploi
De nombreuses nouvelles fonctionnalités FreeHand MX visent à faciliter autant que possible votre processus de travail.
Modifications du panneau Outils Ce panneau a été réorganisé pour que les outils soient plus faciles à trouver et à utiliser. Pour en savoir plus, voir Utilisation du panneau Outils dans l'aide Utilisation de FreeHand.
Poignées de trame de dégradation Les trames de dégradation sont dotées de poignées pour pouvoir les manipuler plus facilement. Voir Utilisation des trames et des traits dans l'aide Utilisation de FreeHand.
Bouton Ajouter une page Pour créer une nouvelle page dans le document, il suffit désormais de cliquer sur le bouton Ajouter une page, au bas de la fenêtre d'application. Voir Utilisation de pages dans l'aide Utilisation de FreeHand.
Modifications de comportement de style Vous pouvez décider des types d'attributs d'objet auquel un style s'applique. Voir Application des styles dans l'aide Utilisation de FreeHand.
Espace de travail de studio MX 2004
Macromedia Studio MX 2004 offre un espace de travail intégré permettant de passer très simplement d'un produit de la suite à un autre. Vous remarquerez que les panneaux, les menus, les icônes de sélection et beaucoup d'autres éléments d'interface utilisateur sont similaires entre les différents produits et faciles à utiliser. Passant d'un produit à un autre, vous constaterez à quel point l'espace de travail, homogène et familier, contribue à accroître votre productivité, en vous faisant gagner du temps sur l'apprentissage d'un nouveau produit.
Ce chapitre contient les sections suivantes :
Premier contact avec l'espace de travail de Dreamweaver, page 31
Premier contact avec l'espace de travail de Flash, page 35
Description de l'espace de travail de Fireworks, page 42
Premier contact avec l'espace de travail de FreeHand, page 48
Premier contact avec l'espace de travail de dreamweaver
Sous Windows, Dreamweaver MX 2004 offre un espace de travail intégré composé d'une seule fenêtre. Dans l'espace de travail intégré, toutes les fenêtres et tous les panneaux sont rassemblés dans une grande fenêtre d'application. Vous avez le choix entre une présentation axée sur la conception et une autre axée sur les besoins des codeurs manuels.
Sur Macintosh, Dreamweaver se présente sous la forme d'un espace de travail flottant, dans lequel chaque document est localisé dans une fenêtre individuelle. Les groupes de panneaux sont initialement ancrés ensemble, mais vous pouvez les séparer pour les faire apparaître dans leur propre fenêtre. Les fenêtres s'alignent automatiquement les unes sur les autres sur les côtés de l'écran, et sur la fenêtre du document au fur et à mesure que vous les faites glisser ou que vous les redimensionnez.
Remarque : Vous pouvez personnaliser votre espace de travail en réorganisant les groupes de panneaux ; pour plus d'informations, voir l'aide Utilisation de Dreamweaver.
Choix de la présentation de l'espace de travail (sous windows uniquement)
Lorsque vous lancez Dreamweaver pour la première fois dans Windows, une boîte de dialogue vous demande de choisir une présentation d'espace de travail. Vous pourrez choisir un autre type de présentation ultérieurement, à partir de la boîte de dialogue Préférences.
Configuration de l'espace de travail
Choisissez la présentation de l'espace de travail qui vous convient le mieux. Par la suite, vous pourrez changer la présentation dans Préférences.
Designer
Codeur
PourCHOISIR LA PRESENTATION DE L'espace de travail :
- Sélectionnez l'une des options suivantes :
Espace de travail Designer : il s'agit d'un espace de travail intégré utilisant l'interface MDI (Multiple Document Interface), dans laquelle toutes les fenêtres de document et tous les panneaux sont rassemblés dans une grande fenêtre d'application, les groupes de panneaux étant ancrés sur la droite. C'est la présentation recommandée pour la plupart des utilisateurs.
Remarque : Dans la quasi-totalité de ce guide, nous supposons que vous utilisez l'espace de travail Designer.
Espace de travail Codeur : correspond au même espace de travail intégré, mais avec les groupes de panneaux ancrés sur la gauche, dans une présentation similaire à celle utilisée par Macromedia HomeSite et Macromedia ColdFusion Studio. La fenêtre de document affiche le mode Code par défaut. Nous recommandons cette présentation aux utilisateurs de HomeSite ou ColdFusion Studio et aux utilisateurs habitués au codage manuel préférant travailler dans un espace de travail familier.
Remarque : Ces deux espaces de travail autorisent l'ancrage des groupes de panneaux à droite ou à gauche.
Présentation des fenêtres et des panneaux
Cette section décrit rapidement quelques éléments de l'espace de travail de Dreamweaver. L'utilisation de ces outils est abordée dans les différentes sections de ce guide; pour plus d'informations, voir l'aide Utilisation de Dreamweaver.
La Page de démarrage (aucune illustration disponible) permet d'ouvrir un document récent ou de créer un nouveau document. Elle contient également des informations complémentaires sur Dreamweaver (présentation du produit, didacticiels).
La barre Inséorer contient des boutons permettant d'insérer divers types d'« objets », tels que des images, tableaux et calques dans un document. Chaque objet est une portion de code HTML vous permettant de définir des attributs lors de son insertion. Par exemple, vous pouvez insérer un tableau en cliquant sur le bouton Tableau de la barre Inséorer. Si vous le préférez, vous pouvez insérer les objets à partir du menu Insertion.
La barre d'outils du document contient des boutons et des menus déroulants permettant d'accéder aux différents modes d'affichage de la fenêtre du document (tels que le mode Création ou le mode Code), de définir les différentes options d'affichage et d'effectuer certaines opérations courantes, telles que la prévisualisation dans un navigateur.
La fenêtre de document affiche le document que vous créez et modifiez.
L'inspecteur de propriétés permet de visualiser et de modifier diverses propriétés de l'objet ou du texte sélectionné. Chaque objet contient des propriétés différentes.
Les groupes de panneaux sont des ensembles de panneaux associés regroupés sous un même titre. Pour développer un groupe de panneaux, cliquez sur la flèche d'agrandissement située à gauche du nom du groupe ; pour détacher un groupe de panneaux, faites glisser la poignée d'ancrage sur le côté gauche de la barre de titre du groupe.
Le panneau Fichiers vous permet de gérer vos fichiers et dossiers, qu'ils fassent partie d'un site Dreamweaver ou qu'ils se trouvent sur un serveur distant. Il permet également d'accéder à tous les fichiers stockés sur votre disque local, tout comme l'Explorateur Windows (Windows) ou le Finder (Macintosh).
Dreamweaver propose de nombreux autres inspecteurs, panneaux et fenêtres qui ne sont pas illustrés ici, tels que le panneau Styles CSS et l'inspecteur de balises. Pour ouvrir les panneaux, inspecteurs et fenêtres Dreamwe. utiliser le menu Fenêtre.
Présentation des menus
Cette section présente les menus de Dreamweaver.
Le menu Fichier et le menu Édition contiennent des éléments de menu standard, tels que Nouveau, Ouvrir, Enregistrer, Enregistrer tout, Couper, Copier, Coller, Annuler et Rétablir. Le menu Fichier contient également plusieurs autres commandes permettant d'afficher un aperçu du document dans un navigateur ou d'imprimer du code, par exemple. Le menu Édition inclut des commandes de sélection et de recherche, telles que Sélectionner balise parente et Rechercher et Remplacer. Sous Windows, le menu Édition permet également d'accéder aux préférences; sur Macintosh, le menu Dreamweaver permet d'ouvrir la boîte de dialogue Préférences.
Le menu Affichage permet de modifier l'affichage du document (mode Création ou mode Code, par exemple) et d'afficher ou de masquer plusieurs types d'éléments de page et d'outils Dreamweaver, ainsi que des barres d'outils.
Le menu Insertion et la barre Insérer permettent d'insérer des objets dans votre document.
Le menu Modifier permet de modifier les propriétés de l'objet de page sélectionné. Vous pouvez l'ouvrir pour modifier les attributs de balises, des tableaux et leurs éléments et effectuer diverses opérations avec les éléments de bibliothèque et les modèles.
Le menu Texte permet de formater facilement le texte.
Le menu Commandes propose une commande de formatage du code qui tient compte de vos préférences de formatage, une commande de création d'album photos et une commande d'optimisation des images dans Macromedia Fireworks.
Le menu Site contient des éléments de menu permettant de générer vos sites et de télécharger des fichiers vers ou en provenance d'un serveur distant.
Conseil : Certaines commandes du menu Site des versions précédentes de Dreamweaver se trouvent désormais dans le menu Options du panneau Fichiers.
Le menu Fenêtre permet d'accéder à tous les panneaux, inspecteurs et fenêtres de Dreamweaver. (Pour les barres d'outils, voir le menu Affichage.)
Le menu Aide permet d'accéder à la documentation de Dreamweaver, aux systèmes d'aide relatifs à l'utilisation de Dreamweaver et à la création d'extensions vers Dreamweaver, ainsi qu'à des références en plusieurs langues.
Outre les menus de la barre de menus, Dreamweaver propose plusieurs menus contextuels qui permettent d'accéder rapidement à des commandes utiles en rapport avec la zone ou la sélection courante. Pour afficher un menu contextuel, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur un élément qui vous intéresse dans une fenêtre.
Premier contact avec l'espace de travail de flash
L'application Macromedia Flash MX 2004 est constituée d'une scène sur laquelle vous placez vos éléments de matière, d'une barre d'outils principale responsable des menus et commandes d'accès aux diverses fonctions, de panneaux et d'un inspecteur des propriétés permettant d'organiser et modifier les actifs des médias, et enfin d'une barre d'outils dédiée à la création et à la modification des graphiques vectoriels.
Cette section contient une brève description de l'espace de travail Flash MX 2004. Pour une description plus détaillée, voir Familiarisation avec l'espace de travail dans le manuel Bien démarrer avec Flash. Pour ouvrir ce manuel, lancez Flash, sélectionnez Aide > Aide, puis Bien démarrer avec Flash parmi la liste des aides en ligne.
Utilisation de la scène
La scène est un espace rectangulaire dans lequel vous placez votre contenu graphique, dont notamment les dessins vectoriels, les zones de texte, les boutons, les bitmaps ou clips vidéo importés, etc. Dans l'environnement de création Flash, la scène correspond à l'espace rectangulaire de Macromedia Flash Player, dans lequel s'affiche votre document Flash à la lecture. Une fonction de zoom vous permet d'adapter le taux d'agrandissement de la scène en fonction de votre travail.
Pour afficher l'ensemble de la scène à l'écran, ou seulement une partie de votre dessin de manière très agrandie, vous pouvez modifier le facteur de zoom. Le zoom maximal dépend de la résolution de votre moniteur et de la taille du document. La valeur minimum de réduction de la scène est de 8%. La valeur maximum d'agrandissement de la scène est de 2000%.
Pour agrandir ou réduire la vue de la scène, procédez d'une des façons suivantes :
- Pour zoomer sur un élément particulier, Sélectionnez l'outil Zoom et cliquez sur l'élément. Pour basculer l'outil Zoom entre le zoom avant et le zoom arrêté, utilisez les modifieurs Agrandir ou Réduire (dans la zone d'options de la barre d'outils lorsque l'outil Zoom est sélectionné) ou cliquez en maintenant la touche Alt (Windows) ou Option (Macintosh) enfoncée.
- Pour faire un zoom avant sur une zone spécifique de votre dessin, tracez un cadre de sélection avec l'outil Zoom. Flash définit le facteur de zoom de sorte que le cadre de sélection spécifique remplisse la fenêtre.
- Pour faire un zoom avant ou arrêté de l'ensemble de la scene, désisissez Affichage > Zoom avant ou Affichage > Zoom arrêté.
- Pour faire un zoom avant ou arrêté d'un pourcentage précis, choisissez Affichage > Zoom et sélectionnez un pourcentage dans le sous-menu, ou sélectionnez un pourcentage dans le contrôle de Zoom situé dans l'angle inférieur gauche de la fenêtre d'application.
- Pour redimensionner la scene afin qu'elle occupe tout l'espace disponible dans la fenêtre, CHOISSEZ AFFICHAGE > Zoom > Ajuster à la fenêtre.
- Pour afficher le contenu de l'image actuelle, Sélectionnez Affichage > Zoom > Afficher tout, ou désélectionnez Afficher tout dans la zone de zoom de la fenêtre de l'application (coin supérieur droit). Si la séquence est vide, toute la scène est affichée.
- Pour afficher toute la scène, CHOISSEZ AFFICHAGE > Zoom > Afficher une image ou choisissez Afficher une image dans le contrôle Zoom dans l'angle inférieur gauche de la fenêtre d'application.
- Pour afficher l'espace de travail entourant la scène, CHOISSEZ Affichage > Zone de travail. L'espace de travail est affiché en gris clair. Utilisez la commande Zone de travail pour afficher les éléments d'une sequence qui sont partiellement ou totalement en dehors de la scène. Par exemple, pour faire en sorte que le vol d'un oiseau passe par une image, vous devrez initialement placer l'oiseau en dehors de la scène dans l'espace de travail.
Déplacement de la vue de la scène
Lorsque vous avez fait un zoom avant de la scène, il est possible que vous ne la voyiez plus en intégralité. L'outil Main vous permet de déplacer la scène de manière à changer la vue sans avoir à changer le zoom.
Pour déplacer la vue de la scène :
1 Dans la barre d'outils, sélectionnez l'outil Main. Pour basculer temporairement entre l'outil Main et un autre outil, appuyez sur la barre d'espace et cliquez sur l'outil souhaité dans la boîte à outils. 2 Faites glisser la scène.
Utilisation du scénario
Le scénario organise et contrôle le contenu d'un document au fil du temps dans les calques et les images. Tout comme les films, les documents Flash divisent les périodes de temps en images. Les calques sont semblables à des bandes de film empilées les unes sur les autres, chacune contenant une image différente qui apparait sur la scène. Les principaux composants du scénario sont les calques, les images et la tête de lecture.
Les calques d'un document sont répertoriés dans une colonne affichée sur la gauche du scénario. Les images contenues dans chaque calque sont affichées sur une ligne à droite du nom du calque. L'en-tête du scénario, situé en haut du scénario, affiche le numéro des images. La tête de lecture indique l'image actuellement affichée sur la scène.
La barre d'état du scénario, affichée en bas de ce dernier, indique le nombre de l'image sélectionnée, la cadence d'image actuelle et le temps écoulé jusqu'à l'image actuelle.
Remarque : Lors de la lecture d'une animation, la cadence réelle des images est indiquée : elle peut être différente de la cadence du document si l'ordinateur ne peut pas afficher l'animation assez rapidement.
Vous pouvez changer la manière dont les images sont affichées dans le scénario, ainsi que d'y afficher des vignettes représentant le contenu d'image. Le scénario indique les endroits auxquels un document contient des effets animés (animation image par image, animation interpolée ou trajectoires de mouvement, par exemple). Pour plus d'informations, voir Création de mouvement dans l'aide Utilisation de Flash.
Les commandes de la section des calques du scénario vous permettent d'afficher, masquer, verrouiller ou déverrouiller les calques, ainsi que d'en afficher le contenu sous forme de contours. Voir Modification des calques et dossiers de calques dans le manuel Bien démarrer avec Flash (disponible dans l'aide de Flash).
Vous pouvez insérer, supprimer, sélectionner et déplacer des images dans le scénario. Vous pouvez également faire glisser des images vers un nouvel emplacement du même calque ou d'un calque différent. Voir Utilisation d'images dans le scénario dans le manuel Bien démarrer avec Flash (disponible dans l'aide de Flash).
Modification de l'apparence du scénario
Par défaut, le scenario est affiché en haut de la fenêtre principale de l'application, au-dessus de la scène. Pour changer sa position, vous pouvez ancrer le scenario en bas ou sur les côtés de la fenêtre principale de l'application, ou encore afficher le scenario dans sa propre fenêtre. Vous pouvez également masquer le scenario.
Vous pouvez redimensionner le scénario de manière à changer le nombre de calques et d'images visibles. Lorsque le scénario contient plus de calques qu'il ne peut en afficher, vous pouvez afficher les calques supplémentaires à l'aide des barres de défilement situées sur la droite du scénario.
Pour déplacer le scénario:
- Faites glisser le scénario en cliquant sur la zone située au-dessus de son en-tête.
Faites glisser le scénario vers le bord de la fenêtre de l'application pour l'ancrer. Faites-le glisser avec la touche Ctrl enfoncée pour empêcher son ancrage.
Pour agrandir ou réduire les champs de nom de calque :
- Faites glisser la barre séparant les noms des calques et la partie des images du scénario.
Pour redimensionner le scénario, effectuez l'une des opérations suivantes :
- Si le scénario est ancré à la fenêtre principale de l'application, faites glisser la barre séparant le scénario de la fenêtre de l'application.
- Si le scenario n'est pas ancre à la fenetre principale de l'application, faites glisser l'angle inférieur droit (Windows) ou la case de redimensionnement située dans l'angle inférieur droit (Macintosh).
Déplacement de la tête de lecture
La tête de lecture se déplace dans le scénario pour indiquer l'image actuellement affichée sur la scène. L'en-tête du scénario affiche le numéro des images de l'animation. Pour afficher une image sur la scène, vous devez déplacer la tête de lecture vers cette image dans le scénario.
Lorsque vous travaillez avec de nombreuses images qui ne peuvent pas être toutes affichées en même temps dans le scénario, vous pouvez déplacer la tête de lecture le long du scénario de manière à facilement localiser l'image actuelle.
Pour atteindre une image :
- Cliquez sur l'emplacement de l'image dans l'endu scenario ou faites glisser la tête de lecture vers la position souhaitée.
Pour centrer le scenario sur l'image en cours :
- Cliquez sur le bouton Centrer l'image en bas du scénario.
Utilisation des images et des images-clés
Une image-clé est une image dans laquelle vous définissez la modification d'un effet animé ou incluez des actions d'image permettant de modifier un document. Flash peut interpoler ou remplir les images situées entre les images-clés pour produire des animations fluides. Les images-clés facilitent la création des animations car elles évitent d'avoir à tracer chacune de leurs images. Vous pouvez changer la longueur d'un effet animé interpolé en faisant glisser une image-clé dans le scenario.
L'ordre d'apparition des images et des images-clés dans le scenario détermine celui de leur affichage dans une application Flash. Vous pouvez organiser les images-clés différemment dans le scenario afin de modifier la série des événements dans l'animation.
Utilisation d'images dans le scénario
Dans le scénario, vous travaillez avec des images et des images-clés, que vous placez dans l'ordre correspondant à celui dans lequel vous souhaitez que les objets apparaissent dans les images. Vous pouvez changer la longueur d'un effet animé interpolé en faisant glisser une image-clé dans le scénario.
Vous pouvez effectuer les modifications suivantes sur les images et les images-clés
- Insérer, Sélectionner, supprimer et déplacer des images ou des images-clés.
- Faire glisser des images et des images-clés vers un nouvel emplacement du même calque ou d'un calque différent.
- Copier et coller des images et des images-clés.
- Convertir des images-clés en images.
- Faire glisser un élément du panneau Bibliothèque vers la scène de manière à l'ajouter à l'image-clé actuelle.
Le scénario affiche les images interpolées d'une animation. Pour plus d'informations sur la modification des images interpolées, voir Manipulation de l'animation dans l'aide Utilisation de Flash.
Flash offre deux méthodes distinctes pour sélectionner les images dans le scénario. Avec la sélection basée sur images (paramètre par défaut), vous sélectionnez séparément les images dans le scénario. Avec la sélection basée sur plages, vous sélectionnez toute une série d'images (d'une image-clé à la suivante) en cliquant sur n'importe quelle image de cette série. La boîte de dialogue Préférences de Flash vous permet de paramétrer le programme pour la sélection basée sur plages. Voir Définition des préférences de Flash dans le manuel Bien démarrer avec Flash (disponible dans l'aide de Flash).
Pour insérer des images dans le scénario, effectuez l'une des opérations suivantes :
- Pour insérer une nouvelle image, Sélectionnez Insertion > Scénario > Image.
- Pour créer une image-clé, CHOISSEZ Insertion > Scénario > Image-clé. Veuillez également cliquer avec le bouton d dans laquelle placer l'image-clé, puis besoin Insérer une image-clé dans le menu contextuel.
- Pour creer une image-clé vierge, choisissez Insérer > Scénario > Image-clé vide ou cliquez avec le bouton droit (Windows) ou en appuyant sur la touche Contrôle (Macintosh) sur l'image dans laquelle placer l'image-clé, puis choisissez Insérer une image-clé vide dans le menu contextualuel.
Pour sélectionner une ou plusieurs images dans le scénario :
- Pour ne sélectionner qu'une seule image, cliquez dessus. Si vous avez activé l'option Sélection basée sur plages dans les Préférences, il vous suffit de cliquer sur une seule image pour sélectionner toute la série comprise entre les deux images-clés. Voir Définition des préférences de Flash dans le manuel Bien démarrer avec Flash (disponible dans l'aide de Flash).
- Pour sélectionner plusieurs images qui se suivent, cliquez dessus tout en appuyant sur la touche Maj.
- Pour sélectionner plusieurs images qui ne se suivent pas, cliquez dessus tout en appuyant sur la touche Ctrl (Windows) ou Commande (Macintosh).
Pour sélectionner toutes les images du scénario :
- Choisissez Édition > SCENARIO > Sélectionner toutes les images.
Pour supprimer ou modifier une image ou une image-clé, effectuez l'une des opérations suivantes:
- Pour supprimer une image, une image-clé ou une série, sélectionnez-la, puis désélectionnez Édition > Scénario > Supprimer l'image, ou bien cliquez avec le bouton droit (Windows) ou en appuyant sur la touche Contrôle (Macintosh) sur l'image, l'image-clé ou la série et désélectionnez Supprimer l'image dans le menu contextuel. Les images environnantes demeurent inchangées.
- Pour déplacer une image-clé ou une série d'images et leur contenu, faites-la glisser vers l'emplacement souhaité.
- Pour étendre la durée d'une image-clé, faites-la glisser tout en maintenant la touche Alt (Windows) ou Option (Macintosh) enfoncée, vers l'image finale de la nouvelle durée.
- Pour copier une image-clé ou une série d'images en la faisant glisser, cliquez tout en appuyant sur la touche Alt (Windows) ou sur la touche Option (Macintosh) et faites glisser l'image-clé vers le nouvel emplacement.
- Pour copier et coller une image ou une série d'images, Sélectionnez-la et choisissez Edition > Scénario > Copier les images. Sélectionnez l'image ou la série à remplacer, puis choisissez Edition > Scénario > Coller les images.
- Pour convertir une image-clé en image, Sélectionnez-la et choisissez Edition > Scénario > Supprimer l'image-clé. Vous pouvez également cliquer avec le bouton droit de la souris (Windows) ou tout en appuyant sur la touche Contrôle (Macintosh) sur l'image ou la séquence et CHOISIR Supprimer l'image-clé dans le menu contextuel. L'image-clé effacée et toutes les images jusqu'à l'image-clé suivante sont remplacées par le contenu de l'image précédant l'image-clé effacée.
- Pour changer la longueur d'une série interpolée, faites glisser l'image-clé de début ou de fin vers la gauche ou la droite. Pour modifier la durée d'une série image par image, voir A propos de l'animation image par image dans l'aide Utilisation de Flash.
- Pour ajouter un élément de la bibliothèque à l'image-clé en cours, faites glisser l'élément du panneau Bibliothèque vers la scène.
Utilisation des calques
Les calques peuvent se comparer à des feuilles transparentes empilées les unes sur les autres. Les calques permettent d'organiser les différentes illustrations d'un document. Vous pouvez dessiner et modifier des objets sur un calque sans affecter les objets des autres calques. Les calques vides seront apparentés aux calques situés en dessous.
Pour dessiner, peindre ou modifier tout autrement un calque ou dossier, vous sélectionnez le calque pour le rendre actif. L'icône crayon en regard du nom d'un calque ou dossier indique que le calque ou dossier est actif. Vous ne pouvez activer qu'un seul calque à la fois (même si vous pouvez en sélectionner plusieurs à la fois).
Lorsque vous créez un document Flash, celui-ci contient un calque. Vous pouvez y ajouter d'autres calques de façon à organiser les illustrations, les effets animés et les autres éléments de votre document. Le nombre de calques que vous pouvez n'a de limite que la mémoire de votre ordinateur, les calques n'augmentant pas la taille de leur fichier SWF publié. Vous pouvez masquer, verrouiller ou réarranger les calques.
Vous pouvez également organiser et gérer les calques en créant des dossiers de calques et en y plaçant des calques. Vous pouvez développer ou réduire les calques dans le scenario sans affecter ce qui est affiché sur la scène. Il est judicieux d'utiliser des calques ou des dossiers séparés pour les fichiers audio, les actions, les étiquettes et les commentaires d'image. Cela vous permet de retrouver plus rapidement ces éléments lorsque vous nevez les modifier.
En outre, vous pouvez utiliser des calques de guide spéciaux pour faciliter les opérations de dessin et de modification, et masquer les calques pour mieux créer des effets spéciaux.
Pour une présentation interactive de l'utilisation des calques dans Flash, CHOISSEZ Aide > Comment... > Bases de Flash Utiliser les calques.
Utilisation de la barre d'outils
Les éléments de la barre d'outils vous permettent de dessiner, de peindre, de sélectionner, de modifier une illustration ou de modifier l'affichage de la scène. La barre d'outils est divisée en quatre parties :
- Une partie outils, contenant les outils de dessin, de peinture et de sélection.
- Une partie affichage, contenant les outils permettant de zoomer et de se déplacer dans la fenêtre d'application.
- Une partie couleurs, contenant les modifieurs de couleur de trait et de remplissage.
- Une partie options, contenant les modificateurs de l'outil sélectionné, lesquels affectent les opérations de peinture et d'édition de l'outil.
La boîte de dialogue Personneliser la barre d'outils vous permet de spécifier quels outils afficher dans l'environnement de création Flash. Voir Personnelisation de la barre d'outils dans le manuel Bien démarrer avec Flash (disponible dans l'aide).
Pour plus d'informations sur l'utilisation des outils de dessin et de peinture, voir Outils de dessin et de peinture de Flash dans l'aide Utilisation de Flash. Pour plus d'informations sur l'utilisation des outils de sélection, voir Sélection d'objets dans l'aide Utilisation de Flash.
Pour afficher ou masquer la barre d'outils :
- Choisissez Fenêtre > Outils.
Close collapsed procedure
Description de l'espace de travail de fireworks
Lorsque vous ouvrez pour la première fois un document dans Macromedia Fireworks MX 2004, l'environnement de travail est activé, y compris le panneau Outils, l'Inspecteur des propriétés, les menus et d'autres panneaux. Le panneau Outils, à gauche de l'écran, contient des catégories libellées, incluant les groupes d'outils bitmap, vectoriels et Web. L'Inspecteur des propriétés apparait par défaut en bas du document, et affiche initialement les propriétés du document. Il change ensuite pour afficher les propriétés d'un outil nouvellement sélectionné ou d'un objet actuellement sélectionné lorsque vous travaillez dans le document. Les panneaux sont initialement rassemblés en groupes le long du bord droit de l'écran. La fenêtre du document apparait au centre de l'application.
Utilisation du panneau outils
Le panneau Outils se divise en six catégories : Sélection, Bitmap, Vecteur, Web, Couleurs et Affichage.
Modification des options des outils
Lorsque vous choisissez un outil, l'Inspecteur des propriétés affiche les options de l'outil. Certaines options d'outils restent affichées lorsque vous travaillez avec l'outil. Pour d'autres outils, tels que les outils des formes de base, la Plume et la Ligne, l'Inspecteur des propriétés affiche les propriétés des objets sélectionnés. Pour plus d'informations sur l'Inspecteur des propriétés, voir Utilisation de l'Inspecteur des propriétés dans l'aide de Fireworks.
Pour que s'affiche dans l'Inspecteur des propriétés les options d'un outil que vous êtes déjà en train d'utiliser :
- Choisissez Sélection > Désélectionner pour désélectionner tous les objets.
Pour plus d'informations sur des options d'outils spécifiques, voir les sections qui doivent les différences outils dans le manuel Utilisation de Fireworks ou l'aide de Fireworks.
Sélection d'un outil à partir d'un groupe d'outils
Un petit triangle dans le coin inférieur droit d'un outil dans le panneau Outils indique qu'il fait partie d'un groupe d'outils. Par exemple, l'outil Rectangle fait partie du groupe des outils destiné aux formes de base, qui inclut également les outils Rectangle arrondi, Ellipse et Polygone. Sont aussi inclus les outils Formes intelligentes apparaissant sous la ligne de séparation.
Pour désirer un outil à partir d'un groupe d'outils :
1 Cliquez sur l'icône de l'outil et maintenez enfoncé le bouton de la souris.
Un menu contextuel apparait avec les icônes des outils, le nom des outils et les touches de raccourci. L'outil actuellement sélectionné possède une encoche à gauche de son nom.
2 Faites glisser le pointeur afin de sélectionner l'outil désiré et relâchez le bouton de la souris.
L'outil apparait dans le panneau Outils, et les options de l'outil apparaisent dans l'inspecteur des propriétés.
Utilisation de l'inspecteur des propriétés
L'Inspecteur des propriétés est un panneau sensible au contexte qui affiche les propriétés de la sélection courante, les options de l'outil courant ou bien les propriétés du document. Par défaut, l'Inspecteur des propriétés est ancré en bas de l'espace de travail.
L'Inspecteur des propriétés peut être ouvert à mi-hauteur, représentant deux lignes de propriétés, ou quatre en pleine hauteur. Vous pouvez également le masquer totalement en le laissant dans l'espace de travail.
Remarque : Dans le manuel Utilisation de Fireworks, la plupart des procédures partent du principe que l'Inspecteur des propriétés est complètement déployé.
Pour annuler l'ancrage de l'inspecteur des propriétés :
- Faites glisser la poignée du coin supérieur gauche vers un autre endroit de l'espace de travail.
Pour ancrer l'inspecteur des propriétés en bas de l'espace de travail
- Faites glisser la barre latérale de l'Inspecteur des propriétés en bas de l'écran.
Pour déployer l'inspecteur des propriétés de la mi-hauteur à la pleine hauteur, permettant ainsi de découvrir des options supplémentaires :
- Cliquez sur la flèche d'extension située dans le coin inférieur droit de l'Inspecteur des propriétés.
- Cliquez sur l'icône en haut à droite de l'Inspecteur des propriétés et choisissez Pleine hauteur à partir du menu Options de l'Inspecteur des propriétés.
Remarque : Sous Windows, le menu Options est disponible uniquement lorsque l'Inspecteur des propriétés est ancré.
Pour réduire à mi-hauteur l'inspecteur des propriétés :
- Cliquez sur la flèche d'extension située dans le coin inférieur droit de l'Inspecteur des propriétés.
- Choisissez Demi-hauteur à partir du menu Options de l'Inspecteur des propriétés.
Remarque : Sous Windows, le menu Options est disponible uniquement lorsque l'Inspecteur des propriétés est ancré.
Pour réduire l'inspecteur des propriétés lorsqu'il est ancré :
- Clique sur la flèche d'extension ou sur le titre de l'Inspecteur des propriétés.
- Choisissez Réduire le groupe de panneaux à partir du menu Options de l'Inspecteur des propriétés ancres.
Pour plus d'informations sur les options spécifiques de l'Inspecteur des propriétés, voir les sections appropriées du manuel Utilisation de Fireworks ou l'aide de Fireworks.
Utilisation des panneaux
Les panneaux sont des groupes de commandes flottantes qui permettent de modifier l'aspect d'un objet sélectionné ou d'éléments du document. Ils permettent, entre autres, de travailler sur des images, des calques, des symboles et des couleurs du nuancier. Il est possible de faire glisser les panneaux de façon à les regrouper en fonction de vos préférences.
Les panneaux suivants sont regroupés par défaut :
- Les panneaux Styles, URL et Bibliothèque sont rassemblés dans le groupe de panneaux Actifs.
- Les panneaux Mélangeur et Nuanciers sont rassemblés dans le groupe de panneaux Couleurs.
- Les panneaux Images et Historique sont rassemblés dans le groupe de panneaux Images et Historique.
Les panneaux Optimiser, Calques, Formes, Info, Comportements, Rechercher et Aligner ne sont pas regroupés par défaut mais vous pouvez le faire à votre convenance. Lorsque vous regroupez des panneaux, tous les noms du groupe de panneaux apparaissent dans la barre de titre du groupe de panneaux. Vous pouvez toutefois renommer les groupes de panneaux comme bon vous semble.
Le panneau Optimiser vous permet de gérer les paramètres qui contrôlent la taille et le type de fichier, de travailler avec la palette des couleurs du fichier ou de la découverte à exporter.
Le panneau Calques vous permet d'organiser la structure d'un document et compte des options de création, suppression et manipulation des calques.
Le panneau Images inclut des options de création d'animations.
Le panneau Historique répertorie les commandes que vous avez utilisées récemment de façon à pouvoir les annuler et les rétablir rapidement. En outre, vous pouvez sélectionner des actions multiples, puis les enregistrer et les réutiliser en tant que commandes. Pour plus d'informations, voir Utilisation du panneau Historique pour annuler ou répéter plusieurs actions dans l'aide de Fireworks.
Le panneau Formes contient les formes automatiques qui n'apparaissent pas dans le panneau Outils.
Le panneau Styles vous permet de stocker et de réutiliser des combinaisons de caractéristiques d'objets ou de choisir un style stocké.
Le panneau Bibliothèque compte des symboles de graphiques, de boutons et d'animations. Vous pouvez facilement faire glisser les occurrences de ces symboles, du panneau Bibliothèque vers votre document. Vous pouvez modifier l'ensemble des occurrences en modifiant simplement le symbole.
Le panneau URL vous permet de créer des bibliothèques contenant les URL les plus fréquemment utilisées.
Le panneau Mélangeur vous permet de créer de nouvelles couleurs que vous pouvez ensuite ajouter à la palette de couleurs du document actif ou appliquer à des objets sélectionnés.
Le panneau Nuanciers gère la palette de couleurs du document actif.
Le panneau Info fournit des informations sur les dimensions des objets sélectionnés et les coordonnées exactes du pointeur au cours de son déplacement.
Le panneau Comportements gère les comportements qui déterminent ce qui se produit lorsque des références ou des découvertes réagissent aux déplacements de la souris.
Le panneau Rechercher vous permet de rechercher et de remplacer des éléments tels que du texte, des URL, des polices et des couleurs dans un ou plusieurs documents.
Le panneau Aligner renferme les commandes d'alignement et de distribution des objets dans le document.
Organisation des groupes de panneaux et des panneaux
Par défaut, les panneaux Fireworks sont rassemblés par groupes dans la zone d'ancrage, dans la partie droite de l'espace de travail. Vous pouvez annuler l'ancrage des groupes de panneaux, ajouter des panneaux à un groupe, annuler l'ancrage de panneaux individuels, réorganiser l'ordre des groupes de panneaux ancrés, et réduire et fermer des groupes de panneaux. Vous pouvez également ouvrir et fermer des panneaux individuels.
Utilisez les panneaux et groupes de panneaux dans Fireworks de la même façon que vous le faites dans les autres applications Studio.
Bouton exportation rapide
Le bouton Exportation rapide vous permet d'exporter vos fichiers Fireworks vers différentes applications Macromedia, y compris Dreamweaver, Flash, Director et Macromedia FreeHand MX. En outre, vous pouvez exporter vos fichiers vers Photoshop, FrontPage, Adobe GoLive et Illustrator, ou les afficher dans le navigateur de votre choix.
Navigation et affichage d'un document
Vous pouvez contrôler le grossissement du document, le nombre de fenêtres d'aperçu et le mode d'affichage. En outre, vous pouvez facilement déplacer le point de vue sur un document, ce qui est particulièrement utile lorsque vous grossissez une partie de votre document et perdez la vue de l'ensemble.
Utilisation des onglets de documents
Lorsque l'affichage de votre document est maximisé, vous pouvez facilement passer d'un document ouvert à un autre, à l'aide des onglets situés en haut de la fenêtre du document. Le nom de chaque document ouvert apparait sur un onglet au-dessus des boutons d'affichage.
Pour passer à un autre document lorsque l'affichage du document actif est maximisé :
- Cliquez sur l'onglet du document que vous souhaitez afficher.
Utilisation du panneau historique pour annuler ou répéter plusieurs actions
Le panneau Historique permet d'afficher, de modifier et de répéter des actions de création du document. Le panneau Historique répertorie les dernières actions exécutées dans Fireworks. Le nombre maximal d'entrées est spécifique dans le champ Nombre max. d'actions annulées de la boîte de dialogue Préférences de Fireworks.
Le panneau Historique permet d'effectuer les actions suivantes :
- Annuler et rétablir rapidement les actions récentes.
- Choisir des actions exécutées récemment à partir du panneau Historique, et les répéter.
- Copier dans le Presse-papiers des commandes sélectionnées sous forme de texte JavaScript.
- Enregister un groupe d'actions executées récemment sous un nom de commande unique, placé dans le menu Commandes et pouvant être réutilisé comme commande unique.
Pour annuler et refaire des actions :
1. Choisissez Fenêtre > Historique pour ouvrir le panneau Historique. 2. Faites glisser le marqueur d'annulation vers le haut ou vers le bas.
Pour refaire des actions :
1. Effectuer les actions. 2. Faites ce qui suit afin de sélectionner les commandes à répéter dans le panneau Historique :
- Cliquez sur une action pour la sélectionner.
- Cliquez sur Maj pour sélectionner une série ininterrompue d'actions.
- Maintenez enfoncée la touche Maj tout en cliquant pour sélectionner une série continue de commandes.
Cliquez sur le bouton Réexécuter, en bas du panneau Historique.
Pour enregistrer des actions à réutiliser par la suite :
1. Sélectionnez les actions à enregistrer à partir du panneau Historique. 2. Cliquez sur le bouton Enregistrer situé en bas du panneau. 3. Entrez un nom de commande, puis cliquez sur OK.
Pour utiliser une commande personnalisée enregistrée :
- Choisissez le nom de la commande dans le menu Commandes.
Premier contact avec l'espace de travail de freehand
L'application FreeHand fait partie de la famille de produits Macromedia MX. En tant que telle, elle utilise l'espace de travail Macromedia MX, interface partagée par les autres produits Macromedia MX. Cette homogénéité entre produits facilite l'apprentissage et l'utilisation des autres produits.
À la toute première ouverture de FreeHand, l'espace de travail se compose de la fenêtre de document et d'un ensemble de panneaux ancrés. Sous Windows, l'espace de travail est intégré, afin de rendre possible l'ancrage des panneaux et barres d'outils à la fenêtre d'application principale. Cela permet d'éviter d'ouvrir simultanément un trop grand nombre de panneaux et de barres d'outils et d'éviter ainsi d'encombrer l'espace de travail.
L'espace de travail intégré n'est pas pris en charge sur Macintosh. Toutefois, les panneaux et barres d'outils sont par défaut ancrés les uns aux autres dans une configuration comparable à l'espace de travail intégré de Windows.
Quel que soit le système d'exploitation utilisé, il reste toujours possible de réorganiser, repositionner et ancrer les uns aux autres les panneaux, barres d'outils et fenêtres FreeHand.
Vous trouverez dans les pages qui suivent une description plus détaillée de l'espace de travail de FreeHand. Des informations plus complètes sont également disponibles sous la rubrique intitulée Fonctions principales de FreeHand dans l'aide Utilisation de FreeHand.
Fenêtre de document
Lorsque vous démarrez FreeHand, en plus des panneaux, la fenêtre de document et la table de montage (zone contenant les pages du document) s'affichent.
La fenêtre de document contient tous les objets de votre document. Vous devez placer les objets sur une page pour les imprimer à l'aide de la commande Imprimer; si vous les placez dans la table de montage au-delà des limites de la page, vous pouvez les imprimer à l'aide de la fonction Zone de sortie. Pour de plus amples informations, voir Définition d'un espace de sortie dans l'aide Utilisation de FreeHand.
Si vous modifiez un document, un astérisque s'affiche en regard de son nom, dans la fenêtre de document, et le reste tant que vous n'avez pas enregistré votre travail. Pour de plus amples informations, voir Enregistrement des fichiers dans l'aide Utilisation de FreeHand.
Utilisation des panneaux
Lorsque vous démarrez FreeHand, les panneaux visibles (à l'exception du panneau Outils) sont ancrés les uns aux autres le long du bord droit de la fenêtre d'application. Entièrement personnalisables, ces groupes de panneaux peuvent être déplacés, séparés ou combinés. Vous pouvez par ailleurs ouvrir, fermer, ancrer, développer et réduire les panneaux et groupes de panneaux.
Les panneaux suivants sont regroupés par défaut :
- Les panneaux Object et Document sont associés en un groupe intitulé Propriétés.
- Les panneaux Nuanciers, Styles et Bibliothèque sont associés en un groupe intitulé Actifs.
- Les panneaux Mélangeur et Teintes sont associés en un groupe intitulé Mélangeur et Teintes.
- Les panneaux Aligner et Transformer sont associés en un groupe intitulé Aligner et Transformer.
- Les deux panneaux Rechercher et remplacer et Sélectionner sont associés en un groupe intitulé Rechercher et remplacer et Sélectionner.
- Les panneaux Demi-tons, Calques, Réponses, et Navigation ne sont pas associés avec d'autres par défaut, mais vous pouvez les grouper ensemble si vous le souhaitez. Sauf en ce qui concerne les groupes Propriétés et Actifs, l'intitulé de chaque groupe s'affiche dans la barre de titre lorsque vous regroupez les panneaux. Il vous est toutefois possible de remplacer l'intitulé par défaut d'un groupe par celui de votre choix; voir Association de panneaux dans l'aide Utilisation de FreeHand.
Les panneaux Calques, Réponses et les groupes de panneaux Propriétés, Actifs et Mélangeur et Teintes sont affichés par défaut à la première ouverture de FreeHand. Cependant, certains apparaissent sous forme réduite.
Pour plus d'informations, voir Utilisation des panneaux dans l'aide Utilisation de FreeHand.
Utilisation des barres d'outils
FreeHand est doté de plusieurs barres d'outils qui peuvent être au besoin laissées flottantes ou ancrées le long des bords haut, bas ou gauche de la fenêtre de document. Une info-bulle vous informant de la fonction de chaque outil s'affiche lorsque vous superposez le pointeur de la souris sur l'icône correspondante. Pour plus d'informations, voir Utilisation des infos-bulles dans l'aide Utilisation de FreeHand.
Barre d'outils principale
La barre d'outils principale (Fenêtre > Barres d'outils > Principale) contient les commandes de base dont vous vous servez au début de votre projet FreeHand. Vous l'utilisez pour ouvrir les fichiers de document et pour gérer la présentation de votre document. La barre d'outils principale permet également d'accéder rapidement aux panneaux les plus utilisés. Elle comporte les boutons suivants par défaut, mais vous pouvez en ajouter d'autres, en fonction de vos besoins. Pour plus d'informations, voir Personnelisation des barres d'outils dans l'aide Utilisation de FreeHand.
Crée un document
Ouvre le panneau Aligner
Ouvre un document existant
Ouvre le panneau Transformer
Enregistre le document actif
Ouvre le panneau Bibliothèque
Importe un fichier ou un objet
Ouvre le panneau Objet
Imprime le document actif
Ouvre le panneau Mélangeur
Verrouille les objets sélectionnés
Ouvre le panneau Nuanciers
Déverrouille les objets sélectionnés
Ouvre le panneau Calques
Ouvre le panneau Rechercher et remplacer
Utilisation du panneau outils
Les outils que contient ce panneau vous permettent de sélectionner, dessiner et retoucher des objets, leur appliquer des couleurs, créer du texte. Le panneau est divisé en quatre parties : Outils, Affichage, Couleurs et Accrocher. Vous pouvez personnaliser le panneau en lui ajoutant ou retirant des boutons.
Certains outils du panneau Outils sont dotés d'une flèche pointant vers le bas, dans leur angle inférieur droit. Cette flèche indique la présence d'un menu déroulant. Vous pouvez sélectionner d'autres outils dans le menu contextuel d'outils en cliquant sur tout outil liénant une flèche vers le bas, en maintenant le bouton de la souris enfoncé, puis en sélectionnant une option dans le menu contextuel qui s'affiche.
Pour sélectionner un outil parmi les options d'un menu contextuel :
1. Dans le panneau Outils, cliquez sur un outil présentant une flèche vers le bas et maintenez le bouton de la souris enfoncé. 2. Sélectionnez un outil dans le menu contextuel qui apparaît.
Pour ajouter un outil au panneau outils, procédez de l'une des manières suivantes:
- Choisissez Fenêtre > Barres d'outils > Personnaliser. Développez la rubrique voulue dans la liste Commandes, puis faites glisser l'outil à ajouter de la moitié droite de la boîte de dialogue jusqu'au panneau Outils.
- Tout en appuyant sur la touche Alt (Windows) ou Commande (Macintosh), faites glisser l'outil à ajouter de la barre d'outils concernée jusqu'au panneau Outils.
Pour supprimer un outil du panneau Outils, procédez d'une des façons suivantes :
- Choisissez Fenêtre > Barres d'outils > Personneliser, puis faites glisser l'outil à supprimer hors du panneau Outils.
- Tout en appuyant sur la touche Alt (Windows) ou Commande (Macintosh), faites glisser l'outil hors du panneau Outils.
Après avoir supprimé un outil du panneau Outils, vous ne pouvez le rétablir qu'en utilisant la boîte de dialogue Personneliser. Pour plus d'informations, voir Personnelisation des barres d'outils dans l'aide Utilisation de FreeHand.
Pour plus d'informations sur les autres barres d'outils de FreeHand, dont les barres d'outils Texte, Enveloppe, Info, État (Windows), Outils Xtra et Opérations Xtra, voir Utilisation des barres d'outils dans l'aide Utilisation de FreeHand.
Description des applications web
Une application Web est un ensemble de pages qui interagissent avec les utilisateurs, les unes avec les autres, ainsi qu'avec les différentes ressources d'un serveur Web, notamment les bases de données. Familiarisez-vous avec les concepts abordés dans ce chapitre avant de créer vos propres applications Web.
Ce chapitre contient les rubriques suivantes :
- Fonctionnement d'une application Web, page 56
- Création de pages dynamiques, page 61
- Choix d'une technologie de serveur, page 62
- Terminologie du développement d'applications Web, page 63
Une application Web est un site Web dont le contenu des pages est partiellement ou entièrement indéterminé. Le contenu final d'une page est déterminé uniquement lorsque l'utilisateur requiert une page depuis le serveur Web. Le contenu final d'une page variant d'une requête à une autre en fonction des actions de l'utilisateur, ce type de page est appelé page dynamique.
Les applications Web sont construites de manière à répondre à différents types de défis et de problèmes. Cette section décrit les utilisations courantes des applications Web et présente un exemple simple.
Utilisations courantes des applications web
Les applications Web peuvent être utilisées de diverses façons par les visiteurs d'un site et les développeurs, notamment pour :
- Permettre aux utilisateurs de tracer rapidement et facilement des informations sur un site Web riches en contenu.
Ce type d'applications Web permet aux visiteurs du site de rechercher, d'organiser et de parcourir le contenu à leur convenance. Les exemples incluent des réseaux intranet d'entreprises, tels Microsoft MSDN (www.msdn.microsoft.com) et Amazon.com (www.amazon.com).
- Collecter, enregistrer et analyser des données fournies par les visiteurs du site.
Auparavant, les données saisies dans des formulaires HTML étaient envoyées sous forme de courriels aux employés ou sous forme d'applications CGI pour le traitement. Une application Web peut enregistrer les données d'un formulaire directement dans une base de données, ainsi qu'extraire les données et créer des rapports Web pour l'analyse. Les exemples incluent des pages de banque en ligne et de contrôle des stocks, des sondages et des formulaires de commentaires.
- Mettre à jour des sites Web dont le contenu change souvent.
Une application Web évite au créateur d'avoir à mettre fréquemment à jour le code HTML du site. Les fournisseurs de contenu, tels que les rédacteurs en chef, alimentent l'application Web et celle-ci met automatiquement le site à jour. Il peut s'agir de The Economist (www.economist.com) et CNN (www.cnn.com).
Exemple d'application web
Claude, professionnel de la création Web, utilise Macromedia Dreamweaver MX depuis de nombreuses années. Il est chargé de la maintenance des sites intranet et Internet d'une entreprise de taille moyenne comptant 1 000 employés. Christophe, du service des Ressources humaines, lui soumet un jour un problème. Ce service gère un programme de mise en forme qui attribue des points aux employés pour chaque kilomètre parcouru en marchant, en courant ou à VÉLO. Tous les mois, chaque employé doit communiquer à Christophe le nombre total de kilomètres parcourus, par courriel. À la fin du mois, Christophe rassemble tous les courriels et récompense chaque employé avec des prix en espèces, en fonction de leur total de points.
Le problème est que ce programme de mise en forme a suscité de plus en plus d'enthousiasme. Le nombre de participants est si important que Christophe est submergé de courriels à chaque fin de mois. Il demande donc à Julie si une solution Web serait envisageable.
Julie suggère une application Web basée sur un réseau intranet exécutant les tâches suivantes :
- permettre aux employés de saisir leur kilométrage sur une page Web au moyen d'un simple formulaire HTML;
- stocker le kilométrage des employés dans une base de données;
- calculer les points de mise en forme en fonction du kilométrage;
- permettre aux employés de suivre leurs progrès au fil des mois;
- permettre à Christophe d'accéder au total des points en un seul clic à chaque fin de mois.
Claude met rapidement en place l'application à l'aide de Dreamweaver MX 2004, logiciel doté des outils nécessaires à la création rapide et facile de ce type d'applications.
Fonctionnement d'une application web
Une application Web est un ensemble de pages statiques et dynamiques. Une page statique n'est pas modifiée lorsqu'un visiteur la consulte : le serveur Web transmet la page au navigateur qui la sollicite sans la modifier. À l'inverse, une page Web dynamique est modifiée par le serveur avant d'être transmise au navigateur qui la sollicite. C'est pourquoi cette page est dite dynamique.
Vous pouvez par exemple une page pour afficher les résultats du programme de mise en forme et faire en sorte que certaines informations (telles que le nom et les résultats de l'employé) soient déterminées lorsqu'une page est sollicitée par un employé donné.
Traitement des pages web statiques
Un site Web statique comprend un jeu de pages et fichiers HTML associés hébergés sur un ordinateur exécutant un serveur Web.
Un serveur Web est un logiciel qui fournit des pages Web en réponse à des requêtes de navigateurs Web. Une requête de page est généralement émise lorsqu'un utilisateur clique sur un lien d'une page Web, CHOISIT UN SIGNET DANS LE Navigateur ou saisit une URL dans le champ Adresse du navigateur.
Le contenu final d'une page Web statique est déterminé par le creator de la page et n'est pas modifié lorsqu'un utilisateur la demande. Exemple :
<html>
<head>
<title>Page d'informations sur Trio Motors</title>
</head>
<body>
<h1>A propos de Trio Motors</h1>
<p>Trio Motors est leader dans le domaine de la construction automobile.</p>
</body>
</html>
Chaque ligne du code HTML de la page est rédigée par le creator ouant que la page ne soit placée sur le serveur. Ce code HTML n'est pas modifié une fois la page sur le serveur, cette page est dite statique.
Remarque : au sens strict du terme, une page dite « statique » peut ne pas être statique du tout. Une image survolée ou une animation Flash (un fichier SWF), par exemple, peuvent animer une page statique. Cependant, ce guide qualifie une page de statique si elle est adressée au navigateur sans modifications.
Lorsqu'un serveur Web reçoit une requête de page statique, il lit la requête, localise la page et la transmet au navigateur qui l'a sollicitée, tel qu'indiqué dans la figure ci-dessous :
Dans le cas des applications Web, certaines lignes de code ne sont pas déterminées au moment où l'utilisateur sollicite la page. Ces lignes doivent être déterminées via un mécanisme avant que la page ne soit transmise au navigateur. Ce mécanisme est présenté dans la section suivante.
Traitement des pages dynamiques
Lorsqu'un serveur Web reçoit une requête de page Web statique, il transmet directement cette page au navigateur qui la demande. Le serveur Web réagit différemment lorsqu'il reçoit une requête de page dynamique : il transmet la page à un logiciel spécial chargé de terminer la page. Ce logiciel spécial est appelé un serveur d'application.
Le serveur d'application lit le code de la page, termine cette page en fonction des instructions figurant dans le code, puis en retire le code. Il en résulte une page statique que le serveur d'application renvoie au serveur Web, lequel transmet alors cette page au navigateur demandeur. Le navigateur reçoit uniquement du code HTML pur lorsque la page lui est transmise. Voici un aperçu du processus :
Accès à une base de données
Un serveur d'application vous permet de travailler avec des ressources côté serveur telles que les bases de données. Une page dynamique peut, par exemple, ordonner au serveur d'application d'extraire des données de la base de données et de les insérer dans le code HTML de la page. Pour plus d'informations, voir l'annexe Guide du débutant en base de données de l'aide Utilisation de Dreamweaver.
L'instruction d'extraction des données de la base est nommée requête de base de données. Une requête est composée de critères de recherche rédigés dans un langage de base de données appelé SQL (Structured Query Language). La requête SQL est rédigée dans les scripts ou les balises de la page côté serveur.
Un serveur d'application ne peut pas communiquer directement avec une base de données car le format propriétaire de cette dernière rend les données indéchiffrables, de la même manière qu'un document Microsoft Word ouvert dans Bloc-notes ou BBEdit peut être indéchiffrable. Le serveur d'application peut communiquer avec la base de données uniquement via un pilote de base de données, logiciel faisant office d'interprète entre le serveur d'application et la base de données.
Une fois que le pilote a établi la communication, la requête est exécutée par rapport à la base de données et un jeu d'enregistrements est créé. Un jeu d'enregistrements est un ensemble de données extraites d'une ou de plusieurs tables de base de données. Le jeu d'enregistrements est renvoyé au serveur d'application, lequel utilise les données pour terminer la page.
Voici un exemple simple de requête de base de données rédigée en SQL :
SELECT lastname firstname fitpoints
FROM employees
Cette instruction crée un jeu d'enregistrements à trois colonnes et le remplit de lignes contenant le nom, le prénom et les points de mise en forme de tous les employés de la base de données. Pour plus d'informations, voir l'annexe Initiation à SQL de l'aide Utilisation de Dreamweaver.
Voici une illustration du processus d'interrogation de la base de données via des requêtes et de la transmission des données au navigateur :
Vous pouvez utiliser pratiquement tous les types de bases de données avec votre capplication Web, à condition que les pilotes de base de Données appropriés soient installés sur le serveur.
Si vous prévoyez de créer de petites applications peu onéreuses, vous pouvez utiliser une base de données fichier, créée par exemple sous Microsoft Access. Si vous prévoyez de créer des applications stratégiques robustes, vous pouvez utiliser une base de données serveur, créée par exemple avec Microsoft SQL Server, Oracle 9i ou MySQL.
Si votre base de données résidé sur un système autre que votre serveur Web, assurez-vous qu'il existe une connexion rapide entre les deux systèmes pour un fonctionnement efficace et rapide de votre application Web.
Création de pages dynamiques
La création d'une page dynamique consiste à écrire d'abord le code HTML, puis à ajouter les scripts ou les balises côté serveur au code HTML pour rendre la page dynamique. Lorsque vous visualisez le code obtenu, le langage apparaît incorporé dans le code HTML de la page. Par conséquent, ces langages sont appelés langages de programmation HTML intégrés. L'exemple élémentaire ci-dessous utilise le langage CFML (ColdFusion Markup Language):
<html>
<head>
<title>Page d'informations sur Trio Motors</title>
</head>
<body>
<h1>A propos de Trio Motors</h1>
<p>Trio Motors est leader dans le domaine de la construction automobile.</p>
<!-- début des instructions intégré ---->
<cfset département="Service commercial">
<cfoutput>
<p>Nous vous invitons à visiter la page #department#..</p>
</cfoutput>
<!-- fin des instructions intégrés ---->
</body>
</html>
Les instructions intégrées dans cette page exécutent les actions suivantes :
1 Création d'une variable appelée département et assignation de la chaîne "Service commercial" à cette variable. 2 Insertion de la valeur de la variable, "Service commercial", dans le code HTML.
Le serveur d'application renvoie la page suivante au serveur Web :
<html>
<head>
<title>Page d'informations sur Trio Motors</title>
</head>
<body>
<h1>A propos de Trio Motors</h1>
<p>Trio Motors est leader dans le domaine de la construction automobile.</p>
<Nous vous invitons à visiter la page de notre Service commercial.</p>
</body>
</html>
Le serveur Web transmet la page au navigateur demandeur, lequel l'affiche de la manière suivante :
Trio Motors est leader dans le domaine de la construction automobile.
Nous vous invitons à visiter la page Service commercial.
Choisissez un langage de script ou de balise en fonction de la technologie de votre serveur. Les langages les plus employés pour les cinq technologies de serveur prises en charge par Dreamweaver MX 2004 sont :
| Technologie de serveur | Language |
| ColdFusion | CFML (ColdFusion Markup Language) |
| ASP.NET | Visual Basic C# |
| Pages ASP (Active Server Pages) | VBScript JavaScript |
| JSP (JavaServer Pages) | Java |
| PHP | PHP |
Pour plus de détails, voir Choix d'une technologie de serveur, page 62.
Dreamweaver peut créer les scripts ou les balises côté serveur nécessaires au bon fonctionnement de vos pages. Vous pouvez également les rédiger manuellement dans l'environnement de codage de Dreamweaver.
Choix d'une technologie de serveur
Dreamweaver vous permet de créer des applications Web à partir de l'une des cinq technologies de serveur : ColdFusion, ASP.NET, ASP, JSP ou PHP. Chacune de ces technologies correspond à un type de document dans Dreamweaver. Le choix d'une technologie pour vos applications Web repose sur plusieurs facteurs, notamment votre niveau de connaissance des différents langages de script et le serveur d'application que vous envisagez d'utiliser.
Si vous n'avez jamais créé d'applications Web ou d'applications en général, vous préférez sûrement utiliser ColdFusion en raison de son environnement de script serveur convivial intégré à Dreamweaver. Si vous êtes déjà familiarisé avec les autres technologies de serveur, JSP, PHP, ASP ou ASP.NET par exemple, Dreamweaver les prend également en charge.
Le besoin de la technologie de serveur dépend également du serveur d'application que vous souhaitez utiliser pour l'application Web. Un serveur d'application est un logiciel qui aide un serveur Web à TRAITER des pages Web contenant des scripts ou des balises côté serveur. Par exemple, si vous disposez de ColdFusion MX Server, vous pourriez besoin de ColdFusion comme technologie de serveur. Si vous avez au serveur Microsoft Internet Information Server 5 (IIS) avec la plate-forme .NET, vous pourriez besoinir ASP. NET. Sélectionnez PHP si vous avez à un serveur Web avec un serveur d'application PHP. En revanche, choisissez JSP pour les serveurs Web avec serveur d'application JSP, tel que Macromedia JRun.
Vous trouvez une version de ColdFusion MX destinée aux développeurs sur le CD Studio MX 2004 (version Windows uniquement) et sur le site Web de Macromedia à l'adresse suivante : www.macromedia.com/fr/software/coldfusion/.
Pour plus d'informations, voir Installation d'un serveur d'application de l'aide Utilisation de Dreamweaver.
Pour en savoir plus sur ColdFusion, voir Utilisation de ColdFusion (disponible via le menu Aide de Dreamweaver) ou visitez le site Web de Macromedia à l'adresse suivante: www.macromedia.com/fr/software/coldfusion/.
Pour en savoir plus sur ASP.NET, visitez le site Web Microsoft à l'adresse suivante: www.asp.net/ (en anglais).
Pour en savoir plus sur ASP, visitez le site Web Microsoft à l'adresse suivante : msdn. microsoft. com/library/psdk/iisref/aspguide. htm (en anglais).
Pour en savoir plus sur JSP, visitez le site Web de Sun Microsystems à l'adresse suivante : java. sun. com/products/jsp/ (en anglais).
Pour en savoir plus sur PHP, visitez le site Web de PHP à l'adresse suivante: www.php.net/ (en anglais).
Terminologie du développement d'applications web
Cette section regroupe la définition des termes relatifs aux applications Web liésquement utilisés.
Un serveur d'application est un logiciel qui aide un serveur Web à traiter des pages Web contenant des scripts ou des balises côté serveur. Lorsqu'une page de ce type est requise par le serveur, le serveur Web transmet cette page au serveur d'application afin qu'il la traite avant de l'envoyer au navigateur. Pour plus de détails, voir Fonctionnement d'une application Web, page 56.
Les serveurs d'application les plus utilisés sont Macromedia ColdFusion, Macromedia JRun Server, la plate-forme .NET de Microsoft, IBM WebSphere et Apache Tomcat.
Une base de données est un ensemble de données stockées sous forme de tables. Chaque ligne d'une table correspond à un enregistrement et chaque colonne correspond à un champ de l'enregistrement, tel qu'illustré dans l'exemple ci-dessous.
Enregistrements (lignes)
Un pilote de base de données est un logiciel qui agit comme un interprète entre un serveur d'application et une base de données. Les données d'une base de données sont stockées dans un format propriétaire. Un pilote de base de données permet à l'application Web de lire et de manipuler des données qui, sans cela, seraient indéchiffrables.
Un système de gestion de base de données (SGBD ou système de base de données) est un logiciel utilisé pour créer et manipuler des bases de données. Les systèmes de base de données les plus courants sont Microsoft Access, Oracle 9i et MySQL.
Une requête de base de données désigne l'opération permettant d'extraire un jeu d'enregistrements d'une base de données. Une requête est constituée de critères de recherche exprimés en langage de base de données appelé SQL. La requête peut, par exemple, spécifier que seules certaines colonnes ou certains enregistrements doivent être inclus dans le jeu d'enregistrements.
Une page dynamique est une page Web qui est personnalisée par un serveur d'application avant qu'elle ne soit transmise à un navigateur. Pour plus de détails, voir Fonctionnement d'une application Web, page 56.
Un jeu d'enregistrements est un ensemble de données extraites d'une ou plusieurs tables de base de données, comme l'illustre l'exemple suivant :
Table de quelques enregistrements
Une base de données relationnelle est une base de données contenant plusieurs tables qui partagent des données. La base de données suivante est relationnelle car deux tables partagent la colonne DepartmentID.
Une technologie de serveur est une technologie utilisée par un serveur d'application pour modifier des pages dynamiques lors de l'exécution.
L'environnement de développement de Dreamweaver prend en charge les technologies de serveur suivantes :
Macromedia ColdFusion - Microsoft ASP.NET Pages ASP (Active Server Pages) de Microsoft Pages JSP (JavaServer Pages) de Sun PHP : Hypertext Preprocessor (PHP)
Voulez égallement utiliser l'environnement de codage de Dreamweaver pour développer des pages destinées à une technologie de serveur quelconque non répertoriée ci-dessus.
Une page statique est une page Web qui n'est pas modifiée par un serveur d'application avant qu'elle ne soit envoyée à un navigateur. Pour plus de détails, voir Traitement des pages Web statiques, page 57.
Une application Web est un site Internet dont le contenu des pages constitutives est partiellement ou entièrement indéterminé. Le contenu final de ces pages est déterminé uniquement lorsque l'utilisateur requiert une page depuis le serveur Web. Le contenu final d'une page variant d'une requête à une autre en fonction des actions de l'utilisateur, ce type de page est appelé page dynamique.
Un serveur Web est un logiciel qui renvoie des pages Web en réponse aux requêtes de navigateurs Web. Une requête de page est générée lorsqu'un utilisateur clique sur un lien d'une page Web, besoin un signet dans le navigateur ou saisit une URL dans le champ Adresse du navigateur.
Les serveurs Web les plus courants sont Microsoft Internet Information Server, Microsoft Personal Web Server, Apache HTTP Server, Netscape Enterprise Server et Sun ONE Web Server.
Installation d'un serveur web
Pour développer et tester des pages Web dynamiques, vous avez besoin d'un serveur Web opérationnel. Ce chapitre explique aux utilisateurs Windows comment installer et utiliser un serveur Web Microsoft sur un ordinateur local.
Si vous travailliez sous Windows et que vous souhaitez développer des sites ColdFusion, vous pouvez utiliser le serveur Web inclus dans l'édition développement du serveur d'application ColdFusion MX. Vous pouvez l'instruire et l'utiliser gratuitement. Pour plus d'informations, voir Chapitre 6, Configuration d'un exemple de site ColdFusion, page 73.
Si vous utilisez un Macintosh, vous pouvez utiliser un serveur Web sur un ordinateur réseau ou un serveur d'hébergement Web. Si vous souhaitez développer des applications PHP, vous pouvez utiliser le serveur Web Apache déjà installé sur votre Macintosh.
Ce chapitre contient les sections suivantes :
Bien démarrer, page 68 Installation de Personal Web Server, page 68 Installation d'Internet Information Server, page 69 - Test de PWS ou IIS, page 69 - Test du serveur Web Macintosh (développeurs PHP), page 70 - Fonctions élémentaires du serveur Web, page 70
Remarque: Macromedia ne fournit pas de support technique pour les logiciels tiers tels que Microsoft Internet Information Server (IIS). Si vous avez besoin d'aide pour un produit Microsoft, contactez le support technique de Microsoft.
Bien démarrer
Si vous utilisez Windows, vous pouvez installer et écycler les serveurs Web suivants sur votre ordinateur : Microsoft Personal Web Server (PWS) ou Internet Information Server (IIS), une version complète de PWS. Vous pouvez également installer le serveur Web sur un ordinateur Windows en réseau de façon à ce que d'autres développeurs de votre équipe puissent l'utiliser.
Si vous travailliez sous Windows et que vous souhaitez développer des applications ColdFusion, vous pouvez également utiliser le serveur Web inclus dans l'édition développement de ColdFusion MX. Pour plus d'informations, voir Chapitre 6, Configuration d'un exemple de site ColdFusion, page 73.
PWS ou IIS sont peut-être déjà installés sur votre ordinateur. Parcourez votre arborescence pour vérifier si elle comporte un dossier C:\Inetpub ou D:\Inetpub. PWS et IIS créent ces dossiers lors de l'installation.
Sieldomecde de la maniere suivante :
Windows 98 Copiez sur votre disque dur le fichier d'installation PWS que vous trouvrez sur le CD Windows 98. Ce fichier se trouve dans le dossier Add-Ons/PWS. Installez ensuite le serveur Web. Pour obtenir des instructions, voir Installation de Personal Web Server, page 68.
Windows 2000 Installez IIS. Pour plus d'informations, voir Installation d'Internet Information Server, page 69.
Windows XP Professionnel Installez IIS. Pour plus d'informations, voir Installation d'Internet Information Server, page 69.
Si vous utilisez un Macintosh et êtes intéressé par le développement d'applications PHP, vous pouvez utiliser le serveur Web Apache déjà installé sur votre Macintosh. Pour plus d'informations, voir Test du serveur Web Macintosh (développeurs PHP), page 70.
Installation de personal web server
Les utilisateurs de Windows 98 doivent installer PWS. Si vous utilisez Windows 2000 ou Windows XP Professionnel, installez IIS à la place. Pour plus d'informations, voir Installation d'Internet Information Server, page 69.
Vous pouvez installer PWS sur le même système Windows 98 qui exécute Macromedia Dreamweaver MX 2004. Assurez-vous que le système dispose de Microsoft Internet Explorer 4.01 ou d'une version ultérieure, sinon vous ne pourrez pas installer PWS.
Pour installer PWS :
1 Double-cliquez sur le fichier d'installation de PWS du CD-ROM de Windows 98. 2 Suivez les instructions de l'assistant d'installation. 3 Lorsque celui-ci vous demande quel est votre réseau personnel de publication Web par défaut, acceptez le réseau par défaut : C:\Inetpub\wwwroot 4 Cliquez sur Terminer pour achever le processus d'installation. Vou pouvez tester le serveur Web après l'avoir installé. Pour plus d'informations, voir Test de PWS ou IIS, page 69.
Installation d'internet information server
Les utilisateurs de Windows 2000 et Windows XP Professionnel doivent installer IIS (Internet Information Server). Si vous utilisez Windows 98, installez PWS à la place. Pour plus d'informations, voir Installation de Personal Web Server, page 68.
Si vous utilisez Windows 2000 ou Windows XP Professionnel, vérifiez si IIS est déjà installé et en cours d'exécution sur votre système. Pour cela, recherchez le dossier C:\Inetpub. S'il n'est pas présent, il est probable qu'IIS ne soit pas installé sur votre système.
Pour installer IIS sous windows 2000 et XP professionnel :
1 Sélectionnez Démarrer > Paramètres > Panneau de configuration > Ajouter ou supprimer des programmes ou Démarrer > Panneau de configuration > Ajout/Suppression de programmes. 2 Sélectionnez Ajouter/Supprimer des composants Windows. 3 Sélectionnez Internet Information Services (IIS) et cliquez sur suivant. 4 Suivez les instructions d'installation.
Vous pouvez tester le serveur Web après l'avoir installé. Voir Test de PWS ou IIS, page 69.
Test de PWS ou IIS
Pour tester le serveur Web, créez une page HTML simple intitulée monFichierTest.html, puis enregistrez-la dans le dossier Inetpub\wwwroot de l'ordinateur exécutant le serveur Web. Cette page HTML peut comporter une seule ligne, par exemple :
Mon serveur Web fonctionne.
Ouvrez ensuite une page test dans un navigateur Web avec une requête HTTP. Si PWS ou IIS est exécuté sur votre ordinateur local, entrez l'URL suivante dans votre navigateur Web :
http://localhost/monFichierTest.html
Si PWS ou IIS est exécuté sur un ordinateur en réseau, utilisez le nom de l'ordinateur en réseau comme nom de Domaine. Par exemple, si le nom de l'ordinateur qui exécute PWS ou IIS est rockford-pc, entrez l'URL suivante dans votre navigateur :
http://rockford-pc/monFichierTest.html
Remarque : Pour plus d'informations sur les noms d'ordinateurs, voir Fonctions élémentaires du serveur Web, page 70.
Si le navigateur affiche votre page, le serveur Web est exécuté normalement.
Si le navigateur ne peut pas afficher la page, assurez-vous que le serveur est en cours d'exécution. Par exemple, pour PWS, double-cliquez sur l'icône du serveur Web de la barre d'état système (l'icône ressemble à une main tenant une page Web). La boîte de dialogue de Personal Web Manager s'affiche. Si le panneau Publication indique que votre publication Web est désactivée, cliquez sur le bouton Démarrer, puis ressaisissez l'URL appropriée dans votre navigateur.
Si la page ne s'affiche toujours pas, assurez-vous que votre page test est placée dans le dossier Inetpub\wwwroot et compte une extension. htm ou. html.
Test du serveur web macintosh (développeurs PHP)
Vous pourriez utiliser le serveur Web Apache déjà installé sur votre Macintosh pour développer des applications PHP.
Pour tester le serveur, créez une page HTML simple appelée monFichierTest.html et enregistrez-la dans le dossier /Users/votre_nom/utilisateur/Sites/ de votre Macintosh (ou votre_nom/utilisateur est votre nom d'utilisateur Macintosh). Cette page HTML peut comporter une seule ligne, par exemple :
Mon serveur Web fonctionne.
Ouvrez ensuite une page test dans un navigateur Web avec une requête HTTP en y entrant l'URL suivante :
http://localhost/~votre_nom/utilisateur/monFichierTest.html
Remarque: Par défaut, le serveur Apache s'exécute sur le port 80.
Si le navigateur affiche votre page, le serveur Web est exécuté normalement. Si le navigateur ne peut pas afficher la page, assurez-vous que le serveur est en cours d'exécution. Pour cela, affichez les préférences du système et vérifiez le panneau de préférences de partage. L'option Partage Web personnel doit être activée.
Par défaut, le serveur Web Apache ne fonctionne pas avec PHP; vous devez d'abord le configurer. Pour plus d'informations, voir Configuration du système (PHP) dans le guide Bien démarrer avec Dreamweaver (disponible via le menu Aide de Dreamweaver).
Fonctions élémentaires du serveur web
Un serveur Web est un logiciel qui fournit des pages Web en réponse à des requêtes de navigateurs Web. Un serveur Web est parfois appelé serveur HTTP.
Supposons que vous utilisez IIS pour développer des applications Web. Le nom par défaut de votre serveur Web est le nom de votre ordinateur. Vous pouvez modifier le nom du serveur en modifiant celui de votre ordinateur. Si votre ordinateur n'a pas de nom, le serveur utilise le mot « localhost ».
Le nom du serveur correspond au dossier racine du serveur, lequel est généralement (sur un ordinateur fonctionnant sous Windows) : C:\Inetpub\wwwroot. Vous pouvez ouvrir une page Web quelconque stockée dans le dossier racine en entrant l'URL suivante dans un navigateur en cours d'exécution sur votre ordinateur.
http://votre_nomServeur/votre_nom_fichier
Par exemple, si le nom du serveur est mer_noire et qu'une page Web intitulée soleil.html est stockée dans C:\Inetpub\wwwroot\, vous pouvez ouvrir cette page en tapant l'URL suivante dans le navigateur en cours d'exécution sur l'ordinateur local :
Remarque : Pensez à utiliser des barres obliques et non des barres obliques inverses dans les URL.
Veuillez également ouvrir une page Web quelconque stockée dans un sous-dossier du dossier racine en spécifiant ce sous-dossier dans l'URL. Par exemple, supposons que le fichier soleil. html est stocké dans un sous-dossier nommé gamelan, de la façon suivante :
C:\Inetpub\wwwroot\gamelan\soleil.html
Vous pouvez ouvrir cette page en entrant l'URL suivante dans un navigateur en cours d'exécution sur votre ordinateur :
http://mer_noire/gamelan/soleil.html
Lorsque le serveur Web est exécuté sur tout ordinateur, vous pouvez remplacer le nom du serveur par « localhost ». Par exemple, les URL suivantes ouvrent la même page dans un navigateur :
http://mer_noire/gamelan/soleil.html
http://localhost/gamelan/soleil.html
Remarque : Vous pouvez aussi utiliser une autre expression à la place du nom du serveur ou de localhost : 127.0.0.1 (par exemple, http://127.0.0.1/gamelan/soleil.html).
Configuration d'un exemple de site coldfusion
Ce chapitre vous guide tout au long du processus de configuration de l'environnement de développement d'un exemple de site qui utilise Macromedia ColdFusion MX. Au cours de l'installation, ColdFusion MX, qui contient un serveur Web intégré, créé un réseau CFusionMX sur le disque dur principal de votre ordinateur (équivalent au réseau Inetpub pour les utilisateurs d'IIS). Une fois que vous avez effectué la configuration spécifique dans ce chapitre, vous êtes prêt à suivre les didactériels de la seconde partie du manuel.
Si vous souhaitez utiliser un serveur Web différent avec ColdFusion, assurez-vous que le serveur Web est installé sur tout système avant d'installer ColdFusion. Pour plus d'informations, voir Chapitre 5, Installation d'un serveur Web, page 67.
Si vous êtes développeur ASP, ASP.NET, JSP ou PHP, vous pouvez trouver des instructions rapides de configuration de l'environnement de développement dans le manuel Démarrage avec Dreamweaver (Aide > Démarrage et didacticiels). Des instructions plus détaillées sont également disponibles dans l'aide de Dreamweaver (Aide > Utilisation de Dreamweaver).
Remarque: L'exemple de base de données mentionné dans les chapitres de démarrage de Dreamweaver avec ColdFusion, ASP, ASP.NET, JSP et PHP est différent de l'exemple mentionné dans ce chapitre.
Aide-mémoire pour la configuration à l'intention des développeurs coldfusion
Pour configurer une application Web ColdFusion, vous devez configurer votre système, définir un site Macromedia Dreamweaver MX 2004, puis vous connecter à une base de données. Cette section fournit une liste de contrôle pour chaque tâche. Les procédures sont décrites dans le reste du chapitre.
Configurez votre système :
1. Installez le serveur d'application ColdFusion. Ce serveur contient un serveur Web. 2. Créez un dossier racine. 3. Testez le serveur d'application (facultatif).
Définissez un site dreamweaver :
Définissez un dossier local. Définissez un dossier distant.
3 Définissez un dossier dans lequel traiter les pages dynamiques.
Connectez-vous à la base de données :
1 Copiez l'exemple de base de données sur votre ordinateur ou copiez l'exemple de base de données sur l'ordinateur distant si vous disposez d'une configuration de serveur distant.
2 Créez une source de données ColdFusion dans le programme ColdFusion Administrator.
3 Visualisez la connexion dans Dreamweaver.
Configuration du système
La première étape de la définition de votre environnement de développement consiste à configurer votre système pour qu'il exécute ColdFusion MX. Après avoir installé ColdFusion, vous pouvez créer une page de test pour vérifier que le serveur Web et le serveur d'application fonctionnent correctement.
Installation de ColdFusion MX
Le serveur ColdFusion MX Server Developer Edition est disponible pour les systèmes Windows, Linux, Solaris et HP-UX et est fourni avec les outils Studio MX 2004. Pour plus d'informations sur la configuration requise pour l'installation de ColdFusion MX, veuillez visiter le site www.macromedia.com/go/sysreqs.
Remarque : Les différences suivantes sont à noter entre ColdFusion MX Developer Edition et les versions Standard et Enterprise : Il est gratuit dans le cadre d'une utilisation non commerciale pour développer et tester des applications Web sur un hôte local et une adresse IP distante. La licence accordée ne permet pas d'effectuer le déploiement. Il inclut toutes les fonctions des versions Standard et Enterprise à l'exception de Macromedia ClusterCATS. APRÈS 30 jours, il prend en charge uniquement les requêtes provenant d'une seule adresse IP. Cependant, vous pouvez toujours l'utiliser pour le développement et le test, il n'expire pas.
ColdFusion MX n'est pas installé automatiquement lorsque vous installez les outils Studio MX 2004. Vous devez installer le logiciel séparément. Nous vous recommandons de consulter les instructions d'installation de ColdFusion MX avant et pendant l'installation. Pour plus d'informations, voir Installation et utilisation de ColdFusion MX dans l'aide Utilisation de ColdFusion (disponible à partir du menu Aide de Dreamweaver).
1 Fermez toutes les applications ouvertes. 2 Le cas échéant, connectez-vous au système Windows en utilisant le compte Administrateur. 3 Insérez le CD Macromedia Studio MX 2004. Lorsque l'écran d'installation s'affiche, cliquez sur le bouton d'installation du serveur ColdFusion MX. 4 Suivez les instructions d'installation.
Remarque : Vous n'avez pas besoin de fournir de numéro de série lorsque vous installez le serveur ColdFusion MX Server Developer Edition.
Au cours de l'installation, assurez-vous d'effectuer les tâches suivantes :
- Sélectionnez l'option de serveur Web intégré (pour opérations de développement uniquement) dans la fenêtre de sélection de serveur Web. ColdFusion est ainsi configuré pour utiliser le serveur Web intégré, qu'un autre serveur Web tel que Microsoft IIS.
- Entrez un mot de passe RDS au cours de la configuration du service RDS. Le service ColdFusion Remote Development Service (RDS) permet au développement qui utilise les outils Macromedia de se connecter à distance aux serveurs à des fins de développement. Le mot de passe RDS peut être identique au mot de passe d'administration de ColdFusion MX. Pour plus d'informations, voir A propos de la sécurité dans ColdFusion MX dans l'aide Utilisation de ColdFusion (disponible à partir du menu Aide de Dreamweaver).
Les utilisateurs de Macintosh peuvent avoir recours à un service d'hébergement Web offrant une solution ColdFusion, ou bien installer ColdFusion sur un ordinateur Windows, Linux, Solaris ou HP-UX distant exécutant un serveur Web. Pour plus d'informations, voir Configuration d'une application Web dans l'aide Utilisation de Dreamweaver.
Remarque : Les utilisateurs de Macintosh peuvent aussi installer ColdFusion MX sur un ordinateur Mac OS X exécutant un serveur J2EE tel que JRun ou Tomcat. Pour plus d'informations, voir le site Web de Macromedia à l'adresse : www.macromedia.com/go/coldfusion_macintosh/. Le processus d'installation est complexe et Dreamweaver n'a pas été testé avec ColdFusion MX sur Macintosh. En outre, la connexion d'un serveur ColdFusion MX exécuté sur Macintosh vers des systèmes de base de données tels que MySQL peut s'avérer difficile.
Création d'un dossier racine pour votre application
Après avoir installé le logiciel d'application, vous devez accéder à un dossier racine pour l'application sur l'ordinateur exécutant le serveur Web. Assurez-vous que le dossier est publié par le serveur Web, c'est-à-dire qu'il transmette les fichiers de ce dossier et de ses sous-dossiers en réponse à une requête HTTP d'un navigateur Web. Par exemple, sur un ordinateur exécutant le serveur Web intégré ColdFusion MX, tout fichier du dossier CFusionMX\wwwroot ou de ses sous-dossiers peut être transmis à un serveur Web.
Dans le dossier CFusionMX\wwwroot, créez un dossier racine appelé trio_motors.
Lorsque vous suivrez les didacticiels de la seconde partie du manuel, vous enverrez vos pages ColdFusion dans ce dossier afin que le serveur d'application puisse les traiter et envoyer des données dynamiques au navigateur.
Pour plus d'informations, voir Configuration d'une application Web dans l'aide Utilisation de Dreamweaver.
Test du serveur d'application
Vous pouvez vérifier que ColdFusion s'exécute correctement en créant une page test que vous affichez dans un navigateur.
Pour tester le serveur d'application :
1 Dans tout éditeur et texte (tel que le Bloc-notes), créez un fichier en texte brut appelé test.cfm. 2 Enregistrez le fichier test.cfm dans le dossier racine trio_motors que vous avez créé dans la section précédente. Gardez à l'esprit que ce dossier doit se trouver dans le dossier publié par le serveur Web, CFusionMX\wwwroot. 3 Saisissez le code suivant dans le fichier test.cfm :
<html>
<head>
<title>Test du serveur d'application CF MX</title>
</head>
<body>
Date du jour : <CFOUTPUT>#DateFormat(Now(), "dddd, m/d/yy")#</CFOUTPUT>
</body>
</html>
Ce code affiche la date à laquelle la page a été traitée sur le serveur.
4 Enregistrez le fichier après avoir saisi le code. 5 Dans votre navigateur Web, tapez l'URL de votre page de test, puis appuyez sur Entrée. Par défaut, ColdFusion MX utilise le port de serveur Web 8500. L'URL est la suivante : http://localhost:8500/trio_motors/test.cfsm
La page de test s'ouvre et affiche la date actuelle.
Si la page ne fonctionne pas correctement, recherche les erreurs potentielles suivantes :
- Le fichier ne porte pas l'extension .cfm.
- Le chemin d'accès de la page (c:\CFusionMX\wwwroot\trio_motors\test.cfm) a été saisi dans la zone de texte Adresse du navigateur au lieu de son URL (par exemple, http://localhost:8500/trio_motors/test.cfm).
Si vous tapez un chemin de fichier dans le navigateur (comme vous en avez peut-être l'habitude avec les pages HTML normales), vous contournez le serveur Web et le serveur d'application. Notre page n'est alors jamais traitée par le serveur.
- L'URL contient une faute de frappe. Recherchez les erreurs éventuelles et vérifiez que le nom de fichier n'est pas suivi d'une barre oblique, comme dans l'exemple suivant: http://localhost:8500/trio_motors/test.cfm/. Le code de la page contient une faute de frappe.
Définition d'un site dreamweaver
Dans Dreamweaver, le terme site peut se rapporter aussi bien à un site Web qu'au dossier local dans lequel sont conservés tous les documents apparentant à un site Web. Vous devez définir ce dossier avant de créer le site Web. Un site Dreamweaver organise tous les documents associés à votre site Web et vous permet de suivre et de gérer les liens, de gérer et de partager les fichiers, ainsi que de transférer vos fichiers de site à un serveur Web.
Un site Dreamweaver se compose de trois parties, selon votre environnement de travail et le type de site Web en développement :
Le dossier local correspond à votre réseau de travail. Dreamweaver désigne ce dossier comme votre site local. Le dossier local est généralement un dossier qui se trouve sur votre disque dur.
Le dossier distant est le réseau dans lequel sont stockés les fichiers, selon votre environnement, que vous réservez aux évaluations, à la production, à la collaboration, etc. Dreamweaver désigne ce dossier comme votre site distant. Le dossier distant est un dossier qui se trouve sur l'ordinateur exécutant le serveur Web.
Le dossier des pages dynamiques (dossier du serveur d'évaluation) est l'emplacement dans lequel Dreamweaver traite les pages dynamiques. Ce dossier est généralement le même que le dossier distant.
Vous pouvez définir un site Dreamweaver à l'aide de l'assistant de définition d'un site, qui vous guide tout au long de la procédure de configuration, ou à l'aide des paramètres avancés de définition du site, qui vous permettent de configurer individuellement des dossiers locaux, distants et d'évaluation, si nécessaire.
Les sections suivantes décrivent comment utiliser les paramètres avancés de définition du site dans Dreamweaver. Si vous ne maîtrisez pas Dreamweaver, nous vous recommandons d'utiliser l'assistant de définition d'un site en premier lieu. Pour plus d'informations, voir Utilisation de l'assistant de définition d'un site Dreamweaver dans l'aide Utilisation de Dreamweaver.
Définition d'un dossier local
Vous devez définir un dossier local Dreamweaver pour chaque site Web créé. Ce dossier local est le dossier du disque dur dans lequel seront stockées les copies de travail des fichiers du site. Ce dossier local est indispensable au bon fonctionnement de certaines fonctions de Dreamweaver.
La définition d'un dossier local vous permet également de : gérer vos fichiers et de les transférer vers ou depuis le serveur Web à l'aide de différentes méthodes de transfert de fichiers.
Yououpouz maintenant créer le dossier local pour l'exemple du site Web Trio Motors.
Pour créer le dossier local d'exemple du site :
1 Avant de lancer Dreamweaver, créez sur le disque dur un dossier appelé trio_motors dans lequel seront stockées les copies de travail des fichiers. 2 Dans le dossier trio_motors, créez trois sous-dossiers : flash, png et images. Vous n'utiliserez pas ces dossiers tout de suite, mais ils seront nécessaires pour suivre les didactériels suivants de ce manuel. 3 Lancez Dreamweaver, puis sélectionnez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s'affiche.
4 Cliquez sur le bouton Nouveau, puis sélectionnez Site. La boîte de dialogue Définition du site s'ouvre.
5 Si l'assistant (onglet Elémentaire) s'affiche, cliquez sur l'onglet Avancé et sélectionnez Infos locales dans la liste Catégorie (sélection par défaut). 6 Dans la zone de texte Nom du site, entrez Trio Motors. 7 Dans la zone de texte Dossier racine local, indiquez le dossier trio_motors créé à l'étape 1. Vous pouvez cliquer sur l'icône de dossier pour rechercher et sélectionner le dossier ou entrer le chemin d'accès dans la zone de texte. 8 Dans la zone de texte Dossier des images par défaut, indiquez le dossier d'images créé à l'étape 2. Vous pouvez cliquer sur l'icône de dossier pour rechercher et sélectionner le dossier ou entrer le chemin d'accès dans la zone de texte.
Pour le moment, laissez ouverte la boîte de dialogue Définition du site. Vous devez ensuite définir un dossier distant.
Définition d'un dossier distant
Après avoir défini un dossier local, vous pouvez définir un dossier distant pour le site Dreamweaver. Le dossier distant correspond au dossier racine (trio_motors) créé pour l'application Web dans Création d'un dossier racine pour votre application, page 75. Il porte le même nom que le dossier local car votre site distant sera une copie exacte de votre site local. Cela signifie que les fichiers et les sous-dossiers que vous transférerez dans votre dossier distant seront des copies des fichiers et des sous-dossiers créés localement.
Pour définir un dossier distant :
1 Dans la boîte de dialogue Définition du site, sélectionnez Infos distantes dans la liste Catégorie. La boîte de dialogue Infos distantes s'affiche. 2 Dans le menu déroulant Accès, sélectionnez l'une des options suivantes : Local/Réseau, FTP ou RDS.
Votre choix dépend de la méthode que vous souhaitez utiliser pour le transfert des fichiers entre le dossier local et le dossier distant.
Si vous avez configuré ColdFusion MX sur votre ordinateur local ou sur un ordinateur distant en réseau, vous devez désigner Local/Réseau comme méthode d'accès.
Remarque: Si vous souhaitez utiliser RDS, le dossier distant doit être situé sur un ordinateur exécutant ColdFusion.
Dreamweaver prend également en charge les méthodes d'accès aux bases de données SourceSafe et WebDAV. Pour plus d'informations, voir Définition des options de la catégorie Infos distances dans l'aide Utilisation de Dreamweaver.
Après avoir sélectionné une méthode d'accès, définissez les options d'accès correspondantes.
Les options d'accès illustrées ci-dessous définissent le dossier racine, trio_motors, comme dossier distant. Dans ce cas, le dossier trio_motors se trouve dans le dossier CFusionMX\wwwroot, le dossier publié sur le serveur Web intégré.
Pour plus d'informations, voir Création d'un dossier racine pour votre application, page 75 ou Configuration d'un dossier Infos distances dans l'aide Utilisation de Dreamweaver.
Pour le moment, laissez ouverte la boîte de dialogue Définition du site. Vous devez définir un dossier pour traiter les pages dynamiques.
Définition du dossier de traitement des pages dynamiques
Après avoir défini le dossier distant dans Dreamweaver, vous devez indiquer le dossier dans lequel les pages dynamiques pourront être traitées. Dreamweaver utilise ce dossier, le dossier du serveur d'évaluation, pour générer du contenu dynamique et se connecter à des bases de données pendant que vous travaillez.
Normalement, vous spécifiez le dossier racine créé sur le serveur Web comme dossier du serveur d'évaluation. Le dossier du serveur d'évaluation doit résider sur le serveur Web.
Remarque : Le dossier racine peut se couvrir sur votre ordinateur local ou sur un ordinateur distant, en fonction de l'emplacement d'exécution du serveur Web. Dans certains cas, les utilisateurs sélectionnent un dossier racine sur le serveur Web local en tant que dossier du serveur d'évaluation et un autre dossier racine sur le serveur Web distant en tant que dossier distant. Les utilisateurs peuvent ainsi tester les pages dynamiques localement avant de les charger sur le serveur distant en accès public.
Pour spécifier un dossier dans lequel traiter les pages dynamiques :
1 Dans la boîte de dialogue Définition du site, Sélectionnez Serveur d'évaluation dans la liste Catégorie.
La boîte de dialogue Serveur d'évaluation s'affiche.
2 Sélectionnez ColdFusion dans le menu déroulant Modèle de serveur. 3 Sélectionnez une méthode d'accès dans le menu déroulant Accès. Si vous avez sélectionné Local/Réseau à la section précédente, sélectionnez Local/Réseau. 4 Acceptez les paramètres par défaut du dossier Serveur d'évaluation ou entrez d'autres paramètres.
Par défaut, Dreamweaver suppose que le dossier du serveur d'évaluation et le dossier distant constituent un seul et même dossier. Si vous avez défini un dossier distant dans la catégorie Infos distances de la boîte de dialogue Définition du site et qu'un serveur d'application réside sur le système qui comprend le dossier distant (par exemple votre ordinateur local), acceptez les paramètres par défaut de la catégorie Serveur d'évaluation.
Dans la zone de texte Préfixe de l'URL, entrez l'URL que vous devez saisir dans votre navigateur pour ouvrir ce site Web mais n'indiquez pas de nom de fichier.
Par exemple, si l'URL de votre application est http://www.macromedia.com/trio_motors/index.cfm, entrez le préfixe d'URL suivant: http://www.macromedia.com/trio_motors/.
Si Dreamweaver est exécuté sur le même système que le serveur Web intégré ColdFusion, vous pouvez utiliser le terme localhost:8500 pour représenter votre nom de domaine. Supposons que votre site Web possède l'URL suivante :
http://buttercup_pc/trio_motors/index.cfm
Entrez le préfixe d'URL suivant :
Pour plus d'informations, voir Définition du préfixe d'URL dans l'aide Utilisation de Dreamweaver.
6 Vérifiez vos paramètres de serveur d'évaluation.
Les paramètres de serveur d’évaluation illustrés ci-dessous s’appliquent à un site Dreamweaver qui utilise ColdFusion MX et le serveur Web intégré ColdFusion sur un ordinateur Windows XP.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue Serveur d'évaluation.
7 Cliques sur OK, puis sur Terminer.
Dreamweaver ajoute le nouveau site à votre liste de sites dans le panneau Fichiers.
Connexion à l'exemple de base de données
Cette section explique comment établir une connexion à un exemple de base de données Microsoft Access.
Avant de commencer cette section, vous devez copier l'exemple de base de données sur votre ordinateur. Pour localiser l'exemple de base de données, insérez le CD Studio MX 2004 dans votre ordinateur et désélectionnez l'option d'exploration du contenu du CD dans l'angle inférieur droit de l'écran d'installation. L'exemple de base de données trio.mdb se trouve dans le dossier d'examples Samples avec tous les fichiers d'exemple nécessaires pour suivre les didacticiels de la seconde partie du manuel.
Si vous utilisez Windows et que votre serveur Web s'exécute sur le même ordinateur que Dreamweaver, recherchez l'exemple de base de données et copiez-le sur votre disque dur. Vous pouvez stocker le fichier dans le dossier de votre choix sur votre ordinateur ou créez un nouveau dossier. Par exemple, vous pouvez créez un dossier appelé Données dans votre dossier CFusionMX\wwwroot et stocker l'exemple de base de données à cet endroit.
Si vous utilisez un Macintosh, voir la section suivante, Configuration de la base de données (configuration de serveur distant uniquement).
Pour plus d'informations sur les bases de données et les connexions aux bases de données, voir l'annexe Guide du débutant en base de données dans l'aide Utilisation de Dreamweaver.
Configuration de la base de données (configuration de serveur distant uniquement)
Cette section s'applique uniquement si vous disposez d'une configuration de serveur distant, c'est-à-dire si votre serveur Web s'exécute sur un ordinateur distant. Si votre serveur Web s'exécute sur le même ordinateur que Dreamweaver, passez directement à la section suivante, Création d'une source de données ColdFusion.
Avant d'essayer de vous connecter à l'exemple de base de données, copiez la base de données sur le disque dur de l'ordinateur distant. Le fichier de la base de données, trio.mdb, se trouve dans le dossier d'examples Samples sur le CD Macromedia Studio MX 2004.
Vous pouvez stocker le fichier dans le dossier de votre choix, sur l'ordinateur distant, ou créer un nouveau dossier. Par exemple, vous pouvez créer un dossier appelé Données dans votre dossier CFusionMX\wwwroot et stocker l'exemple de base de données à cet endroit.
Une fois que vous avez placé la base de données, créez une source de données ColdFusion dans le programme ColdFusion Administrator.
Création d'une source de données coldfusion
Avant de vous connecter à une base de données dans Dreamweaver, vous devez créer une source de données ColdFusion dans le programme ColdFusion Administrator, la console de gestion du serveur.
Une source de données ColdFusion est un identificateur formé d'un seul mot (Acme par exemple), qui pointe vers la base de données et contient toutes les informations requises pour s'y connecter. Les sources de données ColdFusion sont similaires aux noms de sources de données Windows (DSN) car elles incluent automatiquement tous les DSN définis sur le système Windows exécutant ColdFusion. Elles diffèrent des DSN en ce que vous pouvez créer des sources de données pour des bases de données à l'aide de fournisseurs OLE DB ou de pilotes natifs. Les DSN peuvent pointer vers des bases de données uniquement si vous utilisez des pilotes ODBC installés sur un ordinateur Windows. Pour plus d'informations, voir l'annexe Guide du débutant en base de données dans l'aide Utilisation de Dreamweaver.
Vous pouvez maintenant définir l'exemple de base de données Trio Motors en tant que source de données ColdFusion.
Pour définir l'exemple de base de données en tant que source de données coldfusion :
1 Dans le panneau Fichiers de Dreamweaver, sélectionnez le site Trio Motors créé dans Définition d'un site Dreamweaver, page 78. 2 Créez un fichier en sélectionnant Fichier > Nouveau. 3 Sélectionnez Page dynamique dans la colonne Catégorie et ColdFusion dans la colonne Page dynamique de l'onglet Général. 4 Cliquez sur Créer. 5 Donnez un titre au document en saisissant Trio Motors dans la zone Titre dans la partie supérieure du document.
6 Enregistrez le fichier (Fichier > Enregistrer) dans le réseau principal du site Trio Motors (trio_motors) et attribuez-lui le nom index.cfm.
Ne fermez pas le fichier. Il doit être ouvert dans la fenêtre de document pour que vous puissiez terminer la procédure.
Cliquez sur l'icône Modifier les sources de données dans le panneau Bases de données (Fenêtre > Bases de données).
ColdFusion Administrator s'ouvre dans une fenêtre de navigateur.
8 Connectez-vous à ColdFusion Administrator en utilisant le mot de passe sélectionné lors de l'installation de ColdFusion MX. La fenêtre Sources de données s'affiche. 9 Entrez trio dans la zone de texte Nom de la source de données. 10 Sélectionnez Microsoft Access dans le menu déroulant Pilote.
Pour plus d'informations sur les pilotes de base de données, voir l'annexe Guide du débutant en base de données dans l'aide Utilisation de Dreamweaver.
Une fenêtre de sélection de source de données s'affiche.
Cliquez sur le bouton de navigation sur le serveur situé à côté de la zone de texte du fichier de base de données et recherchez la base de données Microsoft Access pour Trio Motors.
Si ColdFusion s'exécute sur votre ordinateur local, recherchez le fichier de base de données que vous avez copié sur votre disque dur à partir du CD Macromedia Studio MX 2004. Pour plus d'informations, voir le début de cette section, Connexion à l'exemple de base de données, page 82.
Si ColdFusion s'exécute sur un ordinateur distant, créez une source de données qui pointe vers le fichier de base de données que vous avez placé sur l'ordinateur distant. Voir Configuration de la base de données (configuration de serveur distant uniquement), page 83.
13 Cliquez sur Appliquer.
ColdFusion Administrator renseigne le champ du fichier de base de données avec le chemin d'accès correct pour la base de données.
14 Vous pouvez éventuellement entrer une description de la base de données dans la zone de texte Description.
15 Cliquez sur le bouton Soumettre.
ColdFusion Administrator affiche une nouvelle fois la fenêtre Sources de données.
Si vous avez sélectionné un chemin d'accès de base de données valide et que les pilotes appropriés sont installés sur votre système, ColdFusion Administrator affiche OK dans la colonne État de la fenêtre des sources de données connectées.
Pour plus d'informations, y compris des informations relatives à la connexion aux sources de données utilisant Oracle, MySQL et d'autres pilotes, consultez la documentation de ColdFusion Administrator. Vous pouvez accéder à la documentation de ColdFusion Administrator en cliquant sur le lien Documentation situé dans la partie supérieure de l'écran ColdFusion Administrator.
Affichage de sources de données coldfusion dans dreamweaver
Une fois la source de données ColdFusion créée dans ColdFusion Administrator, vous pouvez l'utiliser pour vous connecter à la base de données depuis Dreamweaver.
Pour afficher la source de données coldfusion dans dreamweaver :
1 Vérifie que le fichier index.cfm créé dans Création d'une source de données ColdFusion, page 83 est toujours ouvert dans la fenêtre de document de Dreamweaver. S'il n'est pas ouvert, double-cliquez sur l'icône du fichier dans le panneau Fichiers pour l'ouvrir. 2 Ouvrez le panneau Base de données (Fenêtre > Bases de données). 3 Spécifiez les informations de connexion RDS pour le serveur ColdFusion MX. Pour ce faire, cliquez sur le lien de l'invite, entrez votre mot de passe de connexion RDS, puis cliquez sur OK. Vos sources de données ColdFusion s'affichent dans le panneau.
Remarque : Il est parfois nécessaire de cliquer sur le bouton Actualiser pour afficher la nouvelle source de données.
Le mot de passe RDS est défini lors de l'installation de ColdFusion MX. Le mot de passe RDS est en général (mais pas obligatoire) le même que votre mot de passe ColdFusion Administrator. Pour modifier votre mot de passe RDS, cliquez sur le lien du mot de passe RDS dans la catégorie Sécurité de ColdFusion Administrator, puis suivez les instructions.
Création d'actifs pour un site Web dynamique à l'aide de Macromedia Dreamweaver MX 2004, Macromedia Flash MX 2004, Macromedia Fireworks MX 2004, Macromedia FreeHand MX et Macromedia ColdFusion MX.
Avant de commencer, assurez-vous que votre système est configuré, que votre site Dreamweaver est défini et que vous êtes connecté à une base de données. Pour plus d'informations, voir Chapitre 6, Configuration d'un exemple de site ColdFusion, page 73.
Cette partie du manuel contient les sections suivantes :
Chapitre 7, Processus de développement Web, page 91
Didacticiel 1, Didacticiel : Dessin du plan de navigation sur le site dans FreeHand, page 117
Didactiel 2, Création d'une mise en forme basée sur un tableau dans Dreamweaver, page 131
Didactiel 3, Création d'une bannière dans Fireworks, page 141
Didactiel 4, Création d'une barre de navigation avec Fireworks, page 149
Didactiel 5, Création de médias enrichis avec Fireworks et Flash, page 165
Didacticiel 6, Assemblage et modification d'actifs Studio, page 177
Didacticiel 7, Création d'une fonction de recherche dans une base de données, page 189
Processus de développement web
Ce chapitre présente les différents composants de Macromedia Studio MX 2004
(Macromedia Dreamweaver MX 2004, Macromedia Flash MX 2004,
Macromedia Fireworks MX 2004, Macromedia FreeHand MX et Macromedia ColdFusion MX) et la façon dont ils interagissent pour offrir aux concepteurs et développeurs Web un environnement optimal de conception et de développement d'application. Les outils de Studio MX forment un environnement complet pour la conception et le développement d'interfaces côté client pour des applications et du contenu complexes, ainsi qu'une logique côté serveur pour les applications déployées avec des clients HTML, Flash, ColdFusion et d'autres technologies serveur.
Un processus de développement Web standard présente les étapes suivantes :
- Planification du site, incluant la définition de la stratégie ou des objectifs du site, le choix du public visé et la définition des données requises pour le site
- Définition de l'environnement de développement, incluant la sélection des serveurs Web et d'applications, la définition d'un site Dreamweaver et la définition des sources de données
- Planification de la conception et de la mise en forme de la page, incluant le mappage de vos pages et de vos interfaces d'application à l'aide d'un outil de dessin tel que FreeHand et la mise en forme des pages HTML avec Dreamweaver
- Création d'actifs de contenu, incluant la création d'images et de médias enrichis avec Flash, Fireworks et FreeHand
- Création d'actifs d'application, incluant la création de pages et d'applications Internet dynamiques avec Dreamweaver et Flash
- Assemblage, test et déploiement de votre site, incluant la compilation de vos actifs, la vérification des conditions d'accessibilité, le test de votre code et la publication de votre site sur un serveur à l'aide de Dreamweaver
Studio MX 2004 offre tous les outils nécessaires à la réalisation complète de ce processus. La combinaison de Dreamweaver, Flash, Fireworks, FreeHand et ColdFusion vous permet de créer, de déployer et de gérer aisément les sites Web dynamiques et les applications à la fois dans des environnements de code et de conception. Vous obtenez des interfaces utilisateur plus riches et une logique d'application plus résistante.
Ce chapitre présente un exemple de processus de développement Web. Bien qu'il fournisse des méthodes d'optimisation de vos efforts de conception et de développement, il ne présente qu'un exemple de processus possible. Le processus que vous et votre équipe déciderez d'adopter dépend de vos ressources, de vos habitudes de travail personnelles et des besoins de votre site Web. Ce chapitre a pour but de vous proposer des idées et des pratiques de conception et de développement de sites Web et d'applications à l'aide de Studio MX 2004.
Pour plus d'informations sur les produits de Studio MX 2004, consultez les chapitres 1 à 3 de ce manuel ou consultez l'aide en ligne de chacun des produits en sélectionnant Utilisation de Dreamweaver, Utilisation de Flash, Utilisation de Fireworks ou Utilisation de FreeHand dans le menu Aide.
Planification de votre site web
La planification et l'organisation efficace de votre site ne se limite pas à la définition de l'apparence du site et à l'emplacement de ses fichiers. Vous devez déterminer les objectifs du site, les conditions requises en matière de pages dynamiques et statiques et les profils de publics visés. Vous devez aussi tenir compte des conditions techniques requises, telles que l'accès utilisé et les restrictions de navigateur, de plug-in ou de chargement. Une planification minutieuse avant de procéder au développement du site vous permettra de gagner énormément de temps par la suite.
Définition des objectifs du site et du public visé
La définition des objectifs du site constitue la première étape de la création d'un site Web. Interrogez-vous ou interrogez votre client sur le site et notez vos objectifs afin de ne pas vous en éloigner lors de la conception du site. Une liste d'objectifs vous aide à désigner les besoins particuliers de votre site Web. La navigation sur le site, le support utilisé et l'apparence de votre site dépendent de la complexité de vos objectifs. L'apparence d'un site Web dédié aux informations archéologiques et sa navigation seront très différentes de celles d'un site dédié à la vente d'appareils électroménagers. De même, un site proposant du contenu et des applications complexes n'a pas la même apparence qu'un site représentant des données dynamiques affichées à l'aide de méthodes HTML plus traditionnelles.
Après avoir déterminé les objectifs de votre site Web, vous devez cibler votre public. Cette question peut ne pas sembler nécessaire puisque vous souhaiteriez que tout le monde visite votre site Web. Néanmoins, il s'avère très difficile de créer un tel site Web. Dans le monde entier, les utilisateurs ont recours à différents types de navigateurs, se connectent à différentes vitesses, possèdent ou non des plug-ins et utilisent différents types de périphériques d'affichage de contenu Internet. Tous ces facteurs ayant des répercussions sur l'utilisation de votre site, il est essentiel de déterminer le public ciblé lors de la phase initiale de la planification.
Demandez-vous qui pourrait être intéressé par votre site et qui vous souhaiteriez intéresser. Quels types d'ordinateurs utilisent-ils? Quelle est la plate-forme la plus utilisée (Macintosh, Windows, Linux, etc.) et quelle est la vitesse de connexion moyenne (modem 33,6 Kbps ou DSL)? Quels types de navigateurs, d'écrans, de téléphones cellulaires et autres périphériques utilisent-ils? Souhaitez-vous créer un site intranet dans lequel tous les utilisateurs se servent du même ordinateur, du même système d'exploitation et du même navigateur? Tous ces facteurs ont d'importantes répercussions sur l'apparence de vos pages Web et sur la façon dont vous testerez le site après l'avoir créé.
Conception de sites et compatibilité de navigateur
Lorsque vous créez votre site, vous devez en compte le fait que les visiteurs utilisent une grande diversité de navigateurs Web. Il existe plus d'une vingtaine de navigateurs Web différents en circulation, dont la plupart ont fait l'objet de plusieurs versions. Même si vous ne visez que Netscape Navigator et Microsoft Internet Explorer, qui sont utilisés par la très grande majorité des visiteurs, n'oubliez pas que tous n'utilisent pas la dernière version de ces deux navigateurs. Si votre site est hébergé sur le Web, un internaute sera évientuellement amené à le visiter en utilisant Netscape Navigator 3.0, le nouveau navigateur Macintosh Safari ou encore un navigateur de texte seulement tel que Lynx.
Si votre site Web est conçu pour le grand public, il est préférible de rendre votre site visible pour le plus grand nombre possible de navigateurs. Choisissez un ou deux navigateurs cibles et créez le site pour ces navigateurs. Explorez de temps en temps le site avec d'autres navigateurs pour éviter de proposer trop de contenu non compatible. Vous pouvez également envoyer un message à un forum de discussion pour demander à d'autres internautes de consulter votre site. Il est, en effet, toujours bon d'avoir l'avis d'un très vaste public.
Plus ce site est sophistiqué, en termes de mise en forme, d'animation, de multimédia et d'interaction, moins il est compatible avec tous les navigateurs. Par exemple, certains navigateurs ne peuvent pas exécuter de code JavaScript. Bien que vous puissiez afficher une page de texte brut ne faisant appel à aucun enrichissement sophistiqué, elle offrira évidemment beaucoup moins d'attrait, sur le plan esthétique, qu'une page utilisant efficacement des images, une mise en forme et des éléments interactifs. Essayez de trouver un juste milieu entre une conception orientée vers un maximum d'effets et une conception orientée vers une compatibilité maximale.
Une approche intéressante consiste à créer plusieurs versions de certaines pages importantes, en particulier de la page d'accueil de votre site. Par exemple, vous pouvez concevoir une version avec cadres et une version sans cadre. Ensuite, vous pouvez intégrer dans votre page un comportement qui envoie automatiquement les visiteurs équipés de navigateurs ne prenant pas en charge les cadres vers la version sans cadre. Pour plus d'informations, voir Utilisation des actions de comportement livrées avec Dreamweaver dans l'aide Utilisation de Dreamweaver.
Des fonctions spéciales de Dreamweaver permettent de réduire aisément les problèmes de compatibilité de navigateurs. La fonction Vérifier les navigateurs cibles teste le code de vos documents et détermine s'il contient des balises, des attributs, des propriétés ou des valeurs CSS non prises en charge par les navigateurs cibles. Cette vérification n'altère en rien le document. Par défaut, Dreamweaver vérifie automatiquement le navigateur cible lorsque vous ouvrez un document. Cette vérification peut également s'effectuer manuellement sur un document, un dossier ou sur l'ensemble d'un site.
Pour plus d'informations, voir Vérification de la compatibilité du navigateur dans l'aide Utilisation de Dreamweaver.
Définition des données requises et création d'une base de données
Que vous développiez une application Internet dynamique à l'aide de Flash ou une application Web HTML plus traditionnelle à l'aide de Dreamweaver, vous devrez certainement utiliser une base de données pour stocker les informations qui seront accessibles aux utilisateurs du site Web. Toutefois, vous devez déterminer les données requises pour votre site Web avant de créer votre base de données. Quels types de données dynamiques souhaitez-vous afficher sur vos pages Web, et à quel emplacement ? Si les utilisateurs sont amenés à interagir avec une interface d'application, quelles questions poseront-ils à l'application et quelles informations souhaiteront-ils extraire de la base de données ? Une fois les objectifs et le public visé de votre site déterminés, vous aurez une bonne idée des sources de données requises pour commencer à développer tout site Web.
Après avoir déterminé les sources de données requises, pensez à la structure que doit partager votre base de données pour qu'elle transmette le maximum possible d'informations stockées aux utilisateurs. Vous pouvez décider de la structure de votre base de données avant d'établir la mise en forme de vos pages Web ou lors du développement de l'interface de l'application elle-même. Décidez du moment et de la façon dont vous créez votre base de données en fonction des besoins de votre processus de développement.
La première étape consiste à sélectionner les tables de la base de données. Une table de base de données contient des ensembles d'entités liées, telles que des personnes, des objets ou des événements qui sont organisés en lignes et en colonnes. Dans une base de données, une colonne représente un champ et une ligne représentée un enregistrement.
Après avoir déterminé le nombre et les types de tables de votre base de données, CHOISSEZ les colonnes de chaque table. Les colonnes décrivent les propriétés de chaque entité ou enregistrement de la table. Par exemple, vous pouvez créer une table nommée Joueurs contenant des informations sur les membres d'une équipe de hockey. La table Joueurs peut contenir une colonne indiquant le prénom, le nom, la position, le nombre de buts marqués, etc. de chaque membre de l'équipe (voir l'illustration précédente). Chaque ligne de la table Joueurs représente alors un enregistrement unique concernant un membre de l'équipe, comme une carte à collectionner contenant des informations sur un joueur spécifique.
Assurez-vous que chaque table est dotée d'une colonne de clé primaire. Cette colonne contient des valeurs qui identifient chaque enregistrement de manière unique, c'est-à-dire que chaque valeur est unique pour tous les enregistrements. Vous pouvez ainsi retrouver une ligne lors d'une recherche dans la base de données. La plupart des colonnes à clé primaire contiennent des numéros d'identification, mais vous pouvez utiliser d'autres clés primaires, telles que des numéros de formulaires ou des numéros de série de produits.
Pour plus d'informations, voir l'annexe Guide du débutant en base de données dans l'aide Utilisation de Dreamweaver.
Dessin de la navigation sur le site dans freehand et présentation du plan
Une fois que vous avez déterminé les objectifs de votre site, le public visé et les sources de données requises, vous pouvez commencer à concevoir le plan de navigation du site. Le plan de navigation du site est une sorte de carte qui décrit comment vos pages Web sont liées les unes aux autres. Plus particulièrement, il montre la manière dont les utilisateurs naviguent sur votre site en cliquant sur les liens et en interagissant avec les interfaces d'applications.
Vous pouvez utiliser FreeHand pour concevoir, dessiner et expérimenter le plan de navigation sur votre site.
Le nouvel outil Connecteur vous permet de connecter des sections de la planification préalable du site d'un simple clic. FreeHand fournit également des éléments d'interface utilisés commun qui vous permettent d'intégrer facilement Flash et Fireworks à votre processus de développement Web. Par exemple, le panneau Outils est l'un de ces éléments d'interface utilisés contenus dans tous les produits Studio MX 2004. Il contient des outils qui vous permettent de sélectionner, de dessiner et de modifier des objets, d'appliquer des couleurs à des objets, de créer du texte, etc.
Après avoir fait un dessin de la navigation sur votre site, vous pouvez partager l'avant-projet à votre client ou aux membres de votre groupe. FreeHand vous permet de convertir aisément vos dessins en fichier Flash SWF en une seule opération. La fonction Exporter exporte votre document en tant que contenu Flash pouvant être lu sur tout ordinateur équipé de Macromedia Flash Player.
Pour créer la navigation sur un site, voir Didacticiel 1, Didacticiel Dessin du plan de navigation sur le site dans FreeHand, page 117.
Définition de l'environnement de développement
Que vous développiez votre projet seul ou en équipe, vous devez définir un environnement de développement avant de commencer à utiliser Studio MX pour développer ce site Web. À la base, votre environnement de développement consiste en un serveur Web, un serveur d'application et un site Dreamweaver.
Définition des serveurs web et d'application
Un serveur Web est un logiciel qui transmet des fichiers en réponse à des requêtes de navigateurs Web. Lorsque le serveur Web reçoit une requête pour une page HTML statique, le serveur lit la requête, recherche la page et l'envoie au navigateur ayant formulé la requête. Les serveurs Web les plus courants sont IIS (Microsoft Internet Information Server), Netscape Enterprise Server, Sun ONE Web Server et Apache HTTP Server. ColdFusion est doté de son propre serveur Web. Nous vous recommandons d'utiliser ce serveur uniquement dans le cadre d'opérations de développement.
Choisissez un serveur Web et installez-le sur votre ordinateur local ou sur un ordinateur en réseau. Pour plus de détails, voir Chapitre 5, Installation d'un serveur Web, page 67.
Pour exécuter des applications HTML ou des applications Internet dynamiques, votre serveur Web doit être lié à un serveur d'application. Un serveur d'application est un logiciel qui aide le serveur Web à traiter les pages dynamiques avant qu'il ne les envoie aux navigateurs demandeurs. Le serveur d'application lit le code de la page dynamique, termine cette page en fonction des instructions figurant dans le code, puis en retire le code. Dans le cadre d'une application HTML, le serveur d'application transmet une page HTML statique au serveur Web, qui l'envoie ensuite au navigateur ayant formulé la requête. Dans le cadre d'une application Internet dynamique, une application Flash renvoie les variables demandées par le navigateur.
Pour voir notre serveur d'application, vous devez tenir compte de plusieurs facteurs : votre budget, la technologie de serveur ainsi que le serveur Web que vous souhaitez utiliser. Dreamweaver prend en charge cinq technologies de serveur : ColdFusion, ASP.NET, ASP, JSP et PHP. Le tableau ci-dessous présente les serveurs d'application communs disponibles pour ces cinq technologies de serveur.
| Technologie de serveur | Serveur d'application |
| ColdFusion | Macromedia ColdFusion MX |
| ASP.NET | Microsoft IIS 6 avec plate-forme .NET |
| ASP | Microsoft IIS ou PWS Sun ONE, pages de serveur actif |
| JSP | Macromedia JRun IBM WebSphere Apache Tomcat BEA WebLogic |
| PHP | Serveur PHP |
Assurez-vous que le serveur d'application que vous pouvez utiliser fonctionne avec votre serveur Web. Par exemple, la plate-forme .NET fonctionne uniquement avec Microsoft IIS qui est muni à la fois d'un serveur Web et d'un serveur d'application. ColdFusion comprend également un serveur Web et un serveur d'application mais son serveur Web n'est pas recommandé pour des environnements de production.
Une fois vos serveurs Web et d'application lancés, créez un dossier racine pour votre application sur l'ordinateur exécutant le serveur Web. Vérifiez que le dossier est publié par le serveur Web, c'est-à-dire que le serveur Web peut transmettre tous les fichiers contenus dans ce dossier ou chacun de ses sous-dossiers en réponse à une requête HTTP d'un navigateur Web. Par exemple, sur un ordinateur exécutant PWS ou IIS, vous devez vous assurer que tous les fichiers du dossier Inetpub/wwwroot et de chacun de ses sous-dossiers peuvent être transmis à un navigateur Web. Si vous utilisiez le serveur Web de ColdFusion pour des opérations de développement, tous les fichiers contenus dans le dossier CFusionMX/wwwroot ou dans chacun de ses sous-dossiers peuvent être transmis à un navigateur Web.
Pour plus d'informations, voir Chapitre 4, Description des applications Web, page 55, Chapitre 5, Installation d'un serveur Web, page 67 et Chapitre 6, Configuration d'un exemple de site ColdFusion, page 73.
Il est recommandé aux utilisateurs de ASP, ASP.NET, JSP et PHP de consulter la documentation de Dreamweaver pour plus d'informations sur la définition d'un serveur d'application. Voir Préparation à la création de sites dynamiques dans l'aide Utilisation de Dreamweaver.
Définition de votre site dans dreamweaver
Dans Dreamweaver, le terme site peut se rapporter aussi bien à un site Web qu'au dossier local dans lequel sont conservés tous les documents appartenant à un site Web. Vous devez définir un tel emplacement avant de créer votre site. Un site Dreamweaver organise tous les documents associés à votre site Web et vous permet de suivre et de gérer les liens, de gérer les fichiers, de partager les fichiers et de copier les fichiers de votre site sur un serveur Web. Certaines fonctions de Dreamweaver fonctionnent correctement uniquement si vous définissez un site.
La méthode la plus fiable pour créer un site Web à l'aide de Dreamweaver est de créer et de modifier des pages sur votre disque local, puis de charger les copies des fichiers du site vers un serveur Web distant afin de les partager à la disposition d'autres utilisateurs. Dans la fenêtre Gérer les sites de Dreamweaver (Site > Gérer les sites), définissez les informations de site local et de site distant. Utilisez ensuite le panneau Fichiers (Fenêtre > Fichiers) pour gérer votre site.
Le panneau Fichiers vous permet de choisir entre quatre modes distincts : Local, Distant, Serveur d'évaluation et Carte.
Le mode Affichage local affiche les fichiers du site Web que vous stockez sur votre ordinateur local.
Le mode Affichage distant affiche les fichiers que vous avez publiés vers votre serveur Web. Si vous développez une application Web, le dossier distant est le
Le mode Serveur d'évaluation affiche la structure des répertoires du serveur d'évaluation. En général, il s'agit également du
Le mode Affichage de la carte affiche une carte graphique du site, basée sur les relations entre les documents.
Pour plus d'informations, voir Chapitre 6, Configuration d'un exemple de site ColdFusion, page 73 ou Configuration d'un site Dreamweaver dans l'aide Utilisation de Dreamweaver.
Définition des sources de données coldfusion
Une source de données ColdFusion est un identificateur formé d'un seul mot (Acme par exemple), qui pointe vers la base de données et contient toutes les informations requises pour s'y connecter. Les sources de données ColdFusion sont semblables aux noms de sources de données Windows (DSN) en ce sens qu'elles incluent automatiquement tous les DSN définis sur le système Windows exécutant ColdF. Elles sont différentes des DSN car vous pouvez créer des sources de données en utilisant des fournisseurs OLE DB (Object Linking and Embedding DataBase) ou des pilotes natifs. Les DSN peuvent pointer vers des bases de données uniquement si vous utilisez des pilotes ODBC (Open DataBase Connectivity) installés sur un ordinateur Windows.
Vous pouvez créer une source de données ColdFusion en utilisant ColdFusion Administrator. Si vous utilisez un pilote ODBC sous Windows, vous pouvez également configurer un DSN sur leur ordinateur. Les DSN système sont automatiquement traités comme des sources de données ColdFusion.
Lorsque vous ouvrez une page ColdFusion dans Dreamweaver, les sources de données ColdFusion apparaissent dans le panneau Bases de données (Fenêtre > Bases de données).
Voulez modifier ces sources de données directement depuis l'espace de travail de Dreamweaver. Cliquez sur le bouton Modifier les sources de données dans l'angle supérieur droit du panneau Bases de données et Dreamweaver lance automatiquement ColdFusion Administrator.
Pour plus d'informations, voir Chapitre 6, Configuration d'un exemple de site ColdFusion, page 73 ou Connexions à des bases de données pour les développeurs ColdFusion dans l'aide Utilisation de Dreamweaver.
Pour plus d'informations sur la connectivité à une base de données ASP.NET, ASP, JSP et PHP, voir Connexions à des bases de données pour les développeurs ASP.NET, Connexions à des bases de données pour les développeurs ASP, Connexions à des bases de données pour les développeurs JSP et Connexions à des bases de données pour les développeurs PHP dans l'aide Utilisation de Dreamweaver.
Définition d'un système de commande source dans dreamweaver et fireworks
Si vous travailliez en équipe, vous avez la possibilité d'archiver et d'extraire des fichiers sur les serveurs local et distant. L'extraction d'un fichier équivaut à déclarer : « Je suis en train de travailler sur ce fichier; n'y touchez pas ! ». Lorsqu'un fichier est extrait, le nom de la personne qui l'a extrait s'affiche dans le panneau Fichiers, ainsi qu'une coche rouge (si le fichier a été extrait par un membre de l'équipe autre que vous-même) ou verte (si vous êtes la personne ayant extrait le fichier) en regard de l'icône du fichier.
L'archivage d'un fichier équivaut à le mettre à la disposition des autres membres de l'équipe, qui peuvent l'extraire et le modifier. Lorsque vous archivez un fichier après l'avoir modifié, la version locale de ce fichier devient accessible en lecture seule et un cadenas apparait en regard du fichier dans le panneau Fichiers pour vous empêcher de le modifier.
Pour plus d'informations, voir Archivage et extraction de fichiers dans l'aide Utilisation de Dreamweaver.
Fireworks MX 2004 contient désormais une fonction qui vous aide à intégrer la gestion des fichiers à Dreamweaver. Le bouton Gestion de fichiers, situé en regard du bouton Exportation rapide dans la partie supérieure de la fenêtre du document, permet d'accéder facilement aux commandes de transport de fichier.
Utilisez ce bouton si vous document resides dans un dossier de site Studio MX 2004 et si le site a accès à un serveur distant. Fireworks reconnaît votre dossier comme un site si vous avez défini le dossier cible, ou un dossier le contenant, comme dossier racine local à l'aide de la boîte de dialogue Gérer les sites dans Dreamweaver MX 2004. Vous pouvez utiliser ce bouton pour accéder des fichiers, les extraire et les archiver, les copier du site local vers le site distant (Placer) ou annuler l'extraction.
Pour plus d'informations, voir Bouton Gestion de fichiers dans l'aide de Fireworks.
Planification de la conception et de la mise en forme de la page
La plupart des projets de conception Web naissent de storyboards ou d'organigrammes convertis en exemples de pages par les concepteurs ou les développeurs. Vous pouvez utiliser Studio MX pour créer une maquette avec des pages fictives au fur et à mesure que vous progressez dans la conception. Les maquettes représentent en général la conception de la mise en forme, les composants techniques, les motifs et la couleur, ainsi que les images graphiques ou d'autres types d'éléments. Notre maquette doit s'apparenter à un calque sur lequel vous et les membres de votre équipe devrez vous baser lors de la conception du site. Une fois que vous avez un aperçu de l'apparence que vous souhaitez donner à vos pages, vous pouvez commencer à planifier leur mise en forme dans Dreamweaver.
Création de maquettes de pages pour déterminer l'apparence de votre site
Le fait de planifier la conception et la mise en forme de vos pages Web avant de commencer à les créer vous permettra de gagner un temps considérable lors du processus de développement. Il est essentiel de vérifier la cohérence de la conception et de la mise en forme de vos pages. Donnez aux pages Web du site une appearance similaire, un même modele de couleurs, une même navigation, etc. Cette approche cohérente permet d'orienter vos utilisateurs et de les faire bénéficier d'uneudaillerie experience.
FreeHand et Fireworks sont des outils idéaux pour mettre en place une conception préalable des pages principales de notre site Web.
FreeHand et Fireworks vous permettent de créer des illustrations complexes, que vous créiez entièrement toute conception initiale ou que vous assembliez des images déjà créées, au format GIF ou JPEG par exemple. L'apparence et le fonctionnement de la plupart des outils de FreeHand et Fireworks, ainsi que ceux de Flash, sont identiques, ce qui facilite la transition d'une application à une autre. De plus, les modèles de sélection de couleurs et les interfaces ont la même apparence et fonctionnent de la même façon dans tous les produits Studio MX 2004.
Lorsque vous avez terminé d'élaborer votre conception préalable, vous pouvez exporter vos fichiers FreeHand ou Fireworks en fichiers Flash SWF. Notre travail peut ensuite être affiché par tout ordinateur exécutant Flash Player.
Pour plus d'informations, voir les aides Utilisation de FreeHand et Utilisation de Fireworks.
Création de mises en forme de pages dans dreamweaver
La mise en forme est l'un des aspects les plus importants de la conception Web. La mise en forme d'une page détermine la manière dont votre page s'affichera dans le navigateur, par exemple où seront placés les menus, les images et le contenu Flash. Dreamweaver propose différentes façons de créer et de contrôler la mise en forme de vos pages Web.
Une méthode courante pour créer une mise en forme est de positionner les éléments en utilisant des tables HTML. Les tables sont très utiles pour partager des données tabulaires et mettre en forme du texte et des images dans une page Web. Une table comprend au moins une ligne ; chaque ligne comporte au moins une cellule.
Dreamweaver offre trois méthodes pour afficher et manipuler les tables : mode Standard, mode Mise en forme et mode Tableaux développement. En mode Standard, les tables sont présentées comme une grille de lignes et de colonnes. Le mode Mise en forme présente des zones que vous pouvez facilement dessiner, redimensionner et déplacer sur la page tout en conservant les tables comme structure sous-jacente. En mode de Mise en forme, vous pouvez ensuite ajouter du texte, des images ou tout autre contenu à des cellules, comme vous le feriez en mode Standard. Le mode Tableaux développement est une nouvelle fonction de Dreamweaver qui ajoute temporairement des marges intérieures et des espacements de cellules dans tous les tableaux d'un document et augmente les bordures de tableaux pour faciliter la modification.
Pour mettre en forme des pages dans Dreamweaver, vous pouvez également placer des éléments à l'aide des feuilles de style en cascade (CSS). Cette méthode est de plus en plus utilisée car elle offre un meilleur contrôle et une plus grande flexibilité que les tables. Si vous savez correctement vous servir des feuilles de style en cascade, vous pouvez utiliser les balises < div> pour créer des blocs de contenu, puis placer ces blocs sur la page à l'aide des styles.
Pour plus d'informations sur la mise en forme des pages dans Dreamwe eaver, y compris sur la mise en forme à l'aide de tables, de cellules de mise en forme, de cadres et de feuilles de style en cascade, voir Mise en forme des pages dans l'aide Utilisation de Dreamweaver.
Pour commencer à créer une mise en forme à l'aide de tables dans Dreamweaver, voir Didacticiel 2, Création d'une mise en forme basée sur un tableau dans Dreamweaver, page 131.
Création d'actifs de contenu
Une fois que vous savez à quoi va ressembler votre site, vous pouvez créer et regrouper les actifs dont vous aurez besoin. Les actifs peuvent être des éléments tels que des images, du texte, des animations Flash ou autres médias. Le panneau Actifs de Dreamweaver (Fenêtre > Actifs) affiche et permet d'accéder à tous les actifs de votre site.
Création d'images dans freehand et fireworks
Vous pouvez utiliser à la fois FreeHand et Fireworks pour créer des images pour votre site Web.
FreeHand est une application de dessin vectoriel. FreeHand vous permet de créer des illustrations graphiques Web et à imprimer, telles que des figures, des logos et des bannières publicitaires. FreeHand vous permet aussi de transformer vos dessins en animations Flash. L'espace de travail FreeHand et le panneau Outils sont cohérents par rapport à ceux des autres produits Studio MX. Vous savez déjà comment élaborer la navigation d'un site dans FreeHand ou la conception préalable d'une page. Pour plus d'informations sur la création des actifs de contenu à l'aide de FreeHand, voir l'aide Utilisation de FreeHand.
Fireworks constitue l'outil idéal de conception et de production pour les graphiques Web professionnels. Il s'agit du premier environnement de production permettant de surmonter les défis posés aux concepteurs et aux développeurs de graphiques Web. Grâce aux effets appliqués en direct dans Fireworks, vous pouvez améliorer vos graphiques en appliquant des biseaux, des estampes, des ombres portées, des effets néon ou autres aux objets vectoriels, aux bitmaps et aux textes. L'application directe des effets n'est pas destructive, c'est--à-dire que ces effets sont toujours modifiables. Fireworks génère également du code JavaScript, ce qui facilite considérablement la création de survols, de boutons et de menus contextuels. En outre, ses fonctions d'optimisation réduisent la taille des fichiers graphiques Web sans sacrifier la qualité.
Fireworks dispose d'outils de modification de bitmap, ainsi que d'outils de modification vectorielle. Tout élément contenus dans Fireworks est entièrement modifiable, à tout moment. En outre, vous pouvez automatiser vos procédures de travail pour faire face aux exigences de mise à jour et de modification. Comme FreeHand, Fireworks s'intègre aux autres produits Studio pour vous permettre d'optimiser votre travail. Une fois que vous avez créé vos images et que vous les avez incluses dans votre site, vous pouvez les ouvrir, y apporter des modifications et travailler dans Fireworks sans jamais quitter l'espace de travail de Dreamweaver ou de Flash.
Pour commencer à créer des actifs de contenu à l'aide de Fireworks, voir Didacticiel 3, Création d'une bannière dans Fireworks, page 141 et Didacticiel 4, Création d'une barre de navigation avec Fireworks, page 149.
Création de médias enrichis dans flash
Votre contenu Flash peut comprendre des graphiques, du texte, des effets animés et des applications destinés aux sites Web. Les contenus Flash sont principalement composés de graphiques vectoriels, mais peuvent également contenir des graphiques bitmap, de la vidéo et des sons importés. Ils peuvent être interactifs et ainsi permettre aux utilisateurs de saisir des informations. Vous pouvez également créer du contenu non linéaire capable de communiquer avec d'autres applications Web. Étant donné que le contenu Flash utilise des graphiques vectoriels compacts, il se télécharge rapidement et s'adapte à la taille de l'écran de l'utilisateur.
Vous avez probablement déjà visualisé du contenu Flash interactif sur de nombreux sites Web. Des millions d'internautes ont reçu Flash Player avec leur ordinateur, leur navigateur ou leur système d'exploitation; d'autres l'ont téléchargé à partir du site Web de Macromedia. Flash Player est installé sur l'ordinateur local, où il lit le contenu Flash dans des navigateurs ou en tant qu'applications autonomes. L'affichage de contenu Flash dans Flash Player est similaire à l'affichage d'un DVD dans un lecteur de DVD; Flash Player est le périphérique qui affiche le contenu que vous avez créé dans l'application auteur Flash.
Les documents Flash (avec l'extension de fichier .fla) contiennent toutes les informations nécessaires pour que vous puissiez développer, recueillir et tester du contenu interactif. Ils sont cependant différents du contenu affiché par Flash Player. En effet, ils sont publiés sous forme de fichiers Flash (portant l'extension .swf) ne contenant que les informations nécessaires pour le contenu.
Flash vous permet d'animer des objets pour donner une impression de mouvement sur la scène et pour en modifier la forme, la taille, la couleur, l'opacité, la rotation et d'autres propriétés. Vous pouvez créer une animation image par image dans laquelle vous désignez une image distincte pour chaque plan. Vous pouvez aussi créer une animation par interpolation dans laquelle vous définissez la première et la dernière images et laissez Flash créer les images intermédiaires.
De plus, Flash propose diverses méthodes de création et d'importation d'illustrations à partir d'autres applications. Vous pourrez créer des objets à l'aide des outils de dessin et de peinture, de même que modifier les attributs d'objets existants. Vous pouvez également importer des graphiques vectoriels, des graphiques bitmap et des vidéos depuis d'autres applications, tels que FreeHand et Fireworks, puis modifier ces graphiques importés dans Flash.
Pour commencer à créer des actifs de contenu Flash, voir Didacticiel 5, Création de médias enrichis avec Fireworks et Flash, page 165.
Création de modèles et de bibliothèques pour la réutilisation des actifs
Les modèles et les bibliothèques Dreamweaver vous permettent de créer des pages Web dont la conception reste cohérente. L'utilisation de modèles et de bibliothèques simplifie la gestion de votre site Web, car ils vous permettent de concevoir à nouveau votre site et de modifier des centaines de pages en quelques secondes.
Un modèle est un document que vous pouvez utiliser pour créer plusieurs pages partageant la même mise en forme. Lorsque vous créez un modèle, vous pouvez indiquer quels éléments resteront constamment sur la page (non modifiables ou verrouillés) dans les documents basés sur ce modèle et lesquels pourraient être modifiés.
Par exemple, si vous publiiez un magazine en ligne, l'en-tête et la mise en forme générale ne changent pas d'une publication à une autre, ou d'un article à l'autre, mais le titre et le contenu de chaque article sont différents. Un concepteur peut maker la mise en forme d'une page du magazine qui contient des espaces réservés pour le titre et le contenu de l'article (marquées comme zones modifiables). Il peut ainsi enregistrer cette mise en forme comme modèle. Lors d'une nouvelle parution du magazine, vous n'avez plus qu'à créer une page basée sur ce modèle et remplacer le texte de l'espace réservé par le titre et le contenu du nouvel article.
Vous pouvez même modifier un modèle après avoir créé des documents basés sur celui-ci. Lorsque vous modifiez un modèle, les zones verrouillées (non modifiables) des documents basés sur ce modèle sont mises à jour de façon à refléter les modifications apportées au modèle.
L'utilisation des modèles est la meilleure solution pour obtenir un ensemble de pages présentant la même mise en forme, si vous pouvez revoir la mise en forme finale d'un ensemble de pages, puis y ajouter du contenu. Si vous pouvez simplement des pages ayant les mêmes en-têtes et pieds de page mais des mises en forme différentes, utilisez plutôt des éléments de bibliothèque. Les éléments de bibliothèque sont des éléments de page tels que des images, du texte, du contenu Flash et autres médias que vous pouvez fréquemment utiliser ou mettre à jour dans l'ensemble de votre site Web. Comme avec les modèles, vous pouvez mettre à jour toutes les pages basées sur des éléments de bibliothèque lorsque vous modifiez le contenu de ces éléments.
Par exemple, supposons que vous créiez le site d'une entreprise. L'entreprise souhaite que son slogan apparaisse sur toutes les pages du site, mais le service marketing n'a pas encore établi de slogan définitif. Dans ce cas, vous pouvez créer un élément de bibliothèque destiné à contenir le slogan et utiliser cet élément sur chaque page. Ensuite, lorsque le service de marketing vous communique le slogan définitif, vous pouvez modifier l'élément de bibliothèque et mettre automatiquement à jour toutes les pages qui l'utilisent.
Pour plus d'informations, voir Gestion des modèles et Gestion des actifs de site et des bibliothèques dans l'aide de Utilisation de Dreamweaver.
Grâce à la bibliothèque Flash, vous pouvez facilement réutiliser vos actifs. La bibliothèque d'un document Flash rassemble les symboles créés dans Flash, ainsi que les fichiers importés tels que les clips vidéo, les clips audio, les bitmaps et les illustrations vectorielles. Le panneau Bibliothèque affiche une liste contenant le nom de tous les éléments de la bibliothèque, ce qui vous permet d'afficher et d'organiser ces éléments au fur et à mesure de votre travail. Dans Flash, vous pouvez ouvrir la bibliothèque de tout document Flash pour rendre disponibles les éléments de bibliothèque de ce fichier dans le document actif. Vous pouvez créer vos propres bibliothèques permanentes, qui seront disponibles à chaque fois que vous lancerez Flash, ou utiliser les exemples de bibliothèques fournis avec Flash. Les exemples de bibliothèques contiennent des boutons, des graphiques, des clips et dessins que vous pouvez ajouter à vos propres documents Flash.
Pour plus d'informations, voir Utilisation de la bibliothèque pour la gestion des ressources multimédia dans l'aide Utilisation de Flash.
FreeHand et Fireworks contiennent également des bibliothèques pouvant contenir des actifs réutilisables. Vous avez ainsi la possibilité de stocker vos actifs de contenu, quel que soit le produit que vous utilisez, ce qui vous permet d'optimiser votre travail dans le Studio MX 2004.
Pour plus d'informations, voir les aides Utilisation de FreeHand et Utilisation de Fireworks.
Création d'actifs d'application
L'un des avantages du développement d'une application Web dynamique est de pouvoir présenter au format Web des informations stockées dans des bases de données. Les produits Studio MX 2004 vous permettent de créer rapidement de telles applications, offrant une grande variété de fonctions permettant d'augmenter la productivité des développeurs, telles que des composants et modèle prédéfinis, des tâches de développement intégrées et une interface utilisateur partagée.
Création de pages dynamiques dans dreamweaver
L'un des avantages principaux de Dreamweaver est que vous pouvez l'utiliser pour créer des sites Web dynamiques même si vous ne connaissiez pas de langages de programmation. Les outils visuels de Dreamweaver vous permettent de développer des sites Web dynamiques sans avoir à rédiger manuellement le code de programmation complexe nécessaire à la création d'un site prenant en charge l'affichage du contenu dynamique stocké dans une base de données. Dreamweaver vous permet de créer des sites Web dynamiques en utilisant l'un des nombreux langages de programmation Web et les technologies de serveur, incluant ColdFusion, ASP.NET, Microsoft ASP (Active Server Pages), JSP (JavaServer Pages) et PHP.
Dreamweaver offre aux programmeurs un code d'exécution amélioré et un espace de travail centré sur le code dérivé de ColdFusion Studio et de Macromedia HomeSite+. Vous pouvez travailler en mode Code, en mode Création ou en mode Code et Création, ce qui vous permet de visualiser à la fois le code et les interfaces lors du développement de vos pages dynamiques et de vos applications. Le code ColdFusion généré par Dreamweaver pour vos pages dynamiques est maintenant plus facile à comprendre et ressemble davantage au code que vous écririez manuellement. Vous reconnaîtrez le code si vous avez aussi les techniques ColdFusion dans les manuels ou les didactériels en ligne.
Lorsque vous créez un site Web dynamique, vous devez définir une source de contenu depuis laquelle les données sont extraites avant d'être affichées sur une page Web du site. Dans Dreamweaver, les sources de données correspondant à des bases de données, des variables de demande, des variables de serveur, des variables de formulaire ou des procédures stockées.
Avant de pouvoir utiliser ces sources de contenu dans une page Web, vous devez :
- établir une connexion avec la source de contenu dynamique (telle qu'une base de données) et le serveur d'application chargé du traitement de la page;
- préciser les informations de la base de données à afficher ou les variables à inclure dans la page;
- utiliser l'interface pointer-cliqueur de Dreamweaver pour sélectionner des éléments de contenu dynamique et les insérer dans la page concernée.
Dreamweaver vous permet d'établir facilement une connexion à une base de données et de créer un jeu d'enregistrements (ou jeu de données dans ASP.NET) à partir duquel extraire le contenu dynamique. Un jeu d'enregistrements correspond au résultat d'une requête de base de données. Ce jeu d'enregistrements permet d'extraire les informations spécifiques demandées et de les afficher dans une page donnée. L'utilisateur définit le jeu d'enregistrements en fonction des informations générées dans la base de données et du contenu qu'il souhaite afficher.
La création d'un jeu d'enregistrements dans Dreamweaver s'effectue depuis la boîte de dialogue Jeu d'enregistrements.
Vous peuvent ouvrir la boîte de dialogue Jeu d'enregistrements en cliquant sur le bouton Jeu d'enregistrements dans la catégorie Application de la barre Insérer ou en cliquant sur le bouton Plus (+) du panneau Liaisons (Fenêtre > Liaisons) et en sélectionnant Jeu d'enregistrements (Requête). La boîte de dialogue simple Jeu d'enregistrements vous permet de sélectionner une connexion à une base de données existante et de créer une requête de base de données en sélectionnant les tables dont vous souhaitez inclure les données dans le jeu d'enregistrements. Vous pouvez même utiliser la partie Filtre de la boîte de dialogue afin de créer des critères de recherche et de renvoi simples pour la requête. Vous avez la possibilité de tester la requête depuis la boîte de dialogue Jeu d'enregistrements et de procéder à tous les réglages nécessaires avant de l'ajouter au panneau Liaisons.
Une fois une connexion à une base de données établie et un jeu d'enregistrements défini, ce dernier apparaît dans le panneau Liaisons.
Vous pouvez importer vos sources de données à partir de ce panneau dans la page Web de votre choix du site défini. Vous pouvez insérer dans une page Web des valeurs répertoriées dans le panneau Liaisons, en sélectionnant un élément, puis en cliquant sur le bouton Insérer situé dans la partie inférieure du panneau. Vous pouvez également sélectionner un élément et le faire glisser vers la page, comme vous feriez glisser toute image ou tout support depuis le panneau Actifs.
L'illustration précédente présente une page affichant des espaces réservés dynamiques ayant été glissés vers la page depuis le panneau Liaisons. Vous pouvez afficher, au premier plan, la page qui s'affichera pour l'utilisateur dans une fenêtre de navigateur. Le fichier Dreamweaver présente un comportement de serveur Région répétée, qui vous permet d'afficher plusieurs enregistrements sur une seule page. Dans cet exemple, il affiche les trois premiers enregistrements de la base de données.
Outre l'affichage des données dynamiques, Dreamweaver vous permet de créer des ensembles de pages permettant aux utilisateurs de rechercher, d'insérer, de supprimer et de mettre à jour des enregistrements dans votre base de données. Par exemple, vous pouvez rapidement développer une application performante vous permettant de publier un répertoire contenant des informations sur tous les employés sur l'intranet de votre entreprise, d'effectuer une recherche dans le répertoire en fonction de critères (nom, service, etc.), d'ajouter et de supprimer des enregistrements du répertoire et de modifier les enregistrements dans la base de données. Vous pouvez effectuer tout cela sans avoir à taper une seule ligne de code. Les utilisateurs plus expérimentés peuvent utiliser l'environnement de codage avancé de Dreamweaver.
Pour plus d'informations, voir Ajout de contenu dynamique aux pages Web et Développement rapide d'applications dans l'aide Utilisation de Dreamweaver.
Pour créer une fonction de recherche simple dans Dreamweaver, voir Didacticiel 7, Création d'une fonction de recherche dans une base de données, page 189.
Création des actifs d'une application internet dynamique avec flash
Flash combine différentes conceptions multimédia et possibilités de développement d'applications Internet dynamiques en un seul produit. Les développeurs peuvent créer des applications Internet dynamiques en utilisant les fonctions multimédia de Flash ainsi que ses outils complexes, incluant un éditeur ActionScript performant, un débogueur résistant et des composants d'interface utilisateur de Flash prédéfinis.
Alors que Flash offre une plate-forme ouverte pour le développement d'applications avec les serveurs .NET et J2EE, l'intégration améliorée avec ColdFusion propose aux développeurs le moyen le plus rapide de créer des applications Internet dynamiques. Le support général inclut des exemples de code et des documents de référence, présente une connectivité haute-performance, prend en charge les langages communs de Dreamweaver, Flash et ColdFusion, s'intègre aisément aux composants de l'interface utilisateur de Flash et comprend un ensemble d'outils intégrés conçus dans un souci d'unité de logique d'arrière-plan avec les interfaces utilisateurs Flash.
Commencez la création d'applications Internet dynamiques Flash/ColdFusion par l'élaboration de composants ColdFusion : fragments de code que Flash invoque via ActionScript une fois l'application créée. Vous pouvez alors créer des interfaces d'application Flash en utilisant les graphiques FreeHand précédemment désignés ou des éléments de page mis en place dans Flash. Les composants d'interface utilisateur de Flash (barres de défilement, champs de texte, boutons, boutons radio, cases à cocher, zones de liste et listes déroulantes) améliorent considérablement vos capacités de création d'applications.
Les composants d'interface utilisateur de Flash assurent la cohérence entre les applications Internet dynamiques créées à l'aide de Flash. Vous pouvez également créer des composants personnalisés et réutilisables afin de répondre aux besoins de plusieurs projets. Pour plus d'informations, voir le manuel Utilisation des composants (disponible dans l'aide de Flash).
Grâce aux applications Internet dynamiques, vous pouvez atteindre des millions d'utilisateurs tout en réduisant la charge sur le serveur et le temps de téléchargement des données. Vous pouvez inclure des animations, des données audio ou vidéo et des communications bidirectionnelles dans une interface unique, permettre aux utilisateurs souffrant d'un handicap d'accéder facilement aux données, fournir immédiatement des données que que soit la vitesse de connexion et développement à destinations de plusieurs plate-formes ou de périphériques (par exemple pour les téléphones sans fil, la télévision interactive et les consoles de jeux). Vos applications et données dynamiques peuvent ainsi être affichées n'importe où. Puisqu'il n'est pas nécessaire de rafraîchir la page lorsque des informations sont échangées entre Flash Player et le serveur d'application, les coûts de bande passante sont réduits et les utilisateurs bénéficient d'une plus grande efficacité et d'une meilleure convivialité.
Pour plus d'informations, voir la rubrique concernant les applications Internet dynamiques à l'adresse http://www.macromedia.com/go/developer_ria/.
Assemblage, test et déploiement
La dernière phase du processus de développement Web consiste à assembler les actifs et à tester les pages Web que vous avez créées afin de déployer votre site sur un serveur de façon à ce qu'il soit accessible par le public. Studio MX 2004 offre un grand nombre de fonctions qui permettent de simplifier ce processus.
Assemblage d'actifs dans dreamweaver
Grâce à Dreamweaver, vous pouvez ajouter facilement plusieurs types de contenu à vos pages Web. Vous pouvez ajouter des actifs et des éléments de conception, par exemple des textes, des images, des couleurs, des animations, des sons et autres formes de données. Le panneau Actifs (Fenêtre > Actifs) vous permet d'organiser facilement les actifs dans un site. Vous pouvez faire glisser la plupart des actifs directement du panneau Actifs vers un document Dreamweaver.
Outre la possibilité de faire glisser des actifs enregistrés du panneau Actifs vers la page, vous pouvez effectuer les opérations suivantes :
- Entrer directement du texte dans un document Dreamweaver ou importer du texte à partir d'autres documents, puis le formater avec des styles CSS en utilisant l'inspecteur des propriétés ou l'inspecteur de balises de Dreamweaver.
- Insérer des images, y compris des images survolées, des graphiques contenant des zones interactives et des images Fireworks. Grâce aux outils d'alignement, vous pouvez plus facilement placer les images sur une page.
- Insérer d'autres types de ressources dans une page Web : animations Flash, Shockwave ou QuickTime, sons, applets.
- Ajouter du contenu en mode Code dans Dreamweaver. A l'aide du mode Code de Dreamweaver ou de l'inspecteur de code, vous pouvez écrire votre propre code HTML, JavaScript, CFML, PHP, Visual Basic, C# et CSS.
- Créer des liens HTML standard, y compris des liens vers des ancres et des adresses électroniques, ou configurer facilement des systèmes de navigation graphiques, notamment des menus de reroutage et des barres de navigation.
- Appliquer du contenu réutilisable dans l'ensemble de votre site en utilisant les modèles et les bibliothèques de Dreamweaver. Vous pouvez créer des pages à partir d'un modèle, puis ajouter du contenu dans les zones modifiables ou modifier le contenu.
Après avoir assemblé vos actifs, vous pouvez les modifier directement dans l'espace de travail de Dreamweaver. Dreamweaver vous permet désormais d'effectuer un certain nombre de tâches simples d'édition d'images sans avoir recours à une application d'édition d'images. Vous pouvez recadrer une image bitmap, en régler le contraste, l'optimiser ou en accentuer la netteté en sélectionnant l'image dans la fenêtre de document ainsi que l'outil approprié dans l'inspecteur des propriétés, puis en apportant vos modifications. Pour plus d'informations, voir Insertion d'images dans l'aide Utilisation de Dreamweaver.
Remarque: La fonction d'optimisation d'images dans Dreamweaver est disponible uniquement si Fireworks est installé.
Pour apporter des modifications complexes, vous pouvez lancer Fireworks afin de modifier des images insérées dans un document Dreamweaver en les sélectionnant et en cliquant sur le bouton Modifier de Fireworks dans l'inspecteur des propriétés. Lorsque vous lancez et modifiez une image ou une découpe d'image faisant partie d'une table Fireworks, Dreamweaver lance Fireworks et ouvre le fichier PNG à partir duquel l'image a été exportée.
Dans la fenêtre du fichier PNG, Fireworks vous indique que vous êtes en train de modifier l'image depuis Dreamweaver. Lorsque vous avez apporté toutes vos modifications et fermé le fichier PNG, ces modifications, une fois enregistrées, apparaissent sur l'image dans le document Dreamweaver (GIF, JPG, etc.) que vous avez sélectionné pour modification.
De même, vous pouvez modifier des fichiers Flash en sélectionnant l'espace réservé de l'animation Flash dans le document Dreamweaver et en cliquant sur le bouton Modifier de Flash dans l'inspecteur des propriétés. Dreamweaver ouvre le fichier Flash (FLA) et enregistre toutes les modifications que vous y avez apportées dans le fichier SWF.
Pour plus d'informations sur l'assemblage et la modification des actifs Studio MX, voir Didacticiel 6, Assemblage et modification d'actifs Studio, page 177.
Utilisation de dreamweaver et de flash pour assurer l'accessibilité
Macromedia s'efforce de prendre ses sites et ses produits Web accessibles aux personnes souffrant de handicaps visuels, auditifs, moteurs ou autre. Flash et Dreamweaver fournissent des outils d'aide à la création de contenu accessible. Parmi les fonctions d'accessibilité aux sites Web, vous trouvez la prise en charge des lecteurs d'écran, des étiquettes et des descriptions de graphiques, des raccourcis clavier et des couleurs d'affichage à haut contraste. En outre, certaines fonctions rendent l'application Dreamwe- aver elle-même accessible aux utilisateurs souffrant d'un handicap. Il prend notamment en charge les lecteurs d'écran, les fonctions d'accessibilité du système d'exploitation et la navigation avec le clavier.
Afin de prendre les informations accessibles aux lecteurs d'écrans et aux utilisateurs de votre site Web, Dreamweaver prend en charge les légendes des éléments graphiques, y compris des boutons-poussoirs, les commandes, les images et les tableaux. Cela signifie que vous avez la possibilité d'ajouter des étiquettes et des descriptions aux éléments de façon à ce qu'un lecteur d'écran puisse les lire pour l'utilisateur.
Par exemple, vous pouvez ajouter la description « Veste garçon rouge taille L » à une image de produit dans votre document. Lorsqu'un malvoyant consulte votre site, un lecteur d'écran lit la description de l'image qui apparait sur une page. Ainsi, l'utilisateur saura de quel produit il s'agit.
Le contenu accessible Flash est pris en charge par Flash Player 6 ou version ultérieure. Pour pouvoir tirer parti d'un contenu Flash accessible, les utilisateurs doivent disposer d'un système d'exploitation Windows qui prend en charge l'accessibilité Flash, ainsi qu'un lecteur d'écran approprié (y compris Flash Player 6 ou version ultérieure).
Flash compte plusieurs fonctions de création d'accessibilité qui vont au-delà de la simple affectation de noms aux objets. Vous pouvez fournir une description pour du texte ou des champs de texte, des boutons ou des animations, ainsi que des raccourcis clavier pour les champs de saisie de texte ou les boutons. Vous pouvez également désactiver le comportement d'affectation automatique d'étiquettes pour un contenu, de façon à ce que les chaînes de texte ne soient pas lues par les lecteurs d'écran.
Vous pouvez également CHOISIR de masquer un objet aux lecteurs d'écran. Par exemple, vous pouvez décider de masquer des clips animés si vous estimez que la description verbale n'améliore pas la version accessible de l'animation. Vous pouvez également masquer des objets accessibles figurant dans un clip ou une animation et n'exposer que le clip ou l'animation proprement dit aux logiciels de lecture d'écran.
Gardez à l'esprit le fait que la technologie de lecture d'écran est conçue à l'origine pour interpréter les informations d'interfaces utilisateurs statiques. Vous pouvez rendre votre contenu Flash plus accessible en conservant un minimum de contenu dynamique et en mettant l'accent sur les fonctions d'interface utilisateur et texte. Vous pouvez sélectionner les objets d'un contenu Flash à fournir au lecteur d'écran et omettre des effets d'animations ou des clips plus « visuels » afin d'améliorer l'accessibilité.
Pour reconcevoir des sites Web accessibles, vous devez comprendre les exigences liées à l'accessibilité et devez appeler à leur subjectivité pour prendre des décisions qui ne peuvent pas être prises par un outil de développement. Par exemple, vous ne pouvez pas faire passer des informations uniquement associées à une couleur. La meilleure façon de s'assurer qu'un site Web est accessible est de respecter toutes les procédures de préparation, de développement, de test et d'évaluation.
Pour plus d'informations, voir Dreamweaver et accessibilité dans l'aide Utilisation de Dreamweaver. Pour plus d'informations sur les fonctions d'accessibilité dans Flash, recherche « accessibilité » dans l'aide Utilisation de Flash.
Vous ouvez également consulter la rubrique du centre de ressources Macromedia concernant l'accessibilité à l'adresse www.macromedia.com/macromedia/accessibility/ pour en savoir plus sur la préparation de contenu Web conformément aux exigences d'accessibilité mandatées par les agences fédérales américaines.
Validation et débogage de votre travail
Le programme de validation de Dreamweaver vous permet de déterminer si le code contient des erreurs de balises ou de syntaxe. Le programme de validation prend en charge un grand nombre de langages de balise, dont HTML 2, HTML 3.2, HTML 4, XHTML 1 Strict, XHTML 1 transitional, XHTML 1 frameset, Internet Explorer 3 Extensions, Internet Explorer 4 Extensions, Netscape Navigator 3 Extensions, Netscape Navigator 4 Extensions, ColdFusion, ColdFusion 3, ColdFusion 3.1, ColdFusion 4, ColdFusion 4.5, ColdFusion 5, ColdFusion MX, SMIL 1 (Synchronized Multimedia Integration Language), WML (Wireless Markup Language) et JSP (JavaServer Page). Vous pouvez également valider un document en tant que document XML (ou XHTML).
Pour plus d'informations, voir Optimisation et débogage de code dans l'aide Utilisation de Dreamweaver.
Le débogueur de Flash vous permet de rechercher des erreurs dans un contenu Flash en cours d'exécution dans Flash Player. Vous pouvez utiliser le débogueur en mode de test sur des fichiers locaux ou l'utiliser pour tester des fichiers sur un serveur Web à un emplacement distant. Le débogueur permet d'insérer des points d'arrêt dans le code ActionScript, grâce auxquels vous pouvez arrêter l'animation et consulter le code ligne par ligne. Vous pouvez alors revenir aux scripts et les modifier afin d'obtenir les résultats susceptibles.
Pour plus d'informations, voir Débogage de scripts dans le Guide de référence ActionScript (disponible dans l'aide de Flash).
Test de votre site dans dreamweaver
Avant de charger le site sur un serveur et de le déclarer prêt à être publié, il convient de le tester localement. En fait, il est judicieux de tester et de résoudre les problèmes de votre site fréquemment au cours de son élaboration, afin de traiter les problèmes avant qu'ils ne s'aggravent et de les empêcher de se répéter.
Veuillez vous assurer que vos pages ont l'apparence et le fonctionnement souhaités dans les navigateurs cibles, qu'aucun lien n'est rompu et que les pages ne sont pas trop longues à télécharger. Vous pouvez également tester de paner l'ensemble du site en exécutant un rapport de site avant de publier votre site.
Les instructions suivantes vous permettront d'élaborer un site le plus convivial possible pour vos utilisateurs :
- Affichez vos pages dans le plus grand nombre de navigateurs et sur le plus grand nombre de plates-formes possible. Cela vous donnera la possibilité de constater les différences de présentation, de couleur, de taille de police et de taille de fenêtre par défaut qui ne peuvent pas été prévues lors de la vérification dans le navigateur cible.
Assurez-vous que les pages fonctionnent comme prévu dans les navigateurs cibles. Vérifiez également qu'elles fonctionnent ou qu'elles « échouent élégamment » dans les autres navigateurs. Vos pages doivent être lisibles et fonctionnelles dans les navigateurs qui ne prennent pas en charge les styles, les calques, les plug-ins ou les éléments JavaScript. Pour les pages qui ne s'affichent pas dans des navigateurs anciens, songez à utiliser le comportement Vérifier le navigateur dans Dreamweaver pour rediriger automatiquement les visiteurs vers une autre page. Vous pouvez également utiliser la fonction Vérifier les navigateurs cibles pour déterminer si certaines balises, propriétés CSS, valeurs CSS ou certains attributes ne sont pas pris en charge par vos navigateurs cibles. - Vérifiez que le site ne contient pas de liens brisés (réparez-les s'il en contient). Les autres sites étant parfois modifiés et réorganisés, il peut arriver que certaines pages vers lesquelles vos liens pointent soient déplacées ou supprimées. Pour obtenir une liste des liens vers des sites externes, vous pouvez procéder à une vérification des liens dans Dreamweaver. Vous pouvez également exécuter un rapport au niveau du site qui recherche les liens externes et crée une liste de tous les liens non valides. - Contrôlez la taille de vos pages et leur durée de téléchargement. Pour les pages qui contiennent un tableau de grande taille, n'oubliez pas que les visiteurs ne voient rien tant que le tableau n'est pas entièrement téléchargé. Envisagez de fragmenter les grands tableaux; si c'est impossible, envisagez de placer quelques données, par exemple un message de bienvenue ou une bannière publicitaire, en dehors du tableau, en haut de la page, de manière à ce que les utilisateurs puissent au moins voir ce contenu pendant le téléchargement du tableau - Recherchez sur le site entier d'éventuels problèmes, tels que des documents sans nom, des balises vides ou des balises imbriquées redondantes, en exécutant des rapports de site dans Dreamweaver. L'exécution de ces rapports avant la publication de votre site vous évitera de nombreux problèmes par la suite.
Pour plus d'informations, voir Test de votre site dans l'aide Utilisation de Dreamweaver.
Déploiement de vos fichiers de site vers un serveur avec dreamweaver
Vous venez donc de créer un site Web fonctionnel. L'étape suivante consiste à le publier en chargeant les fichiers vers un serveur Web distant.
Avant de poursuivre, vous devez pouvoir accéder à un serveur Web distant (le serveur de votre fournisseur d'accès Internet, un serveur appartenant à un client pour lequel vous travailliez ou un serveur intranet de votre société). Si vous ne pouvez accéder à un serveur de ce type, contactez votre fournisseur d'accès Internet ou votre client.
De manière générale, la commande Placer de Dreamweaver copie un fichier depuis le site local vers le site distant sans changer l'état d'extraction du fichier. Il existe deux types de circonstances dans lesquelles la commande Placer est préférable à la commande Archiver :
- lorsque vous ne travailliez pas en équipe et n'utilisez pas le système d'archivage et d'extraction;
- lorsque vous souhaitez placer la version actuelle du fichier sur le serveur, mais que vous allez continuer à y apporter des modifications.
Pour placer un fichier sur un serveur distant, cliquez sur le bouton Gestion de fichiers après avoir enregistré le fichier, puis sélectionnez Placer.
Vous pouvez également cliquer sur le bouton Placer dans la barre d'outils du panneau Fichiers ou sélectionner Site > Placer pour charger le fichier. Si le fichier n'a pas encore été enregistré, il se peut qu'une boîte de dialogue s'ouvre (selon les préférences définies dans la catégorie Site de la boîte de dialogue Préférences) vous demandant si le fichier doit être enregistré avant d'être placé sur le serveur distant.
Pour plus d'informations, voir Gestion des fichiers dans l'aide Utilisation de Dreamweaver.
Gestion et mise à jour de votre site
Lorsque la plus grande partie du site a été publiée, vous devez continuer à le mettre à jour et à en assurer la maintenance. La publication d'un site, c'est-à-dire son déploiement vers un serveur et son activation, constitue un processus continu. Dans le panneau Fichiers de Dreamweaver, vous trouvrez de nombreux outils qui vous aident à gérer votre site, à transférer vos fichiers vers et depuis un serveur distant, à configurer un processus d'archivage/extraction pour empêcher l'écrasement des fichiers et à synchroniser les fichiers sur vos sites locaux et distants. Il est essentiel de définir et de mettre en œuvre un système de contrôle de version, en utilisant soit les outils de Dreamweaver, soit une application de contrôle de version externe.
Vous ouvez également rechercher des informations par le biais des forums de discussion Dreamweaver du site Web de Macromedia. Ces forums sont de considérables sources d'informations sur les différents navigateurs, plate-formes, conseils de conception, problèmes de codage, etc. Pour plus d'informations, visitez le site www.macromedia.com/fr/support/forums/.
Pour plus d'informations sur l'un des produits de Studio MX 2004, voir Autres ressources, page 10 ou l'aide du produit concerné (disponible à partir du menu Aide du produit).
Didacticiel dessin du plan de navigation sur le site dans freehand
Ce didacticiel explique comment utiliser Macromedia FreeHand MX pour créer des dessins préliminaires du plan de navigation de votre site. Le plan de navigation du site est une sorte de carte qui décrit comment vos pages Web sont liées les unes aux autres. Plus particulièrement, il montre la manière dont les utilisateurs navigueront sur votre site en cliquant sur les liens et en interagissant avec les interfaces d'applications. Le plan de navigation d'un site apparaît normalement dans les barres de navigation utilisées sur des pages Web.
Avant de poursuivre ce didacticiel, vous pouvez consulter Chapitre 7, Processus de développement Web pour en savoir plus sur la planification de site. Pour plus d'informations, voir Planification de votre site Web, page 92.
Ce didacticiel contient les sections suivantes :
Planification de la navigation sur le site, page 117
Personnalisation de FreeHand pour une sortie multimédia/Web, page 118
Création de rectangles pour le plan de navigation, page 120
Modification du texte du rectangle, page 124
Ajout de lignes connecteur au document, page 126
Exportation du plan au format SWF page 129
Planification de la navigation sur le site
Une fois que vous avez déterminé les objectifs du site, le public visé et les données requises, vous pouvez commencer à créer le plan de navigation sur le site. Dans ce didacticiel, vous allez mettre en place un plan de navigation sur le site pour Trio Motors, une entreprise fictive qui vend des automobiles à faible consommation.
Trio Motors a sollicité un plan de navigation facile à utiliser permettant à ses utilisateurs de visiter la salle de démonstration, d'afficher un aperçu des nouveaux produits, d'afficher une page pour les propriétaires d'automobiles Trio et de tracer des informations sur les nouvelles, les événements et les services financiers. Trio Motors aimerait également que le site soit orienté sur les caractéristiques technologiques et propose un outil de recherche permettant aux utilisateurs de tracer un revendeur Trio Motors dans leur région.
En tant que développement Web pour le site Web de Trio Motors, vous CHOISSEZ un plan de navigation simple constitué de cinq liens, tous centralisés sur une page d'accueil. Dans la partie supérieure de la page d'accueil, vous allez créer une barre de navigation Macromedia Fireworks MX 2004 contenant des liens vers les différentes pages : salle d'exposition, nouvelles et événements, propriétaires, services financiers et section de prévisualisation. À un autre endroit de la page, vous allez créer un lien vers une page spéciale fournissant des informations actuelles sur les caractéristiques technologiques. Vous allez également créer un lien vers une page de résultats affichant les résultats de l'outil de recherche.
Personnalisation de freehand pour une sortie multimédia/web
FreeHand MX est une application de dessin vectorielle adaptée au Web et à l'impression. Avant d'établir un aperçu de votre navigation sur le site, vous allez personnaliser FreeHand pour une sortie multimédia/Web. Vous utiliserez les couleurs RVB et Web Safe tout au long du didacticiel en CHOISSANT des couleurs dans les menus déroulants de couleur de remplissage et de trait. Les menus déroulants de besoin de couleurs garantis pour le Web sont les mêmes que ceux se trouvant dans les autres outils Macromedia Studio MX 2004.
1 Dans FreeHand, créez un fichier en choisissant Fichier > Nouveau. 2 Dans la partie inférieure de la fenêtre de document, CHOISSEZ Pixels dans le menu déroulant Unités.
Remarque : L'unité de mesure par défaut pour un nouveau document est exprimée en points.
3 Dans l'inspecteur des propriétés, (Fenêtre > Document), cliquez sur l'onglet Document. 4 Choisissez Web dans le menu déroulant Format de la page.
Ceci crée une page avec une taille prédéfinie de 550 pixels sur 400 pixels. Vous pouvez également choisir Personnalisé dans le menu déroulant Format de la page et entrer les dimensions de votre choix en pixels.
5. Choisissez Édition > Préférences.
La boîte de dialogue Préférences s'affiche.
Cliquez sur l'onglet Couleurs et sélectionnez Aucun dans le menu déroulant Gestion des couleurs.
La déactivation de la fonction Gestion des couleurs permet d'afficher les couleurs dans un environnement RVB générique.
7 Cliquez sur OK. 8 (Facultatif) Sélectionnez Page entière dans le menu déroulant du zoom au niveau du coin inférieur gauche de la fenêtre de document.
Cette option permet de définir le facteur de zoom de sorte que la page active remplisse la fenêtre. Vous pouvez également définir manuellement un facteur de zoom. Le grossissement avec lequel vous choisissez de travailler dépend de la taille de l'écran de votre ordinateur et de vos propres préférences.
9 Enregistrer le nouveau document (Fichier > Enregistrer) avec le nom triojahication. FH11. Vous pouvez, si vous le souhaitez, enregistrer le nouveau fichier dans le répertoire principal du site Dreamweaver que vous avez créé dans Chapitre 6, Configuration d'un exemple de site ColdFusion Il est judicieux de conserver tous les fichiers du site dans un même emplacement.
Création de rectangles pour le plan de navigation
Une fois que vous avez personnalisé votre document pour le Web, vous êtes prêts à réaliser un dessin du plan de navigation sur le site dans FreeHand.
1 Assurez-vous que le fichier que vous venez de créer, triojahication.FH11, est ouvert dans la fenêtre de document. 2 Dans le panneau Outils, cliquez sur l'outil Rectangle et faites glisser un rectangle sur la page.
Lorsque vous relâchez le bouton de la souris, le nouveau rectangle reste sélectionné. Laissez-le sélectionné afin de pouvoir modifier ses propriétés.
Remarque: Ce didacticiel prend pour exemple un rectangle de 135 pixels de large et 52 pixels de haut. Vous pouvez afficher et définir les dimensions exactes d'un rectangle dans l'onglet Objet de l'inspecteur des propriétés (Fenêtre > Objet).
Dans le panneau Outils, cliquez sur la zone Remplissage et choisissez une couleur dans la palette de couleurs contextuelle pour l'intérieur du rectangle. L'exemple de ce didacticiel utilise la couleur bleue clair (CCCCFF) pour le remplissage du rectangle.
4 En gardant le rectangle toujours sélectionné, cliquez sur la zone Trait et choisissez une couleur dans la palette de couleur déroulante pour le contour du rectangle. La zone Couleur de trait se trouve au-dessus de la zone Remplissage dans le panneau Outils. L'exemple de ce didacticiel utilise un bleu plus foncé (000033) pour le Traits du rectangle. 5 Enregistrez le document (Fichier > Enregistrer). Pensez à enregistrer votre travail régulièrement au fur et à mesure que vous apportez des modifications. 6 Dans le panneau Outils, cliquez sur l'outil Texte et cliquez une fois à l'intérieur du rectangle.
Un bloc de texte apparaît à l'intérieur du rectangle avec une règle de texte au-dessus.
7 Dans l'onglet Objet de l'inspecteur des propriétés (Fenêtre > Objet), effectuez l'une des opérations suivantes :
- Sélectionnez Arial dans le menu déroulant Police.
- Sélectionnez Normal dans le menu déroulant Style.
- Sélectionnez 18 dans le menu déroulant Taille de police.
- Cliquez sur le bouton Centreur.
8 Dans le panneau Outils, cliquez sur la zone Remplissage et choisissez une couleur de remplissage pour le texte. L'exemple utilise 000033, la même couleur que le contour du rectangle. 9 Tapez le mot Home à l'intérieur du rectangle.
10 Cliquez en dehors du bloc de texte pour le déslectionner. 11 Sélectionnez à la fois le rectangle et le bloc de texte enCHOISIGANT Edition > SeLECTIONNER > SELECTIONNER tout. 12 Dans l'onglet Aligner du panneau Aligner et Transformer (Fenetre > Aligner), Sélectionnez Centrer dans les menus déroulants Horizontal et Vertical, puis cliquez sur Appliquer.
Le texte s'aligne verticalement et horizontalement au centre du rectangle.
13 Conservez le rectangle et le bloc de texte sélectionnés et choisissez Edition > Groupe. Le rectangle et le bloc de texte deviennent un objet groupé. 14 Choisissez Edition > Cloner.
Une copie de l'objet groupé s'affiche au-dessus du rectangle d'origine.
Remarque : La fonction de clonage est également disponible dans Fireworks MX 2004.
15 Faites glisser la copie de l'objet en dessous du rectangle d'origine, comme dans l'exemple.
16 Continuez à cloner et à faire glisser l'objet groupé d'origine jusqu'à ce que huit objets apparaissent sur la page. Disposez vos rectangles comme sur la figure ci-dessous à l'aide de l'outil Pointeur :
Les touches fléchées sur tout clavier vous permettent également de positionner les rectangles avec plus de précision. Les touches fléchées vous permettent de déplacer les objets vers le haut, vers le bas, vers la droite ou vers la gauche, par incréments d'un pixel.
Modification du texte du rectangle
Vous allez ensuite modifier le texte de vos rectangles pour décrire les différentes pages de ce site Web.
1 A partir du panneau Outils, cliquez sur l'outil Sous-selection.
2 Cliquez sur le mot Home dans le deuxième rectangle (au-dessous du premier rectangle sur la page) pour sélectionner le bloc de texte. 3 A partir du panneau Outils, cliquez sur l'Outil Texte. 4 Sélectionnez le texte du bloc de texte sélectionné en maintenant le bouton de la souris enfoncépendant que vous la faites glisser sur le mot Home. 5 Tapez le terme Showroom.
6 Cliquez sur une zone vierge du document pour déselectionner le bloc de texte. 7 Répétez les étapes 1 à 6 pour les autres rectangles en vous servant du texte suivant : News and Events, Owners, Financial Services, Previews, Featured Technology et Search.
Pour du contenu textuel plus long, tel que Financial Services, appuyez sur Entrée (Windows) ou Retour (Macintosh) après le premier mot et entrez les mots suivants sur la deuxième ligne. Cliquez en maintenant la touche Maj enfoncée sur le bloc de texte et le rectangle à l'aide de l'outil Sous-sélection. Réalignez le texte au centre du rectangle en sélectionnant Centrer dans les menus déroulants Horizontal et Vertical dans le panneau Aligner et Transformer (Fenêtre > Aligner).
Une fois que vous avez terminé, votre document doit ressembler au diagramme ci-dessous :
Ajout de lignes connecteur au document
Vous allez maintenant utiliser le nouvel outil Connecteur dans FreeHand pour ajouter des lignes connecteur au document. Les lignes connecteur montrent comment la page d'accueil est liée aux fichiers individuels spécifiés.
1 A partir du panneau Outils, cliquez sur l'Outil Connecteur.
2 Déplacez le pointeur sur la ligne inférieure du rectangle Home. 3 Maintenez le bouton de la souris enfoncé et faites glisser une ligne connecteur sur la ligne supérieure du rectangle Showroom. Dès que vous commencerez à faire glisser la ligne, le rectangle Home est sélectionné, indiquant qu'il existe un objet à partir duquel une ligne connecteur peut démarrer. Lorsque vous atteignez le rectangle ShowShowroom, ce dernier devient aussi sélectionné, indiquant qu'il existe un objet où la ligne connecteur peut s'arrêter.
4 Relâchez le bouton de la souris.
Une ligne connecteur s'affiche entre le rectangle Home et le rectangle Showroom.
Remarque : Si l'espace entre les rectangles n'est pas suffisant pour les flèches par défaut de la ligne connecteur, l'outil ne peut pas dessiner la ligne correctement. Si vous rencontrez ce problème, essayez d'augmenter l'espace entre les rectangles.
5 Positionnez le pointeur près du point de départ de la ligne connecteur que vous avez dessinée lors des étapes précédentes (ligne inférieure du rectangle Home) et maintenez le bouton de la souris enfoncé de façon à ce que le rectangle Home soit de nouveau sélectionné.
6 Faites glisser une autre ligne connecteur vers la ligne supérieure du rectangle News and Events. L'outil Connecteur peut être sensible. Vous pouvez avoir besoin d'un peu d'entraînement. Veillez à ce que les deux rectangles soient sélectionnés avant de relâcher le bouton de la souris.
7 Dessinez une troisième ligne connecteur entre la partie inférieure du rectangle Home et la partie supérieure du rectangle Owners.
8 Dessinez une quatrième ligne connecteur entre la ligne inférieure du rectangle Home et la partie supérieure du rectangle Financial Services.
9 Déplacez le pointeur sur les poignées au centre de la ligne horizontale que vous avez dessinée à l'étape 8.
Le pointeur prend la forme d'un pointeur de redimensionnement.
10 Faites glisser la ligne horizontalement vers le haut jusqu'à ce qu'elle chevauche l'autre ligne horizontalement de la page, tel qu'illustré ci-dessous.
11 Continuez à dessiner des lignes connecteur jusqu'à ce que le rectangle Home soit lié à tous les autres rectangles de la page. Modifiez la forme des lignes connecteur comme vous le souhaitez en faisant glisser les poignées de redimensionnement sur les lignes connecteur.
Vous avez précédemment un document FreeHand indiquant un plan de navigation complet. Les lignes mettent en évidence que la page Home est liée à cinq pages différentes : Showroom, News and Events, Owners, Financial Services et Previews. Elle est également liée à une page sur les caractéristiques technologiques ainsi qu'à une page fournissant les résultats d'une application de recherche que vous allez créer plus tard.
Exportation du plan au format SWF
Après avoir fait un dessin de votre navigation sur le site, vous pouvez désenter l'avant-projet à votre client ou aux membres de votre groupe dans une fenêtre de navigateur. Ceci est particulièrement pratique si vous souhaitez partager le document avec des personnes ne disposant pas de FreeHand.
1 Avec votre plan de navigation ouvert dans FreeHand, sélectionnez Fichier > Exporter. La boîte de dialogue Exporter le document (Windows) ou Exporter (Macintosh) s'affiche.
2 Sélectionnez Macromedia Flash (SWF) dans le menu déroulant Type (Windows) ou Format (Macintosh). 3 (Facultatif) Si vous pouvez que le fichier soit ouvert avec Macromedia Flash Player immédiatement lors de l'exportation, Sélectionnez Ouvrir dans une application externe, puis Macromedia Flash Player dans la boîte de dialogue Sélection d'une application externe et cliquez sur Ouvrir.
Cliquez sur Enregistrer (Windows) ou sur Exporter (Macintosh).
Le fichier est exporté au format Flash SWF à l'emplacement spécifique dans la boîte de dialogue Exporter le document (Windows) ou Exporter (Macintosh). Si vous avez sélectionné Ouvrir dans une application externe, le plan s'ouvre dans Macromedia Flash Player.
Vous pouvez maintenant présenter le plan sur tout ordinateur exécutant un navigateur Web et Flash Player. Pour visualiser le plan dans une fenêtre de navigateur, faites glisser le fichier triojahication. swf dans un navigateur ouvert, tel qu'Internet Explorer ou Netscape Navigator. Vous pouvez également présenter le plan uniquement avec Flash Player en cliquant deux fois sur le fichier.
Remarque : Lorsque vous ouvrez le fichier triojahigation. swf dans un navigateur, le plan est automatiquement redimensionné afin qu'il occupe tout l'espace disponible dans la fenêtre du navigateur.
Des versions terminées des fichiers que vous avez créés tout au long de ce didacticiel sont disponibles dans le répertoire trio_motorscomplete du CD de Macromedia Studio MX 2004. Pour localiser ce répertoire, insérez votre CD de Macromedia Studio MX 2004, sélectionnez l'option d'exploration du contenu du CD, puis sélectionnez le dossier d'examples Samples.
Pour plus d'informations sur les procédures décrites dans ce didacticiel, voir l'aide Utilisation de FreeHand.
Création d'une mise en forme basée sur un tableau dans dreamweaver
Ce didacticiel indique comment créer une mise en forme basée sur un tableau dans Macromedia Dreamweaver MX 2004. La mise en forme détermine la manière dont votre page s'affichera dans le navigateur, par exemple où seront placés les menus, les images et le contenu de Macromedia Flash MX 2004.
Avant de poursuivre ce didacticiel, il est conseillé de voir Chapitre 7, Processus de développement Web. Ce chapitre décrit les différentes fonctions de mise en forme dans Dreamweaver, dont les cellules de mise en forme et les feuilles de style en cascade (CSS). Pour plus d'informations, voir Planification de la conception et de la mise en forme de la page, page 100.
Ce didacticiel contient les sections suivantes :
Insertion de tableaux, page 131
Définition des propriétés d'un tableau, page 133
Insertion d'un espace réservé pour l'image, page 136
Ajout de texte de l'espace réservé dans les cellules de tableau, page 136
Insertion de tableaux
Ce didacticiel débute par l'insertion de tableaux qui contiendront des actifs de texte, de graphiques et d'application. La page correspondra à la page d'index pour Trio Motors, une entreprise fictive qui vend des automobiles à faible consommation.
1 Dans Dreamweaver, ouvre le fichier index.cfm que vous avez créé au Chapitre 6, Configuration d'un exemple de site ColdFusion
Remarque : Si vous n'avez pas procédé à la configuration d'un site Macromedia ColdFusion MX décrite au chapitre 6, vous devez le faire avant de poursuivre. Les didacticiels Dreamweaver de la seconde partie du manuel sont créés les uns par rapport aux autres et vous demandent de définir un site Dreamweaver, de créer des dossiers pour vos actifs et d'établir une connexion à une base de données.
Si vous ne possédez pas ColdFusion MX, vous pouvez toujours utiliser ce didacticiel avec une page HTML vide à la place d'une page ColdFusion. Pour créer une page HTML vide, sélectionnez Fichier > Nouveau. Dans l'onglet Général de la boîte de dialogue Nouveau document, sélectionnez Page de base dans la liste Catégorie, puis cliquez sur Créer.
2 Cliquez une fois sur la page pour placer le point d'insertion dans l'angle supérieur gauche de la page.
3 Sélectionnez Insertion > Tableau.
La boîte de dialogue Tableau s'affiche.
Dans la boîte de dialogue Tableau, procédez de la manière suivante :
Entrez 1 dans la zone de texte Lignes. Entrez 1 dans la zone de texte Colonnes. - Entrez 650 dans la zone de texte Largeur du tableau. - Sélectionnez Pixels dans le menu contextuel Largeur du tableau. Entrez 0 dans la zone de texte Largeur de la bordure. - Entrez 0 dans la zone de texte Marge interieure des cellules. - Entrez 0 dans la zone de texte Espacement entre les cellules.
5. Cliquez sur OK.
Un tableau avec une ligne et une colonne s'affiche dans votre document.
6 Cliquez une fois sur la page à droite du tableau pour le désélectionner. 7 Sélectionnez Insertion > Tableau pour insérer un autre tableau. 8 Dans la boîte de dialogue Tableau, procédez de la manière suivante pour le deuxième tableau :
Entrez 2 dans la zone de texte Lignes. Entrez 1 dans la zone de texte Colonnes. - Entrez 650 dans la zone de texte Largeur du tableau. - Sélectionnez Pixels dans le menu contextuel Largeur du tableau. - Entrez 0 dans la zone de texte Largeur de la bordure. - Entrez 0 dans la zone de texte Marge intérieure des cellules. Entrez 0 dans la zone de texte Espacement entre les cellules.
Un deuxième tableau avec deux lignes et une colonne s'affiche au-dessous du premier tableau.
9 Cliquez à droite du tableau pour le désélectionner.
10 Insérez un troisième tableau en sélectionnant Insertion > Tableau et en effectuant les opérations suivantes dans la boîte de dialogue tableau :
Entrez 1 dans la zone de texte Lignes. Entrez 2 dans la zone de texte Colonnes. - Entrez 650 dans la zone de texte Largeur du tableau. - Sélectionnez Pixels dans le menu contextuel Largeur du tableau. - Entrez 0 dans la zone de texte Largeur de la bordure. - Entrez 4 dans la zone de texte Marge intérieure des cellules. Entrez 6 dans la zone de texte Espacement entre les cellules.
Un troisième tableau avec une ligne et deux colonnes s'affiche au-dessous du deuxième tableau.
Cliquez à droite du tableau pour le désélectionner. Votre page doit maintenant ressembler à la page suivante :
Remarque: Le sélecteur de tableau (indiqué par des lignes vertes) s'affiche après l'insertion d'un tableau. Pour le faire disparaître, cliquez à l'intérieur d'un autre tableau et cliquez à nouveau à l'extérieur du tableau.
Définition des propriétés d'un tableau
Vous allez maintenant définir les propriétés précises des tableaux à l'aide du mode Tableaux développement. Le mode Tableaux développement ajoute des marges à l'intérieur des cellules et de l'espacement dans les tableaux. Il permet également d'augmenter les bords des tableaux pour facilitater les opérations de modification. Cela vous permet particulièrement de placer le point d'insertion de manière précise sans sélectionner accidentellement le mauvais tableau ou tout autre contenu du tableau.
Remarque : Lorsque vous avez terminé d'apporter vos modifications en mode Tableaux développementés, vous devez toujours revenir au mode Standard. Le mode Tableaux développementés n'est pas un environnement WYSIWYG, certaines opérations, telles que le redimensionnement, ne donneront donc pas le résultat attendu.
Sélectionnez Affichage > Mode Tableau > Mode Tableaux développement.
Remarque: Si vous consultez le guide de démarrage avec la boîte de dialogue Mode Tableaux développementés, cliquez sur OK.
2 Cliquez une fois à l'intérieur du premier tableau. 3 Dans l'inspecteur des propriétés (Fenêtre > Propriétés), tapez 45 dans la zone de texte Hauteur des cellules et appuyez sur Entrée (Windows) ou Retour (Macintosh).
Remarque: Si vous ne VOYEZ pas la zone de texte Hauteur des cellules, cliquez sur la flèche d'extension dans l'angle inférieur droit de l'inspecteur des propriétés.
4 Cliquez à droite du premier tableau pour placer le point d'insertion à l'extérieur du tableau. 5 Appuyez sur Maj + Entrée (Windows) ou sur Maj + Retour (Macintosh) pour placer un saut de ligne entre le premier et le deuxième tableau. 6 Cliquez une fois à l'intérieur de la première ligne du deuxième tableau. 7 Dans l'inspecteur des propriétés, effectuez la procédure suivante :
- Tapez 10 dans la zone de texte Hauteur des cellules et appuyez sur Entrée (Windows) ou Retour (Macintosh).
- Choisissez le gris (#CCCCCC) dans le menu contextuel Couleur d'arrière-plan.
Remarque : Vous ne verrez pas la hauteur de la cellule du tableau gris passer à dix pixels car vous êtes en mode Tableaux développement.
8 Cliquez une fois à l'intérieur de la deuxième ligne du tableau. 9 Dans l'inspecteur des propriétés, tapez 175 dans la zone de texte Hauteur des cellules et appuyez sur Entrée (Windows) ou Retour (Macintosh). 10 Cliquez une fois à l'intérieur de la première colonne du troisième tableau. 11 Dans l'inspecteur des propriétés, tapez 308 dans la zone de texte Largeur des cellules et appuyez sur Entrée (Windows) ou Retour (Macintosh).
12 Répétez l'étape 11 pour définir la largeur de la deuxième colonne à 308 pixels.
Votre mise en forme doit maintenant ressembler à la suivante :
13 Cliquez sur le lien [quitter] dans la barre intitulée Mode Tableaux développés en haut de la fenêtre Document pour revenir au mode Standard.
Insertion d'un espace réservé pour l'image
Un espace réservé pour une image est un graphique que vous utilisez jusqu'à ce que le dessin final soit prêt à être ajouté à une page Web. Un espace réservé pour l'image est utile lors de la mise en forme de pages Web car il permet de placer une image sur une page avant même d'avoir créé l'image.
1 Dans la fenêtre de document, cliquez une fois à l'intérieur du premier tableau. 2 Sélectionnez Insérer > Objet image > Espace réservé pour l'image.
La boîte de dialogue Espace réservé pour l'image s'affiche.
3 Dans la boîte de dialogue Espace réservé pour l'image, procédez de la manière suivante :
- Tapez banner Graphic dans la zone de texte Nom. Entrez 650 dans la zone de texte Largeur. Entrez 45 dans la zone de texte Hauteur.
- Choisissez le bleu clair (#CCCCFF) dans le menu contextuel Couleur.
- Entrez Bannière Trio Motors dans la zone de texte Autre.
4 Cliquez sur OK.
L'espace réservé pour l'image apparait à l'intérieur du premier tableau. Il affiche une étiquette et les attributs de taille de l'image qui sera créé.
BANNER GRAPHIC (650 x 45)
Remarque : Lorsqu'ils sont affichés dans un navigateur, le texte de l'étiquette et de la taille d'un espace réservé pour l'image n'apparaissent pas.
Dans le didacticiel suivant, Didacticiel 3, Création d'une bannière dans Fireworks, vous utiliserez Macromedia Fireworks MX 2004 pour créer une bannière Trio Motors et remplacer l'espace réservé pour l'image.
Ajout de texte de l'espace réservé dans les cellules de tableau
Vous allez maintenant ajouter le texte de l'espace réservé à votre mise en forme et créer des styles CSS.
1 Cliquez une fois à l'intérieur de la première colonne du troisième tableau (tableau inférieur) et saisissez les mots FEATURED TECHNOLOGY en majuscules. 2 Appuyez sur Entrée (Windows) ou sur Retour (Macintosh) pour créer davantage d'espace dans la cellule de tableau. 3 Sélectionnez la ligne de texte que vous venez d'entrer. 4 Dans l'inspecteur des propriétés (Fenêtre > Propriétés), procédez de la manière suivante :
- Dans le menu déroulant Police, Sélectionnez Arial, Helvetica, sans serif. Dans le menu contextuel Taille, sélectionnez 14.
- Dans le menu contextuel Couleur, Sélectionnez le bleu foncé (#000033).
Le texte devient défini comme style1.
Vous allez ensuite modifier le style1 de façon à ce que tout votre style1 soit en gras.
Dans le panneau Styles CSS (Fenêtre > Styles CSS), cliquez sur le bouton Plus (+) situé près de la balise
