Créer son site web avec Dreamweaver

Susi

Description

Créer son site web avec Dreamweaver

Sujets

• Arts

Informations

• Publié par: ifametuc
• Nombre de lectures: 121
• Langue: Français
• Poids de l'ouvrage: 1 Mo

Extrait

European Medi@Culture-Online

http://www.european-mediaculture.org

Auteurs:Mission Informatique des CIO de l'Académie de Créteil, . Titre:Créer son site web avec Dreamweaver. Source://p:w.wwtt h/ramlif.eretcac-mdw2oad/ownlio/dfdp.0 La publication est faite avec l'aimable autorisation des auteurs.

Mission Informatique des CIO de l'Académie de Créteil Créer son site web avec Dreamweaver

Sommaire:

Sommaire:..........................................................................................................................1

Chapitre 1: Découverte de l’écran de travail de Dreamweaver.............................................3

Chapitre 2 : Objectifs du manuel...........................................................................................5

1. Dessinez l’architecture de votre site sur papier............................................................5

2. Installez tous les éléments logiciels et matériels nécessaires à la gestion de votre site.....................................................................................................................................6

L’environnement logiciel................................................................................................6

L’environnement matériel..............................................................................................6

3. Préparez tous les éléments de votre site......................................................................6

Le texte..........................................................................................................................7

1

European Medi@Culture-Online

http://www.european-mediaculture.org

Les dessins....................................................................................................................7

Les images....................................................................................................................7

Chapitre 3 : Définition de la structure du site : la « page d’accueil »....................................8

1. La « home-page » ou page d’accueil l’élément clé de Dreamweaver..........................8

2. Création du dossier local...............................................................................................8

3. Création de la page d’accueil......................................................................................10

4. Ajout d’éléments à notre « home page »....................................................................12

Chapitre 4 : Mise en page.(texte, tableau, image…)...........................................................14

1. Le texte........................................................................................................................14

2. Les tableaux................................................................................................................14

3. Les images..................................................................................................................17

Chapitre 5 : Création de liens…...........................................................................................18

1. Le positionnement de la page.....................................................................................18

1. Les chemins absolus...............................................................................................18

2. Les chemins relatifs à la racine...............................................................................19

2. Établissement d'un lien vers un document..................................................................20

3. Établissement d'un lien vers une ancre nommée.......................................................21

4. Établissement d'un lien avec une page hébergée sur un autre site...........................23

5. Un lien spécifique : pour envoyer un message directement au CIO..........................23

6. Vérifier la cohérence des liens....................................................................................24

2

European Medi@Culture-Online

http://www.european-mediaculture.org

Chapitre 6 : Agrémenter votre page….................................................................................25

1. Insérer et créer un logo animé.....................................................................................25

2. Insérer un « Roll-over » (effet de survol).....................................................................27

3. Insérer une « image map » (image cliquable) sur la carte du district.........................28

Chapitre 7 : Tester votre site et le mettre en ligne..............................................................31

1. Tester le site................................................................................................................31

2. Le mettre en ligne (initiation au File Transfert Protocol – FTP)..................................31

3. Les éventuelles erreurs de mise en ligne...................................................................34

Chapitre 8: Référencer le site pour qu’il soit accessible…..................................................35

1. Le titre de la page........................................................................................................35

2. Les éléments de référencement..................................................................................35

3. Les moteurs de recherches et annuaires....................................................................36

Chapitre 9 : Les plus… pour aller plus loin..........................................................................38

1. Animation en DHTML avec les calques......................................................................38

2. Insertion d’un composant vectoriel animé réalisé avec Flash....................................39

3. Un texte personnalisé dans la barre d’état.................................................................39

3

European Medi@Culture-Online

http://www.european-mediaculture.org

Chapitre 1: Découverte de l’écran de travail de Dreamweaver

Dreamweaver est un éditeur visuel professionnel pour la création et la gestion de pages web qui permet de créer aisément des pages compatibles avec toute une série de platesformeset de navigateurs.

L’écran de travail de Dreamweaver est composé au démarrage de 4 zones principales. En premier nous travaillerons sur lafenêtre de document(1) actif, celle-ci affiche le document Web à peu de choses près comme il apparaîtra dans le navigateur. Elle fonctionne pratiquement comme un traitement de texte. Lorsque vous saisissez du texte, le logiciel génère automatiquement le code HTML correspondant sans avoir à connaître une seule règle.

Le deuxième élément est composé par lapalette des objets(2). C’est une sorte de centre de commande par où l’on doit passer pour insérer rapidement toute une sorte d’objets qui viendront constituer notre page Web (images, tableaux… mais aussi composants javasripts, ou java voire Flash.

Vient ensuitel’Inspecteur des propriétés(3) qui permet à tout moment de visualiser (et donc modifier ou attribuer) les propriétés d’un objet. Pour modifier il suffit de sélectionner et de regarder dans l’inspecteur de propriétés les choix qui ont été opérés (couleurs, taille de police, fonte, alignement…).

Enfin nous terminerons notre visite guidée dans l’environnement de travail de Dreamweaver 2 en détaillant la dernière palette qui se nomme lelanceur(4). Sa fonction permet d’afficher et / ou masquer les palettes et inspecteurs différents.

4