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 :

1. cliquer droit sur le dossier dans lequel on veut créer la nouvelle page web
2. cliquer sur Nouveau Fichier
3. donner un nom au fichier en conservant l'extension .html

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 :

• NOM : .........
• Prénom : .........
• Classe : .........
• Matière : Numérique et Sciences Informatiques
• Année Scolaire : .........

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 :

1. écrire le texte du lien puis le sélectionner
2. cliquer sur la cible (qui est à droite de Lien) puis viser le fichier destinataire dans le volet Fichiers
3. relâcher le bouton gauche de la souris sur le fichier destinataire

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.

 

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 :

• le message de bienvenue sous forme d'une images personnalisée utilisant les textures
• les renseignements NOM, Prénom, Classe et Année Scolaire en texte
• un sommaire contenant le lien vers les animaux

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