[PDF] Utiliser Dreamweaver pour produire un iste web en économie gestion

View - Download Utiliser Dreamweaver pour produire un iste web en économie gestion

Previous PDF

Next PDF

Iufm de Reims - J.Bresson - Créer un site Web en Eco-Gestion page 1/10

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é.

▪ 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).

Ma_page.html

Page Html ne

contenant que du texte et un lien vers les images qui sont stockées séparément.

Img1.gi

f

Img2.gif

Ma_page.doc

Iufm de Reims - J.Bresson - Créer un site Web en Eco-Gestion page 2/10

2 Utiliser l"éditeur de Dreamweaver

Voir la mise en oeuvre 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 3/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 (+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 4/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 5/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é

Ouverture dans une nouvelle fenêtre

Secondaire = Texte

affiché lors d"un survol de la souris.

Destination du lien

Iufm de Reims - J.Bresson - Créer un site Web en Eco-Gestion page 6/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 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.

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 auquotesdbs_dbs3.pdfusesText_6

[PDF] générer un signal aléatoire matlab

[PDF] generic project process airbus

[PDF] générique marketing

[PDF] gènes liés brassage intrachromosomique

[PDF] gènes liés crossing over

[PDF] genes liés ou independants pourcentage

[PDF] genes liés pourcentage

[PDF] geneza marketingu pdf

[PDF] génie alimentaire définition

[PDF] génie alimentaire emballage

[PDF] génie alimentaire pdf

[PDF] génie alimentaire salaire

[PDF] genie chimique cours et exercice

[PDF] génie chimique génie des procédés cours

[PDF] génie civil ppt