Utiliser Dreamweaver pour produire un iste web en économie gestion

Construction de documents au format Html
Les activités proposées à l'occasion de cette production permettent d'aborder
les principaux savoir-faire associés à la réalisation de pages WEB
(décrites en langage html « Hypertext Markup Language »)
Les pages Html peuvent être générées à partir de documents existants sous Word, Excel, Powerpoint
enregistrés au format Html.
Il existe également des éditeurs spécialisés
gratuits : Frontpage Express livré avec Internet Explorer, Netscape Composer livré avec le
navigateur Netscape et bien d’autres encore, graticiels que l’on peut télécharger sur Internet
payant : Frontpage 2000, Dreamweaver 3 par exemple, qui sont plus performants et offrent en
standard de nombreuses fonctionnalités facilitant la mise en page, l’utilisation de feuilles de style,
la construction de pages de cadre, des animations de calques…
Vous pourrez consulter sur le site de l’Iufm, sous la rubrique « Ressources », des documents
téléchargeables proposant de s’initier à la production de pages Html sous Word, Publisher,
Frontpage, Netscape, Dreamweaver.
1
Réaliser une page Html à partir d’un document Word existant
Il suffit d’ouvrir le document Word et de choisir la commande du menu Fichier « enregistrer au format
Html »
Remarques :
lorsque l’on enregistre un document Word (contenant texte et images), au format Html, le texte de
la page est donc enregistré et les images sont stockées séparément au format dans un format
d’image compressé.
Ma_page.html
Img1.gi
f
Img2.gif
Page Html ne
contenant que
du texte et un
lien vers les
images qui sont
stockées
séparément.
Ma_page.doc
les images dites « flottantes » dans Word ne sont pas correctement resituées lors d’un
enregistrement au format Html, il convient de les positionner dans des tableaux si l’on souhaite
pouvoir insérer du texte à côté, sauf à utiliser des calques, c'est la règle en Html.
Bien qu’un logiciel de traitement de texte puisse servir d’éditeur de pages Html, l’effet obtenu (vu sous
un navigateur) n’est pas toujours celui espéré, certains désordres peuvent apparaître lorsque de trop
nombreuses manipulations ont eu lieu sur un tableau par exemple, etc.
Pour générer avec plus de précision les pages Html, un éditeur spécialisé et préférable. On utilisera
pour accompagner nos premiers pas dans la réalisation d’un site Dreamweaver 2 (la version 2 de
Dreamweaver est disponible - en version complète - sur le numéro de Mars 2000 du magazine PC
Expert toujours disponible à la vente).
Iufm de Reims – J.Bresson – Créer un site Web en Eco-Gestion
page 1/10
2
Utiliser l'éditeur de Dreamweaver
Voir la mise en œuvre des fonctionnalités dans le document "Premiers pas avec Dreamweaver" –
(J.Bresson IUFM Champagne-Ardenne)
2.1
Réaliser la page index.htm qui constituera la page d'accueil de votre site
Réalisez la mise en page suivante
Utiliser une structure de tableau pour mettre en place texte et images
Insérer en haut de page l'image logo.gif
Saisir le texte de la page
Donner un titre à cette page
Utiliser l'image crepi.gif comme arrière-plan
Enregistrer sous le nom "index.htm"
Iufm de Reims – J.Bresson – Créer un site Web en Eco-Gestion
page 2/10
2.2
Mise en place d'hyperliens pour naviguer entre les pages
En prenant comme support la page index.htm le texte
Sélectionner le texte "Quelques références en ligne" et mettre en place un lien vers panorama.htm
Idem, en prenant comme support "nombreux sites utiles et listes de diffusion" mettre en place un
hyperlien en direction de la page "pageliens.htm"
Idem, "pour en savoir plus" conduira à la page voyage.htm
2.3
Modifier le contenu de quelques pages
2.3.1
Modifiez la page "panorama.htm" afin qu'elle présente une apparence analogue à celle
de la page d'accueil
Sélectionner le texte entier (<Ctrl>+A) et appliquer la police Arial
Insertion de l'image, journaux.gif
Tableau de 700 pixel de large
En pied de page mettre en place une flèche de retour (flech_g.gif)
Mettre en place sur cette image un hyperlien de retour à la page d'accueil
Iufm de Reims – J.Bresson – Créer un site Web en Eco-Gestion
page 3/10
2.3.2 Modifiez la page pageliens.htm
Rendre actifs tous les liens
Mettre en place le lien sur la flèche de retour à la page d'accueil
Utilisez le logiciel Pdfcreator pour générer le document "nos-liens.pdf" à partir du fichier "Nos
liens.doc"
Il est possible de recommencer à titre d'entraînement la création de document pdf à partir du fichier
Word "html_succinct.doc". Lier ce document à la page d'accueil rubrique "Côté pratique" créer ses
pages Web avec MSWord.
2.4
Mettre en place des liens internes à une page
On souhaite pouvoir naviguer sur la page "panorma.htm" entre les rubriques du sommaire
On utilisera pour cela des ancres nommées sous Dreamweaver (signets dans le monde Microsoft)
Positionner le point d'insertion en bas de page juste
avant "Comptabilité – Fiscalité" puis activer la
commande Insertion > Ancre Nommée : saisir un
nom simple (pourquoi pas Compta)
Attention: "affichage > éléments invisibles" n'est pas
actif, l'ancre n'est pas visible, mais elle est insérée
néanmoins
Sélectionner ensuite le texte du futur lien
dans le sommaire Fiscalité et saisir la
destination du lien dans la fenêtre de
propriétés
Visualiser l'effet obtenu dans un navigateur.
Enregistrer les modifications
Recommencer l'opération pour les autres éléments du sommaire
Iufm de Reims – J.Bresson – Créer un site Web en Eco-Gestion
page 4/10
2.5
Mise en place de zones réactives sur une image
Ouvrir de nouveau la pageliens.htm, insérer une nouvelle ligne dans le tableau avant la dernière
Fractionner la colonne de droite en deux
Insérez l'image carteacademies.gif dans la cellule médiane de l nouvelle ligne et le texte à droite
comme suit...
Il convient de cliquer sur la carte de cliquer
ensuite dans la palette flottante de propriétés sur
le bouton "carte"
Mettre en place des zones cliquables pour
quelques académies.
Donnez un nom à la carte
Dessinez le contour,
puis un double-clic
pour fermer le tracé
Secondaire = Texte
affiché lors d'un survol
de la souris.
Destination du lien
Ouverture dans une nouvelle fenêtre
Iufm de Reims – J.Bresson – Créer un site Web en Eco-Gestion
page 5/10
Enregistrer la page pageliens.htm et tester la carte réactive dans un navigateur.
Mettre ensuite une ancre nommée permettant d'atteindre cette partie de la page.
Après un nouvel enregistrement de la
page "pageliens.htm", mettre en place le
lien depuis la page "index.htm" dont le
support est "carte de France". Ce lien
conduira à la page lien directement sur
la carte.
3
Les animations
3.1
Animation du logo de la page d'accueil
Dans la première cellule du tableau, l’idée est d’insérer deux images du logo de façon à ce que
l'image affichée change au survol de la souris.
Une commande du menu insertion permet d’éviter de paramétrer manuellement ce comportement.
Ouvrir la page index.htm
Cliquer dans la première cellule à gauche dans le tableau, supprimer l'image existante (logo.gif)
Activer la commande : Insertion > Image retournée (ou "image survolée" suivant les versions de
Dreamweaver) utilisez logo et logo2.gif
Enregistrer le page modifiée, testez-la dans un navigateur
Un comportement est attaché à un objet,
il associe un événement (un clic de
souris, un passage de la souris au
dessus de l’objet par exemple) et une
action. L’évènement déclenche l’action.
Remarque : On utilisera la fenêtre des
comportements de la même manière
pour provoquer l’exécution d’un son au
passage de la souris sur une image.
Un comportement est désormais défini pour cette
image
(fenêtre comportements, pour voir la fenêtre de
comportements)
Problème à résoudre : Comment rendre transparente la couleur d'arrière-plan de l'image
logo2.gif ?
Utilisation d'un logiciel de retouche ou de gestion d'images (Xnview par exemple) il est possible
d'indiquer quelle couleur de la palette sera transparente.
Iufm de Reims – J.Bresson – Créer un site Web en Eco-Gestion
page 6/10
3.2
Utilisation des calques
Les calques sont utilisés pour positionner les éléments avec précision dans la fenêtre du navigateur.
Les calques peuvent contenir du texte, des images… et ont
des propriétés intéressantes : visibilité ou non, déplacement
possible dans la page web.
Ouvrir la page" pageliens.htm"
On souhaite par exemple qu'un texte apparaisse lors du
survol de la souris sur les journaux
Insertion > claque
Saisir le contenu
informatif du
calque, lui donner
ensuite un nom
"auteurs" et des
propriétés de
couleur de fond,
de police de texte
et une visibilité
"hidden"
Ce panorama sur l'actualité a été réalisé
par Julien et Sophie. Pour leur écrire :
[email protected]
Cliquer sur l'image des journaux
puis afficher la fenêtre des
comportements :
Fenêtre > comportements
L'image des journaux étant
sélectionnée, ajouter un
comportement en cliquant sur +
Il s'agit d'afficher le calque "auteur"
Iufm de Reims – J.Bresson – Créer un site Web en Eco-Gestion
page 7/10
Puis de choisir l'événement qui provoquera ce
changement de propriété (ici un survol de la souris) :
Il sera nécessaire enfin de recommencer l'opération
pour que le calque redevienne invisible lorsque la
souris ne survole plus l'image des journaux.
Tester l'effet obtenu sous un navigateur.
Cette procédure d'affichage masquage de calques peut s'avérer très utile lorsque l'on souhaite
apporter des informations d'aide contextuelle sans polluer visuellement le contenu informatif d'une
page. Elle permet de générer de petits autotests via le survol de cases à cocher par exemple.
Les calques peuvent être animés et se déplacer dans une page. On utilise alors des scénarios, voir
page suivante.
4
Utiliser un générateur de QCM
Rubrique "Révisions", mettre en place un lien vers le document Word "theorie-seuil-rentabilite.doc"
Ouvrir sous Word une liste de questions possibles pour réaliser un Qcm relatif au seuil de
rentabilité ("questions seuil de rentabilité.doc")
Il existe de nombreux générateurs de QCM libres de droit sur Internet (un de plus connu est
Hotpotatoes dont l'utilisation est libre pour les enseignants). Mais une simple page comportant
quelques lignes de Javascript (langage interprété sur la machine de l'utilisateur final par un
interpréteur Javascript fourni avec les navigateurs) peut faire l'affaire.
Réaliser un Qcm comportant deux à trois questions, enregistrer-la page réalisée dans le dossier de
travail sous le nom "qcm.htm" et mettre en place un lien depuis la page index.htm vers cette page.
5
A propos de javascript
Un passage secret…
Accessible par mot de passe uniquement bien entendu…
Depuis la page d'accueil :
Support du lien : Accès à l'espace réservé aux étudiants de STS du Lycée Campion
Créer un lien en direction de la page mdp1.htm du dossier "secret"
Tester, puis afficher le code source pour comprendre comment cela fonctionne.
Quelle critique peut-on faire à cette page ?
Modifier le lien initial de la page d'accueil et lier la page secret/mdp2.htm
Quel est l'avantage de cette méthode ? Et son inconvénient ?
Iufm de Reims – J.Bresson – Créer un site Web en Eco-Gestion
page 8/10
6
7
L'accès à des données audio et vidéo
Depuis la page "ressources_video.htm" mettre un lien permettant de lire en streaming la première
petite séquence vidéo réalisée par une petite équipe d'étudiants en STS du lycée Campion.
A titre d'exercice, cette petite vidéo "perceuse3.rm" au format Real a été déposée sur le site
www.chez.com/testinfo, le fichier pesant 1,2 Mo il n'est pas souhaitable de faire un simple lien qui
supposerait d'attendre le téléchargement complet avant début de la lecture.
Le fichier a été réalisé pour supporter un débit de type numéris double (128kbps).
Pour mettre en place le lien permettant la lecture en streaming, vous vous inspirerez du document
"streaming_jb.htm" fourni dans le dossier Streaming.
Ouverture vers le php
7.1
La mise en place du forum
La page d'accueil présente un lien en direction d'un forum, 5 fichiers écrits en PHP sont disponibles
dans le sous-dossier (forum). Ces fichiers écrits en PHP ont été développés par Thierry Arsicaud,
entre septembre 2000 (v1.0) et mars 2003 (v1.6) et sont téléchargeables sur le site
http://www.echodelta.net/scriptsphp/)
post.php
(Page permettant de poster un nouveau message)
listemessages.php (Page permettant d'afficher les intitulés des messages postés)
lire.php
(Page permettant de lire un message posté)
confirmpost.php (Page d'avertissement ou de confirmation suivant l'envoi d'un nouveau message)
admin.php
( Interface d'administration)
Il est nécessaire d'installer deux programmes :
PhpEdit qui est un petit éditeur de PHP
EasyPhp qui simule un serveur Apache en local sur votre ordinateur. Pour que ce serveur
interprète correctement votre code php, l'ensemble du site doit être déplacé dans le dossier
c:\program files\easyphp\www
Le forum de discussion écrit en PHP, utilise exclusivement des fichiers textes pour la sauvegarde et la
lecture des messages postés par les utilisateurs. Il ne nécessite pas l'installation d'une base de
données sur le serveur (du type mySQL)
Mettre en place le forum et mettre un lien depuis la page d'accueil vers la page listemessages.php.
Le tester en local : Utiliser le navigateur et saisir http://localhost/index.htm (dans ce cas, c'est le
serveur Apache qui envoie les pages html et exécute les scripts php.
7.2
La réservation de tee-shirts
Le site propose la réservation de tee-shirts proposés par l'association des
étudiants de STS du lycée Campion.
Créez avec Dreamweaver la page suivante qui sera enregistrée sous le
nom reservations.htm.
Il est nécessaire d'insérer une zone de formulaire dans laquelle seront
insérés des champs. Utiliser la barre d'outils formulaire (cliquez sur
Commun de la barre d'objets et choisir formulaires)
Voir page suivante la composition du document.
Le document va comporter un formulaire intégrant des champs permettant la saisie. Les
données du formulaires devront être stockées dans une table présente sur le serveur.
Il est nécessaire d'envoyer les données via le formulaire à un programme qui sera exécuté sur
le serveur. Ce programme sera écrit en php et renseignera une table incluse dans une base de
données elle-même présente sur le serveur.
Iufm de Reims – J.Bresson – Créer un site Web en Eco-Gestion
page 9/10
Insérer un formulaire
Insérer l'image teeshirt_rond.gif
Attention : PHP est un langage dédié exclusivement à la production de pages HTML. Le code Php
n'est pas interprété par le navigateur de l'utilisateur final( à la différence de javascript), mais par le
serveur qui renvoie au navigateur une page au format html.
Il faut donc ensuite spécifier ce qui devra se passer lors d'un clic sur le bouton d'envoi. Il
convient alors de sélectionner sous Dreamweaver le cadre du formulaire pour voir ses propriétés et de
spécifier que c'est le programme reserver.php qui devra être exécuté sur le serveur.
Enregistrer la page réalisée reservations.htm
Il convient maintenant de construire une base de données "sts_reserv" puis une table "teeshirt" qui
recevra les données puis de réaliser le programme reserver.php qui permettra de stocker les données
dans la table.
Pour cette dernière partie relative à la construction du programme "reserver.php", reportezvous à la documentation "Premiers pas en php" J.Bresson Iufm de Reims.
Iufm de Reims – J.Bresson – Créer un site Web en Eco-Gestion
page 10/10