Dans cette activité vous allez découvrir un ensemble d'astuce sous Dreamweaver permettant de faciliter la conception de votre site Web. Vous découvrirez aussi le logiciel de création d'image Fireworks. A la fin de cette activité vous devrez créer la page d'accueil principale de votre site Internet.
Avant de commencer cette activité, connectez votre lecteur réseau, ouvrez le logiciel Dreamweaver, agrandissez la fenêtre de Dreamweaver à tout l'écran. Agrandissez également la fenêtre du navigateur à tout l'écran. Désormais, pour passer d'une fenêtre à l'autre, utilisez le raccourcis clavier Alt-Tabulation. Voici où sont situées la touche Alt et la touche Tab (pour "tabulation") sur le clavier :
A RETENIR : plus que jamais un ordinateur s'utilise à 2 mains : une main sur la souris et l'autre pour actionner le raccourcis clavier Alt-Tabulation. |
Accès à votre lecteur réseau directement depuis Dremweaver |
On rappelle que vous devez enregistrer tous vos fichiers dans votre lecteur réseau P: disponible losque vous vous connecté avec vos identifiants personnels.
Votre lecteur réseau P: est appelé Espace personnel dans l'ordinateur (avec l'icône en forme de maison avec le toit rouge), et vous enregistrerez vos fichiers dans son répertoire Mes documents (structuré en sous-répertoires comme indiqué dans les différentes activités) :
Dans Dreamweaver, en appuyant une ou deux fois sur la touche F8 vous pouvez ouvrir ou fermer le volet Fichiers. Ce volet Fichiers est bien pratique et vous permet d'accéder directement aux fichiers enregistrés sur les disques durs du système : il permet donc d'accéder à votre lecteur réseau P: (dont l'icône est aujourd'hui une maison avec le toit rouge).
Pour créer une nouvelle page web à partir du volet Fichiers de Dreamweaver il faut :
Application :
Lancez le logiciel Dreamweaver puis ouvrez son volet Fichiers en appuyant sur la touche F8.
Créez une nouvelle page nommée index.html dans le répertoire site lecteur réseau P: (p:\Mes documents\nsi\site)
Pour cela cliquez droit sur site (et pas sur le dossier animaux qui contient déjà un fichier index.html), cliquez sur Nouveau fichier, puis nommez votre nouveau fichier index.html :
Cette page sera "la page d'accueil principale" de votre site Internet.
Double cliquez sur votre nouveau fichier index.html afin de l'ouvrir : il s'agit pour l'instant d'une nouvelle page web vierge toute blanche.
Ajoutez sur votre page un message de bienvenue du syle "Bienvenue sur mon site Internet créé dans la spécialité Numérique et Sciences Informatiques" ainsi que les informations suivantes (en les complétant) permettant de vous identifier en tant qu'auteur du site :
Pour visioner votre page web dans un véritable navigateur, cliquez sur le bouton Aperçu dans le navigateur de Dreamweaver.
Création rapide d'un lien |
Grâce au volet Fichiers de Dreamweaver il est possible de créer très rapidement des liens vers une page web particulière. Pour cela il faut :
Voici l'emplacement de "la cible" permettant de créer facilement un lien dans le volet Fichiers :
Placez le curseur de la souris sur la cible dans Dreamweaver sans cliquer, puis lisez le message donné par l'info bulle qui s'affiche.
ATTENTION : l'utilisation de la cible pour créer rapidement un lien ne fonctionne que si votre page web a été préalablement enregistrée sur votre lecteur réseau P: |
Application :
Créez un lien nommé "Visiter mon site consacré aux animaux" sur votre page d'accueil principale, puis en utilisant la cible pointez ce lien vers la page index.html (tout en minuscule) de votre dossier animaux afin d'en faire un lien :
Le texte qui est sélectionné est alors transformé en lien une fois que la cible a visé le fichier destinataire :
Enregistrez votre page index.html du dossier site (menu Fichier + Enregistrer) puis testez votre lien dans un véritable navigateur en cliquant sur le bouton Aperçu dans le navigateur de Dreamweaver.
Vous pouvez constater qu'une fois que vous êtes sur le site des animaux, aucun lien ne vous permet de retourner à votre page d'accueil principale. Pour réparer ce problème, créer un nouveau lien nommé "Retour à la page d'accueil principale" sur la page index.html du dossier animaux, et pointant vers l'index principal grâce à la cible.
Enregistrez votre page index.html du dossier animaux (menu Fichier + Enregistrer) puis testez votre lien dans un véritable navigateur en cliquant sur le bouton Aperçu dans le navigateur de Dreamweaver.
Observez votre site dans le navigateur Internet Explorer, testez abondemment tous les liens hypertextes de chacune des pages en faisant des allers-retours d'une page à une autre, vérifiez que tous les liens fonctionnent bien, puis refermez le navigateur.
Découverte de Fireworks |
Fireworks est un logiciel de traitement d'image, très facile à utiliser et permettant de créer rapidement des banières ou des logos afin de décorer et d'illustrer votre site Internet.
L'icône de Fireworks se trouve sur le bureau de Windows :
Ouvrez le logiciel Fireworks en cliquant sur son icône, créer un nouveau document (en cliquant sur "Nouveau" dans le menu "Fichier") puis ouvrez la palette "Actifs" (en refermant toutes les autres palettes si elles ont ouvertes) :
Repérez les icônes des outils "Rectangle" et "Texte" dans l'interface du logiciel :
En maintenant le bouton de la souris enfoncé sur l'outils "Rectangle", une palette d'outils s'ouvre et on peut alors choisir n'importe quelle autre forme à dessiner :
Choisisser l'outils "Rectangle arrondi", puis tracer un rectangle arrondi dans la zone de travail :
Grâce à la palette "Actifs", ajouter la texture de votre choix à votre bandeau :
Grâce à l'outils "Texte", ajouter un texte à votre bandeau en choisissant la police, la couleur et la taille que vous voulez :
Afin de supprimer tout le blanc qui est autour du bandeau il faut maintenant réduire la taille de l'image. Pour réduire automatiquement la taille de l'image, cliquez sur "Réduire le document" dans le menu Modification + Document :
Et voilà, notre bandeau est terminé en quelques clics seulement :
Il suffit maintenant de l'enregistrer sur votre lecteur réseau, puis de l'insérer dans une de vos pages web. Pour enregistrer votre image, cliquez sur "Enregistrer-sous" dans le menu Fichier, choisissez le type d'image PNG, donner un nom explicite à votre fichier (par exemple bandeau), puis enregistrez-le sur votre lecteur réseau dans le même dossier que la page web qui l'utilisera :
Voilà à quoi ressemble le bandeau exemple qui vient d'être fait :
Conclusion :
Avec Fireworks il est très facile de créer rapidement des petits bandeaux servant de titre aux pages web et donnant à votre site un aspect professionnel.
Amélioration de votre page d'accueil |
Vous savez désormais créer des bandeaux graphiques dans Fireworks en utilisant les textures.
En utilisant les textures et toutes les possibilités de Fireworks, personnalisez votre page d'accueil en y faisant apparaître les 3 éléments suivants :
Testez bien votre site dans un véritable navigateur afin d'observer son aparence réelle, le bon fonctionnement des liens et le bon affichage des images.
Amélioration de vos liens |
Sachant que dans Dreamweaver la couleur des liens se configure dans les Propriétés de la page, faites en sorte que vos liens changent de couleurs au simple survol de la souris (comme pour le lien ci-dessous), et ce pour l'ensemble de votre site (sur la page d'accueil et sur toutes les pages des animaux).
Cliquez ici pour retourner à la page d'accueil des NSI
Remarque : pour obtenir l'effet ci-dessus (lien toujours vert sauf au passage de la souris) on a configuré 3 fois la couleur verte (liens, visités et actifs) et 1 fois la couleur rouge (survol) dans les propriétés de la page :
Testez bien votre site dans un véritable navigateur afin d'observer son aparence réelle et le bon fonctionnement des nouveaux liens.
Amélioration du site consacré aux animaux |
En utilisant les acquis précédents, réalisez sur les 4 pages consacrées aux animaux (fichiers index, chats, chiens et oiseaux enregistrés dans votre dossier animaux) les améliorations suivantes :
Testez bien votre site dans un véritable navigateur afin d'observer son aparence réelle, le bon fonctionnement des liens et le bon affichage des images.
Cette activité est terminée si toutes vos pages possèdent un bandeau graphique à la place du titre textuel, et si tous vos liens sont colorés et changent de couleur au passage de la souris.
Réalisé par Jean-Christophe MICHEL
© Février 2024