Cours III - ESCOM - Equipe Sémiotique Cognitive et Nouveaux Médias

Transcription

Peter Stockinger, Travailler avec Dreamweaver de Macromedia
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, 2000 - 2002
Equipe Sémiotique Cognitive et Nouveaux Médias
Paris, Maison des Sciences de l’Homme
2000 - 2002
1
Sommaire
INTRODUCTION .................................................................................................. 3
1) L'ENVIRONNEMENT DE TRAVAIL DE DREAMWEAVER (UNE BREVE PRESENTATI ON ) .... 7
2) LA FENETRE DU DOCUMENT (DE LA SCENE) A CREER ........................................... 9
3) LA PALETTE DES OBJETS ............................................................................... 14
4) LE LANCEUR ............................................................................................... 18
5) LES PRINCAPLES RUBRIQUES ....................................................................... 21
6) CREER ET ORGANISER UN ESPACE DE TRAVAIL................................................. 36
7) CREER UN SITE LOCAL ................................................................................. 41
8) PRODUIRE UNE PREMIERE ESQUISSE DE LA SCENE D'ACCUEIL .......................... 45
9) PRODUIRE UNE PREMIERE ESQUISSE DES PRINCI PALES SCENES DU SITE ........... 47
10) A CONSULTER AUSSI ................................................................................. 51
2000 - 2002
2
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)
2000 - 2002
3
(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 …);
2000 - 2002
4
-
de consulter régulièrement le site de la société Macromedia
(http://www.macromedia.com) 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).
2000 - 2002
5
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.
2000 - 2002
6
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:
2000 - 2002
7
-
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.
2000 - 2002
8
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
2000 - 2002
9
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
2000 - 2002
10
-
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 .
2000 - 2002
11
(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).
2000 - 2002
12
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.
2000 - 2002
13
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.
2000 - 2002
14
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).
2000 - 2002
15
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 :
2000 - 2002
16
-
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.
2000 - 2002
17
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.
2000 - 2002
18
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"…
2000 - 2002
19
2000 - 2002
20
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
2000 - 2002
21
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.
2000 - 2002
22
Rubrique "Fichier"
(fichier 12)
2000 - 2002
23
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.
2000 - 2002
24
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.
2000 - 2002
25
(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.
2000 - 2002
26
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)
2000 - 2002
27
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"
2000 - 2002
28
(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.
2000 - 2002
29
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
2000 - 2002
30
-
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 :
2000 - 2002
31
-
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)
2000 - 2002
32
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 .
2000 - 2002
33
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)
2000 - 2002
34
-
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" …
2000 - 2002
35
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)
2000 - 2002
36
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.
2000 - 2002
37
(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.
Note : la page d'accueil figurera directement en dessous du dossier (répertoire)
racine
Par exemple, le répertoire contenant les ressources de l'ESCoM connaît, entre
autres, les sous-répertoires suivants :
2000 - 2002
38
2000 - 2002
39
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.
2000 - 2002
40
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)
2000 - 2002
41
(figure 22)
2000 - 2002
42
(figure 23)
2000 - 2002
43
(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.
2000 - 2002
44
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)
2000 - 2002
45
2000 - 2002
46
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.
2000 - 2002
48
page - exemple:
"explications générales, motivés et objectives du site, son positionnement par
rapport à d'autres sites semblables"
(figure 26)
2000 - 2002
Page - exemple :
"liens vers d'autres sites (ressources, forum, …) en ligne
(figure 27)
2000 - 2002
49
Enregistrement des pages html dans le dossier (répertoire) du site :
(figure 28)
2000 - 2002
50
10) A consulter aussi
Site Macromedia : http://www.macromedia.com/fr/software/dreamweaver/
Site Multimania - Webmaster :
http://www.multimania.fr/webmaster/topics/technic/dream/
Site "Publication HTML - Publication sur le Web":
http://www.ccim.be/ccim328/html/dreamweaver/dream.html
cours en ligne :
http://www.vtc.com/productdetail.lasso?sku=33195
2000 - 2002
51

Cours III - ESCOM - Equipe Sémiotique Cognitive et Nouveaux Médias

Transcription

Documents pareils

Créez un site avec Dreamweaver (exercice)

DREAMWEAVER Perfectionnement

Voir le plan d`étude de cette formation

develop web

Programme Formation Dreamweaver Perfectionnement

Télécharger la plaquette Formation Dreamweaver initiation

Télécharger le programme - Formation informatique à Bordeaux

Dreamweaver

DreamWeaver Dynamiser un site

Programme de formation DreamWeaver perfectionnement