Dévéloppement de Sites Web

Transcription

1 1 Dévéloppement de Sites Web Cours III : Travailler avec Dreamweaver de Macromedia Peter Stockinger Séminaire de Maîtrise en Communication Interculturelle à l'institut National des Langues et Civilisations Orientales (INaLCO) Paris,

2 2 Sommaire INTRODUCTION ) L'ENVIRONNEMENT DE TRAVAIL DE DREAMWEAVER (UNE BREVE PRESENTATI ON) ) LA FENETRE DU DOCUMENT (DE LA SCENE) A CREER ) LA PALETTE DES OBJETS ) LE LANCEUR ) LES PRINCAPLES RUBRIQUES ) CREER ET ORGANISER UN ESPACE DE TRAVAIL ) CREER UN SITE LOCAL ) PRODUIRE UNE PREMIERE ESQUISSE DE LA SCENE D'ACCUEIL ) PRODUIRE UNE PREMIERE ESQUISSE DES PRINCIPALES SCENES DU SITE ) A CONSULTER AUSSI... 51

3 3 Introduction Il s'agit d'un cours pratique. Son objectif est de vous guider dans la conception et le développement de votre site web. Il ne constitue cependant pas un guide d'utilisation du logiciel Dreamweaver. Pour cela, il faut se référer aux aides en ligne du dit logiciel. En effet, le développement de votre site se fera essentiellement à l'aide du logiciel Dreamweaver de Macromedia (versions 3 et 4). Afin de vous familiariser - en dehors des cours - avec les différentes fonctions de ce logiciel (beaucoup plus complexe qu'on ne le croit habituellement), je vous conseille très fortement : - de suivre le didacticiel inclu dans le logiciel afin d'apprendre sur la base d'un exemple concret les principales fonctionnalités (lancez Dreamweaver et choisissez Aide > Didacticiel)

4 4 (figure 1) - de vous obligez à consulter régulièrement (tous les deux jours, au moins) une rubrique particulière dans Aide > Utilisation de Dreamweaver (l'aide en ligne est très bien conçue et vous permettra, en principe, d'acquérir une bonne connaissance du logiciel) (figure 2) - de vous obligez TRES régulièrement à travailler concrètement avec le logiciel (en effet, le projet de création d'un site web est là pour cela : si vous le prenez au sérieux, il devrait vous occuper chaque jour une ou deux heures et cela au moins pendant cinq à six mois );

5 5 - de consulter régulièrement le site de la société Macromedia ( pour d'éventuelles nouveautés, mises à jour, voire aussi aides et conseils relatifs au logiciel Dreamweaver. Ce cours est divisé en trois parties : - La première partie (chapitres 2 à 5) est consacrée à une brève présentation de l'environnement de travail du logiciel Dreamweaver. - La deuxième partie (chapitres 6 et 7) est consacrée aux tâches relatives à la mise en place de dossiers (répertoires) de fichiers devant contenir votre site et à la définition d'un site web dans Dreamweaver - La troisième partie (chapitre 8 et 9) est consacrée à la production de fichiers html très simples qui correspondent aux différentes scènes que vous avez préalablement identifiées et décrites dans l'organigramme - scénario - de votre site (cf. cours 2).

6 6 Conseil : avant de continuer à travailler ce cours : - Lancer, sur le PC, le bouton "programmes", cherchez "Dreamweaver 3 (ou 4)" et ouvrez le - Attendez quelques secondes avant que son environnement de travail soit complètement ouvert - Faites des va et vient entre le cours et le logiciel afin d'acquérir une première compréhension globale du logiciel et de son environnement - Si vous souhaitez faire quelques expériences d'utilisation, faites-les mais - attention : ce n'est qu'à partir du cours IV - concevoir et réaliser une page web - que nous commençons à réellement travailler avec Dreamweaver; ce cours est destiné à vous transmettre une compréhension globale du logiciel en question.

7 7 1) L'environnement de travail de Dreamweaver (une brève présentation) Après le lancement du logiciel Dreamweaver, s'ouvre une interface (paramétrable) qui constitue l'environnement de travail sur Dreamweaver. (figure 3) L'environnement de travail est constitué par un ensemble de composants nécessaires audéveloppement et à la gestion d'un site:

8 8 - la fenêtre du document, de la scène du site à créer ou modifier - la palette des objets contenant les objets que l'on utilise d'une manière récurrente lors de la création d'un site - le lanceur qui propose un raccourci vers les principaux "inspecteurs" (programmes d'aide à la construction/gestion d'un site) - enfin, la barre de menu organisée en grandes rubriques qui correspondent aux principales activités de la création/gestion d'un site ("fichier", "édition", "affichage", ). Les chapitres suivants seront consacrés à un petit tour de présentation de ces différents composants (cf. chapitres 2 à 5). Ceci étant, comme déjà dit, vous devez consulter les aides en ligne du logiciel pour pouvoir les maîtriser d'une manière plus approfondie.

9 9 2) La fenêtre du document (de la scène) à créer (figue 4) Lorsqu'on lance Dreamweaver, s'ouvre la fenêtre principale (avec, par défaut, quelques outils tels que le lanceur, la palette des objets, etc. La fenêtre principale ressemble à celle d'un logiciel de traitement de texte mais elle ne doit pas être confondue avec cette dernière : page blanche sur laquelle on

10 10 assemble les différents éléments qui la compose : texte, images, formulaires interactifs, etc. Note : faites quelques exercises de traitement de texte; écrivez ceci est ma page d'accueil ou formuler un message de bienvenu sur votre site (figure 5) La partie inférieure à gauche affiche les balises HTML en jeu lorsque vous insérez tel ou tel élément dans une page ou lorsque vous procédez à sa composition graphico-topographique. La partie inférieure à droite: - Montre la taille de la fenêtre qui doit être choisie en fonction à la taille de l'écran qui sert comme référence (cf. plus loin, dans ce chapitre) - Montre la taille du fichier Elle vous permet également d'accèder directement à un ensemble de fonctions/outils importants : - Plan du site

11 11 - Eléments html prédéfinis dont vous vous servez pour la réalisation d'une page web - Page source (i.e. en format HTML) - Palette des cadres - Palettes des comportements (interactifs) - Palettes des calques, - Etc. Consacrez un petit moment à la partie inférieure et essayez de vous imprégner des différentes fonctions/informations que l'on peut y trouver Note : écrivez sur la page blanche "c'est la page d'accueil du site " et cliquez ensuite sur l'icône <> qui vous donne accès au format HTML.

12 12 (figure 6) Veuillez considérer plus en détail le format HTML - le codage HTML de cette page d'acueil très simple et le comparer avec ce que vous avez appris dans le cours II consacré à une très brève introduction en HTML: toutes les pages HTML possèdent deux parties - une partie "entête" et une partie "corps". Le contenu à proprement parler d'une page est dans la partie "tête". La phrase elle-même est entourée par la l'ouverture et la fermeture de la balise <p> (i.e. "paragraph", en anglais).

13 13 Certains traitements d'une page web ne pourront pas être entrepris sans le recours au code HTML; il est donc bien utile de s'imprégner de l'écriture et de la syntaxe (très simple ) du langage HTML et du formatage d'une page en HTML.

14 14 3) La palette des objets (figure 7) Comme son nom l'indique déjà, cette palette réunit l'ensemble des principaux objets dont vous avez besoin (qui sont proposés par Dreamweaver) pour le développement et la réalisation d'un site.

15 15 Si la palette ne s'affiche pas, ouvrez dans la barre de menu la rubrique "fenêtre" et sélectionnez "objets" (figure 8) Par défault, ce sont les objets dits communs qui s'affiche lorsque la palette se lance. Parmi les objets communs les plus importants, nous avons : - L'insertion d'une image, - L'insertion d'un tableau (qui est certainement un sinon l'élément le plus important pour la composition d'une page web (cf. le cours IV) - L'insertion d'un calque - L'insertion d'un lien "messagerie" électronique - L'insertion de la date - L'insertion de liens vers des objets extérieurs à Dreamweaver (Shockwave, Flash, Fireworks; cf. plus tard).

16 16 Veuillez examiner, l'un après l'autre les différents objest dit communs. (figure 9) Mais, à côté des objets dits communs, la palette d'objets contient encore plusieurs autres familles d'objets très importants pour la bonne réalisation d'une page ou d'un site web :

17 17 - Les objets appartenant à la famille des cadres (destinés surtout à la composition d'une page en deux ou plusieurs cadres fonctionnellement distincts; cf. le cours IV) - Les objets appartenant à la famille des formulaires (i.e. d'éléments interactifs ou dynamiques tels que l'envoi de messages, le choix entre plusieurs options, etc.) - Les objets appartenant à la famille "entête" permettant notamment une meilleure description-indexation d'une page web (cf. le cours IV), - Etc. Veuillez examiner, un par un ces différents objets - ils sont tous très importants pour la réalisation d'un site web. Nous y reviendrons encore dans les prochains cours.

18 18 4) Le lanceur (fig 10) Le lanceur vous donne un accès direct à un ensemble d'outils nécessaires pour créer votre site web. Il peut être configuré par vous même (et donc vous servir comme une interface vous donnant accès aux outils que vous utiliser le plus). Par défaut, le lanceur donne accès aux mêmes outils que la partie inférieure droite de votre page web: - Structure, organisation de votre site (cf. plus loin) - Bibliothèque d'éléments HTML (cf. cours IV) - Style CSS (cf. cours IV) - Source HTML (votre page web en format HTML) - Historique (archivant chacune de vos actiosn sur une page web vous permettant ainsi de revenir sur vos pas ) - Etc.

19 19 Pour paramétrer le lanceur selon vos besoins, ouvrez la sous-rubrique "préférences" et cliquez sur "palettes flottantes" (figure 11) Vous pouvez sélectionner, maintenant, les outils qui doivent être accessibles via le lanceur Note : si le lanceur ne s'affiche pas, allez dans la rubrique "fenêtre" de la barre de menu et cliquez sur "lanceur"

20 20

21 21 5) Les princaples rubriques La barre de menu est organisée en grandes rubriques qui correspondent aux principales activités de la création/gestion d'un site ("fichier", "édition", "affichage", ). Voici les rubriques : - rubrique "fichier" (qui recouvre toutes les activités relatives à la gestion d'un fichier : ouverture, fermeture, enregistrement, importation, ) - rubrique "édition" (qui recouvre toutes les activités relatives à l'édition du contenu d'un fichier : couper, coller, sélectionner, ) - rubrique "affichage" (qui englobe les différents choix relatifs à la visualisation des éléments sur lesquels ou avec lesquels on travaille: bordures des différents éléments, contenu de l'en-tête du fichier html, éléments invisibles, ) - rubrique "insertion" (qui recouvre les différents éléments - en dehors du texte - que l'on peut insérer dans un fichier afin de "mettre en scène" un certain contenu: insertion d'images, de médias, de formulaires, ) - rubrique "modifier" (rubrique un peu plus hétéroclite qui recouvre les différentes possibilités d'apporter des changement, des modifications à un

22 22 fichier préalablement crée: propriétés d'une page, d'une sélection, d'un lien, ) - rubrique "texte" (qui recouvre toutes les options de la "mise en texte" d'un contenu: polices de caractères, taille, ) - rubrique "commandes" (également une rubrique plutôt hétéroclite qui recouvre différentes instructions automatisées que Dreamweaver peut exécuter dont, notamment, le nettoyage des pages html produit par Word) - rubrique "site" (qui recouvre toutes les activités relatives à la gestion d'un site: définition d'un site, gestion à distance, ) - rubrique "fenêtre" (qui recouvre - sous forme d'interfaces graphiques - les principaux outils de travail dont on dispose dans l'environnement dudit logiciel: inspecteurs des propriétés de tel ou tel élément, lanceur, calques, cadres, comportements, ) - rubrique «aide» (qui recouvre les différentes formes d'aide proposées par Dreamweaver) Bien sûr, il faut connaître toutes les rubriques du logiciel. Voici seulement quelques aspects plus particulièrement importants des dites rubriques dans la réalisation d'un site web.

23 23 Rubrique "Fichier" (fichier 12)

24 24 Cette rubrique, dans l'essentiel, ressemble à celle d'un logiciel de traitement de texte : - Nouveau : ouvrir une nouvelle page - Ouvrir : ouvrir une page déjà existante, - Etc. A noter, cependant, l'existence de plusieurs commandes sur lesquelles nous allons encore revenir dans les cours suivants : enregistrer comme modèle, importer, convertir, Très important ici la commande "aperçu dans le navigateur" qui veut dire : "montre moi la page web telle que je suis en train de la réaliser dans le navigateur - Internet Explorer et/ou le Navigateur Netscape C'est très important pour les raisons suivantes : - La page telle qu'on la voit dans un éditeur HTML n'est pas (obligatoirement) la même que voit l'internaute avec son navigateur - - Il existe toujours (hélàs) des différences parfois très importantes entre les différents navigateurs et donc si une page s'affiche correctement dans un navigateur, elle ne s'affiche pas obligatoirement d'une manière correcte dans un autre navigateur.

25 25 Il est très fortement conseillé de toujours vérifier dans au moins deux navigateurs différents (en général Internet Explorer de Microsoft - versions 4 + et Netscape Communicator version 4.5 +) la page web que l'on est en train de réaliser. Note : Les deux principaux navigateurs (et concurrents) sont : - Internet Explorer de Microsoft (qui s'impose comme référence de facto) : versions 4; 4.7; 5; 5.5; 6) - Netscape Communicator (versions 4, 4.5; 4.7, 6; 6.1) Deux autres navigateurs sont : - Mozilla (version 0.97) - Opera Les grands fournisseurs proposent, de plus en plus souvent leurs versions de navigateurs: exemple: France Explorer, Wanadoo, AOL, etc. Rubrique "Edition" Aussi la rubrique "édition" ressemble beaucoup à celle d'un logiciel de traitement de texte.

26 26 (figure 13) Veuillez les consulter et examiner leur fonctionnement A noter cependant deux rubriques importantes : - Lancer un éditeur externe (on peut lancer, à partir de Dreamweaver, un autre éditeur HTML pour fabriquer une page ) - Préférences que nous avons déjà cité dans le chapitre précédent. Dans les préférences, on peut adapter un ensemble de dimensions du logiciel ainsi que de ses composants à ses propres besoins, etc.

27 27 Veuillez les consulter et les examiner attentivement - elles vous permettent d'acquérir une bonne compréhension de l'ensemble du logiciel. Mais attention : ne changez pas les préférences par défaut (c'est-à-dire : lorsque vous quitter la boîte de dialogue "préférences", ne cliquez SURTOUT pas sur "ok" mais sur "annuler") Rubrique "Affichage" (figure 14) Comme le nom l'indique déjà, cette rubrique réunit les différentes instructions relatives à l'affichage d'un ensemble d'objets et d'outils intervenant dans la création d'une page web - objets et outils que nous connaîtrons davantage dans les cours suivants. Pour le moment, considérer les instructions suivantes : - Règles (afficher/pas afficher) - Grilles (afficher/pas afficher)

28 28 Faites vos propres expériences. L'affichage des règles (en pixels, de préférence) vous permet d'avoir une idée précise de la taille de votre page, de ses diférents élements et de la distribution spatiale entre les différents élements. L'affichage de la grille (paramètrable) vous donne un contrôle précis sur l'alignement des élements les uns par rapport aux autres et de leur distribution dans l'espace. Cliquez également sur "Barre d'état" (afficher/pas afficher) - vous verrez disparaître/apparaître la barre de la partie inférieure de votre page Sur les autres instructions, nous reviendrons dans les cours suivants Rubrique "Insertion"

29 29 (figure 15) Cette rubrique - centrale - réunit l'ensemble des instructions relatives à l'insertion des différents éléments (objets) composant votre page web (en dehors de l'objet "texte" pour lequel il existe une rubrique à part): - Insertion des images - Insertion d'un tableau - Insertion de formulaires, - Comparez cette rubrique avec la palette d'objets - vous verrez qu'il s'agit ici de deux interfaces similaires. C'est à l'utilisateur de choisir l'une ou l'autre - voire les deux - selon ses habitudes.

30 30 Vous ne pouvez pas encore insérer des objets. Imprégnez vous seulement des différentes instructions. Elles deviendront importantes à partir du cours prochain Rubrique "Modifier" (figure 16) Une fois des objets (images, formulaires, ) insérer dans une page, on peut avoir besoin de les modifier. C'est dans cette rubrique que l'on trouve réunit les instructions relatives à cette activité: - Modification d'un tableau

31 31 - Modification d'un lien - Etc. Cette rubrique contient des instructions très importantes sur lesquelles nous reviendront dans le cours IV et qui concernent : - D'une part la production et l'utilisation de modèles de page - D'autre part la modification des propriétés (visuelles) qui affectent l'ensemble d'une page. Rubrique "Commandes" (figure 17) Cette rubrique nous intéressera plus tard. A noter :

32 32 - La commande "nettoyage HTML et "nettoyage HTML Word" (pour adapter une page word enregistré en HTML au codage plus "propre" de Dreamweaver") - "correction pour Netscape" (corriger une pagepour qu'elle soit correctement visible dans Netscape ), - La possibilité d'ajouter toute une liste de commandes particulières que l'on peut télécharger du site de Macromédia (constructeur du logiciel Dreamweaver) Rubrique "Site" (figure 18)

33 33 Une page web fait partie d'un site. Un site est composé d'une part d'un ensemble de pages, images, documents, programms, etc qui se trouvent tous ensemble, sous forme de fichiers, dans un repertoire (ou dossier) comportant le nom du site à développer. Nous y reviendrons encore plus loin. Ceci étant, la rubrique en question réunit l'ensemble d'instruction relativement à la gestion d'un site web : - Créer un nouveau site - Modifier les paramètres d'un site déjà existants - Ouvrir un site déjà existant - Se connecter sur un site distant (i.e. se trouvant sur le serveur web qui diffuse le site via Internet) - Envoyer un fichier sur le site distant, - Récuperer un fichier du site distant - Vérifier les liens dans un site - Obtenir un organigramme d'un site à partir du fichier racine (qui contient la page d'accueil du site) - Etc. Nous y reviendrons encore.

34 34 Rubrique "Fenêtre" (figure 19) C'est certainement la rubrique la plus riche. Elle permet l'affichage de toute une gamme de fenêtres spécialisées : - Objets (= fenêtre de la palette des objets) - Propriétés (= fenêtre contenant toutes les propriétés d'un élement composant une page web, nous y reviendrons) - Lanceur (= fenêtre du lanceur) - Fichiers du site (fenêtre affichant tous les fichiers comosant le site) - Carte de site (= fenêtre affichant l'organigramme du site)

35 35 - Bibliothèque (= fenêtre affichant des élements HTML pré-définis) - Style CSS (= fenêtre affichant les "feuilles de styles, on y reviendra dans le cours IV) - Comportements (= fenêtre affichant les différents types d'interactions) - Source HTML (fenêtre affichant la source HTML d'une page web) - Cadres, calques et modèles (= fenêtres affichant les "bibliothèques de calques, cadres et modèles qu'on utilise pour telle ou telle page ou pour le site) - Historique (= fenêtre dans laquelle sont affichées toutes vos actions sur une page web et qui vous permet de revenir sur vos décisions ). Nous allons les connaître tous au cours du développement de nos sites de recherche. Pour le moment, veuillez les activer et les "inspecter"

36 36 6) Créer et organiser un espace de travail Avant de commencer à développer un site web, il est absolument nécessaire de définir sur le disque dur l'endroit de création du site. Pour cela, il faut : - Ouvrir le (un) disque dur, - [Ouvrir son dossier (répertoire) personnel (qui se trouve soit au niveau du disque dur soit dans le dossier - répertoire - "utilisateurs")] - Créer un nouveau dossier qui contiendra le site à développer - Nommer ce nouveau dossier (exemple : "management_culturel") (figure 19)

37 37 Le dossier contenant le site constitue la racine du site. Par exemple, le dossier "management_culturel" constitue le dossier racine du site web comportant des informations et des services relatifs à une meilleure compréhension du management culturel. Par ailleurs, il est très utile de procéder à une organisation préalable de l'espace interne du dossier contenant le site (i.e. toutes les ressources constituant le site). Ci-après un petit exemple très simple d'une telle structuration interne.

38 38 (figure 20) Pour les projets en cours, il est en effet recommandé de commencer à organiser le dossier (répertoire) comme suit : Répertoire racine (ex. management_culturel) Sous-répertoire gestion_site Sous-sous-répertoire images Sous-sous-répertoire modèles Sous-sous-répertoire archives Sous-répertoire documents Sous-répertoire définitions Sous-répertoire savoir_plus Sous-répertoire(s) <thème 1 - thème N> Sous-répertoire communauté Note : cette structure devra être adaptée aux spécificités de chaque projet; aussi, évoluera-t-elle progressivement. Note : il est très recommandé de se soumettre à une certaine "discipline" et de classer les différentes ressources (fichiers, documents, animations, scripts, ) dans les sous-répertoires correspondants. racine Note : la page d'accueil figurera directement en dessous du dossier (répertoire) Par exemple, le répertoire contenant les ressources de l'escom connaît, entre autres, les sous-répertoires suivants :

39 39

40 40 Répertoire ESCoM - Sous-répertoire actualités - Sous-répertoire travail_escom - Sous-répertoire enseignement - Sous-sous-répertoire inalco_dess - Sous-sous-répertoire inalco_communication Sous-répertoire documents - Sous-répertoire archives_web - Sous-répertoire gestion_site - Sous-sous-répertoire images - Sous-sous-répertoire modèles Etc.

41 41 7) Créer un site local a) lancer Dreamweaver b) choisir Site > Nouveau site c) remplir les cases dans la boîte de dialogue relatives aux informations locales nom du site : le nom de votre site dossier racine local : chercher le dossier racine contenant votre site local cocher l'option "cache" cliquer sur "ok" (figure 21)

42 42 (figure 22)

43 43 (figure 23)

44 44 (figure 24) Créer votre page d'accueil (sans prétention aucune) et enregistrez la sous le nom "index.htm" (index.html, pour Mac). Ensuite, demandez que Dreamweaver vous crée l'organigramme de votre site. Il vous affichera - correctement - dans la partie gauche - la vignette de votre page d'accueil avec le nom du fichier ("index.htm"). N'oubliez pas - la page "index.htm" doit être obligatoirement à la racine du dossier contenant votre site.

45 45 8) Produire une première esquisse de la scène d'accueil a) lancez Dreamweaver b) choisissez fichier > nouveau ou, si le fichier "index.htm a déjà été crée, fichier > ouvrir) c) enregistrez le (Fichier > Enregistrer sous) en lui donnant comme nom index.htm d) attention : il faut l'enregistrer dans le dossier racine de votre site e) produisez une toute première esquisse de votre page d'accueil (en tenant compte surtout du contenu probable qui doit y apparaître ) (figure 25)

46 46

47 47 9) Produire une première esquisse des principales scènes du site En tenant compte de l'organigramme de votre site : - identifier les principales pages (une page -- une scène) - donner un titre (un nom) très court - enregistrer chaque page sous forme d'un fichier indépendant - enregistrer juste sous la racine du dossier (repertoire) contenant le site - introduire quelques infos textuelles dans chaque page (par exemple : résumé sur ce que l'on va y trouver, références, pense-bête, etc.) Exemple : (simple) - page "explications générales, motivés et objectives du site, son positionnement par rapport à d'autres sites semblables" - page "management interculturel en Afrique de l'ouest - page "management interculturel et entreprise - page "management interculturel et gestion du patrimoine culturel ou naturel - page "liens vers d'autres sites (ressources, forum, ) en ligne - page "définitions et exemples" - page "témoignages (sous forme de petits reportages vidéo) - page "travaux et documents en ligne" - etc.

48 48 page - exemple: "explications générales, motivés et objectives du site, son positionnement par rapport à d'autres sites semblables" (figure 26)

49 49 Page - exemple : "liens vers d'autres sites (ressources, forum, ) en ligne (figure 27)

50 50 Enregistrement des pages html dans le dossier (répertoire) du site : (figure 28)

51 51 10) A consulter aussi Site Macromedia : Site Multimania - Webmaster : Site "Publication HTML - Publication sur le Web": cours en ligne :