Création du site dans Dreamweaver :

Dimension: px
Commencer à balayer dès la page:

Download "Création du site dans Dreamweaver :"

Transcription

1 CHARGER, CREER et ENREGISTRER 1. Se connecter au RESEAU du COLLEGE avec tes 2 mots de passe 2. Charge le logiciel Au lancement du logiciel, l écran suivant s affiche : Palette des objets Lanceur Zone de travail Fenêtre des propriétés La zone de travail peut être paramétrée : affichage d une grille, de règles graduées en utilisant le menu «Affichage». Création du site dans Dreamweaver : Cette opération est nécessaire lors de la création d un nouveau site, elle n est à réaliser qu une seule fois, avant de commencer la création des pages web. 1. Commencer par créer un dossier qui contiendra l ensemble des ressources pour le site, éventuellement, y créer des sous-dossiers pour les images par exemple. 2. Cliquer sur «Fichier» - choisir «Nouveau site» ou cliquer sur le bouton «Site» du lanceur. 3. Indiquer : a. Le nom du site. b. Le chemin vers le dossier local créé en 1. où seront rangés l ensemble des fichiers, eu utilisant le bouton «Parcourir» pour localiser le dossier. 4. Cliquer sur OK. Collège des Albères Argelès sur mer. 1 sur 10

2 Remarque importante : Pour éviter que les pages «débordent de l écran», horizontalement, choisir, en bas, à droite de la fenêtre du logiciel, la taille 760px X 420px. Cliquez sur cette flèche pour choisir la taille. Pour enregistrer : Menu «Fichier» - choisir «Enregistrer sous». S assurer que le fichier que l on enregistre est dans le dossier contenant les ressources et s il s agit de la page d accueil du site, la nommer obligatoirement «Index». Le logiciel ajoutera l extension «html». Eviter, dans les noms de fichiers, les accents, espaces, majuscules, etc et se limiter à 8 caractères maximum. Collège des Albères Argelès sur mer. 2 sur 10

3 Pour créer une nouvelle page : 1. Menu «Fichier» - choisir «Nouveau». 2. Créer la page et l enregistrer comme précédemment. Par cette opération, il est possible de : 1. Donner un titre de la page : c est le texte qui apparaîtra dans la barre de titre du navigateur, à ne pas confondre avec le teste de la page ou le nom du fichier. 2. Mettre une image d arrière plan en jouant sur sa transparence ou non, ou modifier simplement la couleur d arrière plan. 3. Modifier les couleurs du texte, des liens, des liens visités. 4. Faire un clic droit sur la page, choisir «Propriétés de la page». Ecrire le titre ici Image ou couleur d arrière plan Couleurs des liens Transparence Collège des Albères Argelès sur mer. 3 sur 10

4 Les tableaux sont très utiles dans la création de pages web. De part leur structure (lignes, colonnes), ils vont permettre de positionner précisément les éléments qui composent la page (texte, images, autre tableau, etc.). Créer un tableau : A. Cliquer sur l icône «Insérer un tableau» dans la palette des objets. B. Saisir les différents paramètres. Nombre de lignes. Nombre de colonnes. Largeur du tableau. Epaisseur de la bordure. Choix de l unité pour définir la largeur : % ou px. C. Cliquer sur «OK». Le tableau est créé sur la page, à l endroit où se trouvait le curseur dans la page. Modifier un tableau : 1. Commencer par sélectionner le tableau en cliquant sur une de ses bordures. 2. Faire les modifications à partir de la fenêtre des propriétés. Modifier une ou plusieurs cellules : 1. Commencer par sélectionner la ou les cellules. 2. Faire les modifications à partir de la fenêtre des propriétés. Collège des Albères Argelès sur mer. 4 sur 10

5 Fusionner des cellules : 1. Commencer par sélectionner les cellules à fusionner. 2. Clic droit sur les cellules sélectionnées, choisir «Tableau» puis «Fusionner». Fractionner une cellule : 1. Commencer par cliquer dans la cellule à fractionner. 2. Clic droit sur les cellules sélectionnées, choisir «Tableau» puis «Fractionner». 3. Indiquer les paramètres de fractionnement (nombre de lignes, colonnes). Créer des liens hypertextes : Il est possible de créer des liens vers : A. Une autre page du site. B. Un site web externe. C. N importe quel fichier (son, vidéo, texte, image, etc.). D. Une adresse . E. Un emplacement précis dans la même page ou une autre page du site. On peut créer des liens à partir de texte, image. A. Méthode pour créer un lien vers une autre page du site : 1. Commencer par sélectionner, sur la page, le texte ou l image à partir duquel on veut créer le lien. 2. Cliquer sur le bouton «Parcourir» dans l Inspecteur des propriétés. Cliquer ici 3. Sélectionner le fichier html vers lequel on souhaite créer le lien. 4. Cliquer sur «Sélectionner». Collège des Albères Argelès sur mer. 5 sur 10

6 B. Méthode pour créer un lien vers un site externe : 1. Commencer par sélectionner, sur la page, le texte ou l image à partir duquel on veut créer le lien. 2. Ecrire l adresse du site dans la zone «Lien» dans l Inspecteur des propriétés. Ecrire l adresse ici par exemple 3. Appuyer sur la touche «Entrée» pour valider. C. Méthode pour créer un lien de téléchargement : 1. Commencer par sélectionner, sur la page, le texte ou l image à partir duquel on veut créer le lien. 2. Cliquer sur le bouton «Parcourir» dans l Inspecteur des propriétés. 3. Sélectionner le fichier à mettre en téléchargement (document texte, image, tableau, fichier exécutable, son, etc.). 4. Cliquer sur «Sélectionner». D. Méthode pour créer un lien vers une adresse 1. Commencer par sélectionner, sur la page, le texte ou l image à partir duquel on veut créer le lien. 2. Ecrire l adresse dans la zone «Lien» dans l Inspecteur des propriétés en la faisant précéder de mailto: Ecrire l adresse ici par exemple mailto:jean@ac-montpellier.fr 3. Appuyer sur la touche «Entrée» pour valider. E. Méthode pour créer un lien vers un emplacement précis de la page : on appelle cela une ancre nommée 1. Commencer par créer l ancre, c'est-à-dire le repère correspondant à l emplacement vers lequel on souhaite créer le lien. Collège des Albères Argelès sur mer. 6 sur 10

7 2. Pour cela : a. Positionner le curseur au bon endroit dans la page. b. Cliquer sur le bouton «Insérer un nom d ancrage» dans la palette des objets, panneau «Invisibles» ou menu «Insertion», choisir «Ancre nommée». Cliquer sur cette flèche pour faire apparaître la liste. c. Donnez un nom significatif à l ancre, en évitant accents, espaces, majuscules. Sur la page apparaît un repère à l emplacement du curseur. Tapez un nom pour l ancre ici. Le repère sur la page. 3. Créer le lien vers l ancre. Pour cela : a. Sélectionner, sur la page, le texte ou l image à partir duquel on veut créer le lien. b. Dans l inspecteur des propriétés, dans la zone «Lien», écrire le nom de l ancre précédée du caractère #, sans espace. Remarque : Il est possible d aller directement sur une ancre dans une autre page grâce au même lien : pour cela il faut simplement saisir l adresse de la page puis le nom de l ancre précédée de #. Collège des Albères Argelès sur mer. 7 sur 10

8 Réaliser une page avec des cadres : Les cadres permettent de «découper» une page en plusieurs zones juxtaposées. La solution la plus courante consiste à partager la page verticalement ou horizontalement en 2 zones et à placer le sommaire dans un des cadres (à gauche ou en haut), le deuxième cadre permettant d afficher la page choisie par le visiteur, en cliquant sur un des éléments du sommaire. A. Méthode pour créer les cadres : 1. Créer une nouvelle page («Fichier» «Nouveau» ou Ctrl + N). 2. Dans le menu «Modifier», choisir «Jeu de cadres» puis le type de fractionnement. 3. Les cadres sont créés. La première chose à faire est de les enregistrer. Type de fractionnement B. Méthode pour enregistrer : 1. Dans le menu «Fichier», choisir «Enregistrer tout». Il y aura en tout 3 fichiers (si on a choisi 2 cadres) : le jeu de cadres qui contient les 2 cadres, le cadre de gauche, le cadre de droite. Lors de l enregistrement, le cadre que l on est en train d enregistrer apparaît avec un contour hachuré. A chaque clic sur «Enregistrer», Dreamweaver propose d enregistrer le fichier suivant. a. Le jeu de cadres b. Le cadre de droite c. Le cadre de gauche (ou sommaire par exemple). Collège des Albères Argelès sur mer. 8 sur 10

9 Ici, on enregistre le jeu de cadres. Ici, on enregistre le cadre de droite Ici, on enregistre le cadre de gauche Une fois l enregistrement réalisé, on passe à la mise en forme des cadres. C. L inspecteur des propriétés du jeu de cadres : Un clic sur la bordure des cadres permet de sélectionner le jeu de cadres. A partir de là, il est possible de modifier certains paramètres dans l inspecteur de propriétés. Choix de bordures : oui, non par défaut. Couleur des bordures. Largeur des bordures. Largeur du cadre sélectionné (ici, celui de gauche). Collège des Albères Argelès sur mer. 9 sur 10

10 D. L inspecteur des propriétés d un cadre en particulier : Pour sélectionner un des cadres, cliquer sur le cadre en maintenant la touche ALT enfoncée. Des propriétés différentes apparaissent dans l inspecteur des propriétés, en particulier le nom du fichier à afficher dans le cadre. Il est impératif de nommer les cadres (voir plus loin comment créer des liens vers un cadre). Nom de la page qui va apparaître dans ce cadre. C est ici qu on écrit le nom du cadre. Permet de faire apparaître ou non des barres de défilement. E. Créer des liens d un cadre vers un autre cadre : 1. Commencer par sélectionner, dans le cadre, le texte ou l image à partir duquel on veut créer le lien. 2. Cliquer sur le bouton «Parcourir» dans l Inspecteur des propriétés. 3. Sélectionner le fichier html vers lequel on souhaite créer le lien. 4. Cliquer sur «Sélectionner». 5. Sélectionner le nom du cadre dans le champ «cible». Dreamweaver propose également 4 autres choix de cible : _blank affiche la nouvelle page dans une nouvelle fenêtre en format réduit. _parent affiche la nouvelle page dans le cadre «parent» du jeu de cadres. _self affiche la nouvelle page dans le même cadre (affichage par défaut). _top affiche la nouvelle page dans une nouvelle fenêtre en plein écran. Collège des Albères Argelès sur mer. 10 sur 10