DOSSIER RESSOURCES CRÉATION DE PAGES HTML UTILISATION DU LOGICIEL DREAMWEAVER

Transcription

1 DOSSIER RESSOURCES CRÉATION DE S HTML UTILISATION DU LOGICIEL DREAMWEAVER

2 SOMMAIRE SITE Créer un nouveau site Page 1 Ouvrir un site Pages 1-2 Créer une nouvelle page Page 2 Modifier les propriétés d'une page Page 3 Insérer une image en arrière-plan Pages 3 4 Enregistrer une page Page 4 CADRE Créer des cadres Page 4 Modifier les propriétés d'un cadre Page 5 Modifier la taille d'un cadre Page 5 Modifier les bordures d'un cadre Pages 5 6 Enregistrer un jeu de cadre Page 6 TABLEAU Créer un tableau Page 7 Modifier les cellules d'un tableau Page 8 Modifier les propriétés d'un tableau Page 8 Modifier les propriétés d'une cellule Page 9 Fractionner une cellule en plusieurs Page 9 Fusionner plusieurs cellules Page 9 TEXTE Définir les propriétés d'un texte Page 10 Modifier les propriétés d'un texte Page 10 IMAGE insérer une image Page 11 Modifier les propriétés d'une image Pages LIEN Les différents liens Page 13 Insérer un lien vers une autre page du site Page 13 Insérer un lien vers un autre site Page 14 Insérer un lien vers une adresse Page 14 Insérer un lien vers un mot (une ancre) Pages Sélectionner la cible Page 16 CALQUE les rôle des calques Page 17 insérer un calque Page 17 Déplacer un calque Page Modifier les propriétés d'un calque Page 18 APERCU DANS LE NAVIGATEUR Page 19 faire un aperçu dans le navigateur Page 19

3 LE SITE 1 1. CRÉER UN NOUVEAU SITE On distingue 2 types de sites : le site local situé sur le disque dur de votre ordinateur ou sur la tête de réseau le site distant situé sur le serveur : wanadoo, multimania, free, ifrance,.. Afin d'éviter des erreurs lors du transfert des fichiers du site local vers le site distant, il est recommandé d'avoir des noms de repertoires et sous répertoires identiques sur les 2 sites Pour créer un nouveau site, cliquer sur "Fichier" puis sur "Nouveau site" A l'affichage de la fenêtre suivante, cliquer sur "Ne pas créer" 2. OUVRIR UN SITE Pour ouvrir un site, cliquer sur "Fichier" puis sur "Ouvrir site" Cliquer ensuite sur le nom du site que vous voulez ouvrir

4 2 Lorsque le site est ouvert vous pouvez ouvrir une page en choisissant dans la fenêtre de gauche le fichier ou le répertoire dans lequel se situe le fichier à ouvrir 1. CRÉER UNE NOUVELLE Pour créer une nouvelle page, il suffit de cliquer sur "Fichier" puis sur "Nouveau"

5 3 2. MODIFIER LES PROPRIÉTÉS D'UNE Pour modifier les propriétés d'une page, cliquer sur la page puis cliquer sur le bouton droit de la souris. A l'apparition de la fenêtre suivante, cliquer sur "Propriétés de la page" Cette fenêtre permet de donner un nom à la page, d'insérer une image ou une couleur en arrière plan, de choisir la couleur du texte et des liens Valider les choix par "OK" 3. INSÉRER UNE IMAGE EN ARRIÈRE-PLAN Pour insérer une image en arrière-plan, ouvrir les propriétés d'une page, cliquer sur "Parcourir", choisir l'image puis cliquer sur "Sélectionner"

6 4 Valider les choix par "OK" 4. ENREGISTRER UNE Cliquer sur "Fichier" puis sur "Enregistrer sous" 1. CRÉER DES CADRES CADRE La présentation de certaines pages web peuvent nécessiter des cadres. La page que vous lisez en ce moment est composée de 2 cadres : le sommaire à gauche, le texte à droite Pour créer des cadres, cliquez sur "Modifier" puis sur "Jeu de cadre", puis sur "Fractionner le cadre à..."

7 5 2. MODIFIER LES PROPRIÉTÉS D'UN CADRE Appuyer sur la touche "Alt" et double-cliquer sur le cadre : une fenêtre s'ouvre "Défiler" permet de choisir si des barres de défilement seront visibles. Le plus souvent utiliser "Auto" "Ne pas redimensionner" : si vous cochez cette case le visiteur ne pourra pas redimensionner les cadres "Couleur de bordures" permet d'attribuer la couleur de vore choix à la bordure. Ne pas utiliser cette fonction (voir "Modifier les bordures d'un cadre" 3. MODIFIER LA TAILLE D'UN CADRE Pour modifier la taille d'un cadre, cliquer sur la bordure et déplacer la 4. MODIFIER LES BORDURES D'UN CADRE Pour modifier les bordures d'un cadre, cliquer sur la bordure : une fenêtre s'affiche

8 6 Dans "Bordures", choisir "oui" pour la présence et "non" pour l'absence de bordure Dans "Couleur de bordure", cliquer sur des couleurs. Cliquer sur la couleur désirée pour afficher la palette 5. ENREGISTRER UN JEU DE CADRES Cliquer sur "Fichier" puis sur "Enregistrer le jeu de cadres sous"

9 7 TABLEAU En général les tableaux sont utilisés pour présenter des données Dans les éditeurs HTML, les tableaux servent surtout à effectuer la mise en page 1. CRÉER UN TABLEAU - Cliquer sur "Insertion" puis sur "Tableau" - Choisir le nombre de lignes et le nombre de colonnes voulues - Choisir le pourcentage de l'écran que prendra le tableau. En général on choisit 100% Si vous créez un tableau pour la mise en page, choisir "0" comme bordure. Si vous créez un tableau de données, choisir comme bordure "1" ou "2"

10 2. MODIFIER LES CELLULES D'UN TABLEAU 8 Avec le bouton droit de la souris, cliquer sur le tableau, puis à l'affichage de la fenêtre sur tableau Vous pouvez alors supprimer ou insérer des lignes ou des colonnes supplémentaires Fractionner permet de scinder horizontalement ou verticalement une cellule en plusieurs Fusionner permet de regrouper 2 cellules pour n'en former qu'une seule 3. MODIFIER LES PROPRIÉTÉS D'UN TABLEAU Avec le bouton droit de la souris cliquer sur la bordure extérieure du tableau Cliquer sur "Propriété". La fenêtre permet de modifier le nombre de lignes et de colonnes, de modifier le pourcentage du tableau sur l'écran permet d'insérer une image d'arrière-plan à un tableau permet d'attribuer une couleur à un tableau et une couleur à la bordure extérieure (attention pour qu'une bordure soit visible il faut lui attribuer un chiffre supérieur à 0)

11 4. MODIFIER LES PROPRIÉTÉS D'UNE CELLULE 9 Avec le bouton droit de la souris cliquer à l'intérieur de la cellule Cliquer sur "Propriété". "Horz" permet de définir la position du contenu de la cellule soit à gauche, soit au milieu, soit à droite "Vert" permet de définir la position du contenu de la cellule soit en haut, soit au milieu, soit en bas Permet d'insérer une image d'arrière-plan à une cellule permet d'attribuer une couleur à une cellule et une couleur à la bordure extérieure (attention pour qu'une bordure soit visible il faut lui attribuer un chiffre supérieur à 0) 5. FRACTIONNER UNE CELLULE EN PLUSIEURS Avec le bouton droit de la souris cliquer à l'intérieur de la cellule Cliquer sur "Propriété". Cliquer sur l'outil fractionner Choisir si vous fractionnez en lignes ou en colonnes Choisir le nombre de lignes ou de colonnes 6. FUSIONNER PLUSIEURS CELLULES Sélectionner les cellules à fusionner Cliquer sur l'outil fusionner

12 10 10 TEXTE Les propriétés du texte sont les mêmes que dans une PAO ou un traitement de texte 1. DÉFINIR LES PROPRIÉTÉS D'UN TEXTE Cliquer dans une cellule vide Choisir la police, la taille de la police, la couleur, le style (gras et italique) et l'alignement à gauche, centré, à droite) Les polices Arial, Times New Roman, Courrier, Géorgia, Verdana, Aeolus Les tailles taille 1 taille 2 taille 3 taille 4 taille 5 taille 6 taille 7 L'alignement à gauche centré à droite 2. MODIFIER LES PROPRIÉTÉS D'UN TEXTE Mettre le texte en surbrillance Avec le bouton droit de la souris, cliquer sur le texte en surbrillance puis sur "Propriétés"

13 11 11 LES IMAGES Seules les images aux formats gif ou jpg sont importables dans Dreamweaver 1. INSÉRER UNE IMAGE Sélectionner avec la souris l'endroit ou positionner l'image Cliquer sur Insertion puis sur Image 2. MODIFIER LES PROPRIÉTÉS D'UNE IMAGE L permet de modifier la largeur de l'image (valeur en pixels) H permet de modifier la hauteur de l'image (valeur en pixels) Aligner permet de positionner l'image par rapports au texte Bouton poussoir Bouton poussoir Haut Milieu Bas Bouton poussoir

14 12 12 Espace V permet de laisser un espace vertical entre une image et le texte ou entre 2 images exemple : Espace V = 20 Espace H permet de laisser un espace horizontal entre une image et le texte ou entre 2 images exemple : Espace H = 10

15 13 13 LES LIENS 1. LES DIFFÉRENTS LIENS Un lien est un objet (texte, image, image animée,...) sur lequel on peut cliquer pour se rediriger soit vers une autre page ou un autre site On distingue 4 types de lien les liens vers une autre page du site les liens vers un autre site les liens vers une adresse les liens vers un autre endroit de la page On peut positionner un lien soit sur une image soit sur un texte Pour insérer un lien sur une image, cliquer dessus Pour insérer un lien sur un texte, le mettre en surbrillance 2. INSÉRER UN LIEN VERS UNE AUTRE DU SITE Dans l'inspecteur de propriétés, cliquer sur l'icône Répertoire" Dans la fenêtre qui s'ouvre, sélectionner le fichier

16 14 14 le lien apparaît dans la cellule de l'inspecteur le texte en surbrillance change de couleur et est souligné 3 INSÉRER UN LIEN VERS UN AUTRE SITE dans l'inspecteur de propriétés, cliquer dans la cellule "lien" taper l'adresse du site le texte en surbrillance change de couleur et est souligné 4 INSÉRER UN LIEN VERS UNE ADRESSE dans l'inspecteur de propriétés, cliquer dans la cellule "lien" taper l'adresse de messagerie précédé de "mailto:" le texte en surbrillance change de couleur et est souligné

17 INSÉRER UN LIEN VERS UN MOT (UNE ANCRE) Pour insérer un lien vers un mot d'une même page ou d'une autre page, il faut d'abord créer une ancre Une ancre est un élément invisible à qui on va attribuer un nom 5.1 CRÉER UNE ANCRE Mettre le mot en surbrillance Dans le menu "Insertion", cliquer sur "Ancre nommée" Dans la fenêtre qui s'ouvre, entrer un nom d'ancrage Attention : les ancres sont des éléments invisibles lors de la consultation des pages par un visiteur. Vous pouvez lors de la création des pages, les rendre visibles. Pour cela cliquer sur "Affichage" puis sur "Eléments invisibles" 5.2 INSÉRER UN LIEN VERS UNE ANCRE SITUÉE SUR LA MÊME sélectionner l'objet (texte ou image) censé rediriger le visiteur vers l'ancre dans l'inspecteur de propriétés, cliquer dans la cellule "lien" taper le nom du lien précédé de # (sans espace)

18 INSÉRER UN LIEN VERS UNE ANCRE SITUÉE SUR LA MÊME sélectionner l'objet (texte ou image) censé rediriger le visiteur vers l'ancre dans l'inspecteur de propriétés, cliquer dans la cellule "lien" taper le nom du fichier à atteindre suivi de # puis du nom de l'ancre (sans espace) 6 SÉLECTIONNER LA 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 _top affiche la nouvelle page dans une nouvelle fenêtre en plein écran Si vous souhaitez ouvrir la nouvelle page dans un des cadres de votre jeu de cadres, il suffit de taper le nom du cadre dans la cellule "cible". exemple : menu

19 17 17 LES CALQUES 1. LE RÔLE 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 même d'autres calques. Tout ce que vous pouvez mettre dans le corps d'un document HTML peut être mis dans un calque. Les calques sont particulièrement utiles pour la superposition de certaines parties de votre page 2. INSÉRER UN CALQUE Avec la souris, sélectionner l'endroit où vous souhaitez insérer le calque dans le menu "Insertion", cliquer sur "Calque" 3. DÉPLACER UN CALQUE cliquer sur le calque pour le sélectionner cliquer sur petit rectangle en haut et à droite du cadre et déplacer le calque

20 MODIFIER LES PROPRIÉTÉS D'UN CALQUE 2 fonctions sont intéressantes insérer une image d'arrière plan insérer une couleur d'arrière-plan

21 19 19 APERCU DANS LE NAVIGATEUR 1. L'APERÇU DANS UN NAVIGATEUR L'aperçu permet de visionner la page web ou le jeu de cadres tel qu'il sera vu par les visiteurs et cela en restant hors connection 2. FAIRE UN APERÇU DANS LE NAVIGATEUR Cliquer sur "Fichier" puis sur "Enregistrer" Cliquer sur "Fichier" puis sur "Aperçu dans le navigateur" Cliquer sur l'explorateur utilisé "iexlpore" ou "netscape" PS : il est souhaitable de tester votre page avec les 2 principaux navigateurs (Iexplorer et Netscape), les résultats pouvant être différents

22