Utilisez internet pour présenter vos travaux, créez votre site web Initiation à dreamweaver 2 1. Introduction Un site web est constitué d un ensemble de pages conçues avec le langage HTML (HyperText Markup Language). Le HTML est un simple "langage à balises", comme les premiers traitements de texte. Ce langage permet de coder une page à l'aide de commandes de mise en forme. Ces dernières sont ensuite interprétées par un navigateur (tel que Netscape ou Internet Explorer) et apparaissent sur votre écran. Les pages HTML sont aujourd'hui le système de base d'internet. Elles peuvent inclure du texte ainsi que des images fixes ou animées, du son, de la vidéo et même des programmes interactifs (en Java, Javascript, Flash ). HTML permet la création de liens hypertextes vers d autres pages HTML appartenant au même site web ou à d autres sites web. (Un site web est un ensemble de pages HTML liées par des liens hypertextes) Les fichiers HTML n'incluent pas les autres documents qu'ils contiennent (sons, images,...). Ils réfèrent à ces documents stockés sous forme de fichiers généralement sur le même serveur. Le chargement de la page WEB entraîne le chargement automatique de tous les autres fichiers auxquels elle réfère et leur inclusion automatique lors de la phase d'affichage. En pratique, on écrit rarement directement en HTML. On préfère utiliser des éditeurs HTML qui présenteront visuellement les pages sous une forme voisine de celle affichée dans les navigateurs. Il existe d excellents logiciels facilitant la création et la gestion de sites web, actuellement les meilleurs outils sont Dreamweaver de Macromédia et GoLive d Adobe. L'utilisation de ces logiciels s'apparente à celle d'un traitement de texte comme Word. Dans notre cas, nous allons utiliser Dreamweaver 2 pour créer nos pages html et utiliser les fonctions de gestion de site. Une version d'évaluation gratuite de ce logiciel, fonctionnelle pendant 30 jours est disponible : http://www.macromedia.com/fr/software/downloads/ Nous allons découvrir les principales fonctions de Dreamweaver 2 qui nous permettront de réaliser un site simple, compatible pour tout type de navigateur et de plate-forme. 2. Structure d un site web Pour créer un site, la méthode est toujours la même. Il faut constituer sur son disque dur (ou sur votre répertoire étudiant), un dossier qui contiendra un ensemble de sous-dossiers et de documents avec à la racine, une page de départ, nommée en général "index.htm". Le contenu de ce dossier sera par la suite transféré, sur le serveur de votre hébergeur (gratuit comme www.free.fr, ou payant comme www.wanadoo.fr) qui lui, vous permettra de publier votre site web sur Internet. 2.1. Première maquette de votre site web Pour nous familiariser avec les outils du logiciel nous allons maintenant créer un petit site web présentant un cours. Ce site aura la structure suivante : - une page d'accueil "index.htm" - une page contenant le cours "cours.htm" - un dossier "deco" contenant les éléments graphiques du site : photos, boutons de navigation - un dossier "exos" contenant les exercices "exo1.htm" et "exo2.htm" 2.2. Créer un dossier racine et les autres dossiers de votre site 1. Sur le bureau de Windows, double cliquez sur "Poste de travail" puis sur le disque U:\ 2. La fenêtre présentant le contenu de votre espace disque U:\ s'ouvre 3. Créez un nouveau dossier "SiteWeb" (cliquez avec le bouton droit de la souris dans la fenêtre de U:\, un menu contextuel apparaît, choisissez "Nouveau dossier", puis nommez le "SiteWeb") 4. Ouvrez votre dossier "SiteWeb" (double cliquez avec le bouton gauche de la souris sur "SiteWeb") 5. Créez un dossier "deco" (pour stocker vos images) 6. Créez un dossier "exos" pour les fichiers des exercices Remarque : N'utilisez pas de caractères accentués ou spéciaux (espaces, & / : ) dans vos noms de fichiers et de dossiers.
3. Lancement de Dreamweaver Pour lancer Dreamweaver 2 sur votre PC - Cliquez avec votre souris sur le bouton "Démarrer" (en bas à gauche de l écran), allez sur "Programmes", puis sur "Macromédia", puis lancez Dreamweaver 2 4. Interface de Dreamweaver 2 A la 1 ère ouverture de Dreamweaver vous voyez apparaître l'espace de travail suivant: La fenêtre de document dans laquelle vous placerez textes, images, animations, Cette fenêtre affiche le document à peu près comme il apparaîtra dans le navigateur web. Elle fonctionne comme un traitement de texte Sélectionnez les dimensions de fenêtre 760x420 pour travailler sur un espace d'affichage conventionnel pour les écrans 15" en 800x600 La palette d'objets contient des boutons permettant d'insérer rapidement images, tableaux, animations, et d'autres objets dans la fenêtre de document Si la palette n'est pas présente à l'écran, vous pouvez l'activer par le menu Fenêtre, sélectionnez Objets L'inspecteur de propriétés change suivant l'objet sélectionné, il permet d'ajuster les paramètres de chaque objet sélectionné dans la fenêtre de document Si l'inspecteur de propriétés n'est pas présent à l'écran, vous pouvez l'activer par le menu Fenêtre, sélectionnez Propriétés Le lanceur permet d'afficher et de masquer d'autres fonctions de Dreamweaver dont nous ne nous servirons pas dans ce cours.
5. Insérer et mettre en forme votre texte dans la page d'accueil 1. Tapez le titre du cours "LES ACIDES AMINES ET LES PROTEINES" 2. Allez dans le menu "Fichier" pour sauvegarder cette page 3. Sélectionnez "Enregistrer sous" 4. Choisissez le dossier "SiteWeb" qui se trouve sur votre U:\ 5. Taper "index.htm" comme nom de fichier 6. Sélectionnez le titre, appliquez lui le format En-tête 3 et un alignement au centre de la page. 7. Ajoutez les 3 rubriques "Le Cours", "Exercice 1", "Exercice 2" 8. Sélectionnez le texte des 3 rubriques 9. Sélectionnez la taille des caractères "+1" dans l'inspecteur de propriétés. Remarque : Pour aller à la ligne, utilisez simultanément les touches Maj+Entrée, pour sauter une ligne utilisez seulement la touche Entrée. 10. Vous pouvez vérifier l'orthographe via le menu Texte/Orthographe. 11. Sauvegardez votre travail, menu Fichier/Enregistrer
6. Définir les propriétés d'une page 1. Cliquez dans la partie blanche de la page "index.htm" avec le bouton droit de la souris 2. Un menu contextuel apparaît, choisissez "Propriétés de la page " 3. La fenêtre des propriétés de la page apparaît 4. Dans le champ "Titre" remplacez "Document sans-titre" par "Les Acides Aminés et Protéines" 5. Choisissez les couleurs pour le texte et les liens en cliquant sur les carrés 6. Pour conserver une bonne homogénéité dans la présentation du contenu de votre site veillez à appliquer les mêmes paramètres pour toutes les pages html, retenez les codes de couleur que vous avez sélectionnés (par exemple, pour le violet sélectionné ci-dessus, la référence est #660066) Remarque : Si vous voulez placer une image d'arrière-plan à la place d'une couleur de fond uniforme vous pouvez récupérer une image comme celle à droite. a. Lancez Netscape (menu "Démarrer", "Programmes", Netscape Navigator") b. Entrez l'adresse http://corpus.univ-fcomte.fr/web/informatique/dreamweaver dans le champ adresse de Netscape c. Cliquez avec le bouton droit de la souris sur l'image que vous souhaitez récupérer dans la page html d. Choisissez "Enregistrer l'image sous", une fenêtre d'enregistrement apparaît e. Choisissez le dossier "deco" de votre dossier "SiteWeb" comme cible f. Le nom de l'image à enregistrer est déjà inscrit "fond.gif" g. Cliquez sur le bouton "Enregistrer" h. Revenez sur Dreamweaver et sélectionnez "fond.gif" comme image d'arrière plan dans la fenêtre des propriétés 7. Validez les propriétés en tapant sur la touche "Entrée" ou cliquez sur OK
7. Créer les pages suivantes Pour créer la page cours.htm 1. Allez dans le menu Fichier 2. Sélectionnez "Nouveau", une nouvelle page apparaît 3. Tapez un texte du type "Ceci est la page contenant le cours" 4. Allez dans le menu "Fichier" pour sauvegarder cette page 5. Sélectionnez "Enregistrer sous" 6. Choisissez le dossier "SiteWeb" qui se trouve sur votre U:\ 7. Tapez "cours.htm" comme nom de fichier Pour créer la page exo1.htm 8. Allez dans le menu Fichier 9. Sélectionnez "Nouveau", une nouvelle page apparaît 10. Tapez un texte du type "Ceci est la page contenant le 1 er exercice" 11. Allez dans le menu "Fichier" pour sauvegarder cette page 12. Sélectionnez "Enregistrer sous" 13. Choisissez le dossier "exos" qui se trouve dans le dossier "SiteWeb" 14. Tapez "exo1.htm" comme nom de fichier Pour créer la page exo2.htm, répétez les étapes 8 à 13 et tapez "exo2.htm" comme nom de fichier 8. Relier vos pages Nous allons maintenant relier les pages entre elles afin de pouvoir naviguer des unes aux autres. 1. Retournez sur la page "index.htm" (si vous l'avez fermée, allez dans le menu "Fichier", sélectionnez "Ouvrir", puis "index.htm") 2. Sélectionnez le texte "Le Cours" 3. Cliquez sur l'icône de dossier dans l'inspecteur de propriétés 4. La fenêtre de sélection de fichier apparaît 5. Sélectionnez le fichier "cours.htm" dans votre dossier "SiteWeb" 6. Cliquez sur le bouton "Sélectionner" 7. La fenêtre de sélection de fichier se referme Vous venez de créer le 1 er lien 8. Sélectionnez le texte "Exercice 1" Répétez les étapes 3 à 7 en sélectionnant le fichier "exo1.htm" dans le dossier "exos" 9. Sélectionnez le texte "Exercice 2" Répétez les étapes 3 à 7 en sélectionnant le fichier "exo2.htm" dans le dossier "exos" Remarque : Si vous souhaitez créer un lien vers un site extérieur au vôtre (au site de Corpus par exemple) vous taperez dans le champ "Lien" de l'inspecteur de propriétés l'adresse complète de Corpus : http://corpus.univ-fomte.fr Et pour un lien sur une adresse e-mail : mailto:un.email@hebergeur.com 10. Sauvegardez votre travail, menu Fichier/Enregistrer 11. Testez les liens que vous venez de créer en ouvrant la page "index.htm" dans votre navigateur internet
9. Récupérer une image sur internet 1. Entrez l'adresse http://corpus.univ-fcomte.fr/web/informatique/dreamweaver dans le champ adresse de Netscape 2. Cliquez avec le bouton droit de la souris sur l'image qui se trouve dans la page html 3. Choisissez "Enregistrer l'image sous" 4. Une fenêtre d'enregistrement apparaît 5. Choisissez le dossier "deco" de votre dossier "SiteWeb" comme cible 6. Le nom de l'image à enregistrer est déjà inscrit "3D.jpg" 7. Cliquez sur le bouton "Enregistrer" 10. Ajouter des images à vos pages 1. Retournez sur la page "index.htm" dans Dreamweaver (si vous l'avez fermée, allez dans le menu "Fichier", sélectionnez "Ouvrir", puis "index.htm") 2. Prenez l'icône "Insérer une image" dans "La palette d'objets" avec la souris 3. Glissez l'icône sur la page "index.htm", en dessous du texte "Exercice 2" 4. La fenêtre de sélection de fichier apparaît 5. Sélectionnez l'image "3D.jpg" dans votre dossier "deco" 6. Cliquez sur le bouton "Sélectionner" 7. La fenêtre de sélection de fichier se referme 8. L'image est insérée dans votre page mais pour la positionner correctement nous allons utiliser un tableau comme outil de mise en pages 11. Utiliser des tableaux Les tableaux offrent deux possibilités sur un site web : présenter des données comme dans un tableur, ou disposer des éléments sur une page. Les tableaux sont modulables et imbriquables les uns dans les autres. Ils permettent de présenter les données comme dans un logiciel de mise en pages. Leur utilisation présente l'avantage d'être compatible avec tout type de navigateurs web. 1. Cliquez sur l'icône "Insérer un tableau" dans "La palette d'objets" 2. La fenêtre de propriétés du tableau apparaît 3. Remplissez les paramètres suivants : "Lignes" =1 "Colonnes" = 2 "Largeur" = 100 (en pourcent, permet à votre mise en page de s'adapter aux différentes dimensions d'écran) "Bordure" = 0 (pour rendre le tableau invisible à l'internaute) 4. Validez avec le bouton "OK" 5. Un tableau apparaît dans la page "index.htm" 6. Sélectionnez le texte des rubriques Cours jusqu'à Exercices 2 7. Glissez-le avec la souris dans la 1 er cellule du tableau 8. Glissez l'image "3D.jpg" dans la 2 ème cellule du tableau Vous pouvez ensuite affiner les réglages dans l'inspecteur de propriétés Remarque : Les tableaux permettent de créer un plan de cours comme l'image ci-dessous. Pour faire des colonnes de taille différente : 1. Sélectionnez la dernière ligne du tableau 2. Sur cette ligne, sélectionnez la 1 ère cellule 3. Taper une dimension en pourcentage (par exemple : 20%) 4. Sélectionnez la 2ème cellule 5. Taper une dimension en pourcentage (par exemple : 30%) 6. Sélectionnez la 3ème cellule 7. Taper une dimension en pourcentage (par exemple : 50%) de telle sorte que la somme des 3 cellules fassent 100%
8.Vous pouvez regrouper plusieurs cellules en utilisant la fonction "Combiner" 12. Allez plus loin avec Dreamweaver 2 Pour en apprendre davantage sur les fonctions de Dreamweaver 2, n'hésitez pas à consulter le menu "Aide" qui rassemble absolument toutes les informations concernant ce logiciel 13. Les sites utiles concernant la création web www.webmaster-fr.com Graphisme : www.webdeveloppeur.com www.praktika.com www.devparadise.com www.webgraphique.com www.allhtml.com www.web-connection.com/illustrer www.javascripts.net www.toutjavascript.com
14. Ergonomie des pages web Pour faciliter la lecture de vos pages il faut : - Se contenter d une ou deux polices de caractères standard pour le texte courant (Arial, Times ) - Préserver un bon contraste entre votre fond de page et votre texte - Préférer les fonds unis, aux images à fortes variances chromatiques qui compliquent la lecture des pages - Segmenter vos textes pour limiter l usage des ascenseurs - Aérer vos compositions, inclure des illustrations - Maintenir une unité graphique entre les différentes pages de votre site - Compresser vos images pour obtenir les fichiers les plus légers possibles, pour offrir une navigation fluide dans votre site. Vos pages html vont parcourir internet, plus vos documents (images, sons, vidéos ) seront légers, optimisés, plus ils parviendront rapidement à vos destinataires - Deux formats de fichiers principaux sont utilisés sur internet,.gif et.jpg Le gif sera plus approprié aux schémas, titrages et boutons de navigation. Le.jpg sera plus adapté à la compression des photographies Les + : - Illustrer la page d accueil - Imaginer un logo personnel
Utilisez internet pour présenter vos travaux, créez votre site web Ouvrir un compte chez un hébergeur gratuit Pour héberger vos pages et les publier sur internet, nous allons ouvrir un compte chez un hébergeur gratuit. Pour l'occasion, nous allons utiliser les services de multimania.fr Cet hébergeur a été choisi au hasard sur la liste des hébergeurs gratuits français proposée par Yahoo.fr : http://fr.dir.yahoo.com/commerce_et_economie/societes/communications_et_reseaux/internet_et_world_wide_web/heb ergement_de_sites_web/espaces_web_gratuits/ Ce tutoriel fonctionne avec Netscape 4.7 et Internet Explorer 5 Créer un compte chez un hébergeur 1. Lancez Netscape, cliquez avec votre souris sur le bouton "Démarrer" (en bas à gauche de l écran de Windows), allez sur "Programmes", puis sur " Netscape Communicator ", puis "Netscape Navigator" 2. Entrez l'url : http://www.multimania.fr dans le champ adresse de Netscape 3. La page d'accueil de multimania apparaît 4. Choisissez "Hébergement gratuit, Création de sites" dans le menu "Les services" 5. La page "Hébergement" apparaît 6. Cliquez sur le bouton "Créer un compte" 7. La page concernant la création d'un compte apparaît 8. Complétez les champs des étapes 1 et 2 9. Retenez bien l'identifiant ainsi que le mot de passe que vous venez de choisir, notez les quelque part si nécessaire 10. Il n'est pas utile de compléter les champs de l'étape 3 11. Cliquez sur le bouton "Suite" en bas de page, une nouvelle page apparaît 12. Cliquez sur le bouton "J'accepte" en bas de page 13. Votre inscription est validée, la page "Bienvenue parmi les Membres de Multimania" apparaît 14. Relevez dans les "Informations à retenir sur votre Compte", en particulier les adresses de votre site nouveau site web : http://www.multimania.com/identifiant/ ou http://identifiant.multimania.com/ 15. Il n'est pas nécessaire de compléter les champs de cette page de bienvenue 16. Cliquez sur le bouton "Valider" en bas de page, un e-mail de confirmation d'ouverture de compte vous est envoyé
Vérifier l'ouverture de son compte sur Internet 12. Tapez l'adresse de votre nouveau site web : http://identifiant.multimania.com/ dans le champ adresse de Netscape 13. Vous devez voir apparaître une page comme celle-ci : 14. Cette page est une page "index.htm" par défaut qui confirme l'ouverture de votre compte Envoyer des pages sur votre nouveau compte 10. Entrez l'url : http://www.multimania.fr dans le champ adresse de Netscape 11. La page d'accueil de multimania apparaît 12. Choisissez "Hébergement gratuit, Création de sites" dans le menu "Les services" 13. La page "Hébergement" apparaît 14. Cliquez sur Web FTP pour accéder à la page de gestion des fichiers de votre site 15. Si vous n'ètes pas encore identifié par le serveur, une fenêtre intermédiaire vous invite à taper votre identifiant et mot de passe, puis cliquez sur "Valider" Remarque : Cocher "Identification automatique" permettra à votre navigateur de mémoriser votre identifiant et votre mot de passe. 16. Vous arrivez sur la page de gestion de votre compte (http://www.multimania.fr/hebergement/compte/)
Pour l'instant, il n'y a qu'un seul fichier sur votre site, c'est la page "index.html" par défaut créée par l'hébergeur Pour conserver les liens que vous avez créés entre les différents fichiers qui composent votre site web sur votre espace disque U:\ (votre site local) vous devez recréer la même structure de site sur l'espace disque de votre hébergeur (votre site distant) 17. Cliquez sur le bouton "Nouveau" pour créer un dossier "deco" dans votre "Répertoire principal" 18. Cliquez sur le bouton "Créer" 19. Répétez les étapes 8 à 9 pour créer un dossier "exos" 20. Cliquez sur le bouton "Charger des fichiers sur votre compte" pour envoyer les pages de votre site web chez l'hébergeur 21. Sélectionnez le fichier "index.htm" de votre dossier "SiteWeb" en cliquant sur le bouton parcourir 22. Cliquez sur "Valider" pour envoyer le fichier sélectionné chez l'hébergeur 23. Répétez les étapes 12 à 13 pour tous les autres fichiers de votre site Remarque 1: Pour les fichiers des dossiers "deco" et "exos", sélectionnez d'abord le dossier de destination en cliquant sur son nom dans la colonne de gauche "Détail de votre compte" avant d'envoyer les fichiers chez l'hébergeur Remarque 2: Pour déplacer un fichier d'un dossier à un autre sur le site distant 1. Cliquez sur le nom du fichier pour sélectionner le fichier 2. Cliquez sur le bouton "Couper" 3. Sélectionnez le dossier de destination dans lequel vous voulez déplacer le fichier en cliquant sur son nom dans la colonne de gauche "Détail de votre compte" 4. Cliquez sur le bouton "Coller"