Accès à votre lecteur réseau directement depuis Dremweaver

RAPPEL : 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:.

Durant l'activité 2 vous avez créé une nouvelle page nommée index.html dans le répertoire site de votre lecteur réseau P: (le chemin exact étant p:\documents\nsi\site).

Cette page est "la page d'accueil principale" de votre site Internet (à ne pas confondre avec la page index.html qui est dans le dossier animaux) :

Double cliquez sur votre fichier index.html dans le répertoire site de votre lecteur réseau afin de l'ouvrir dans Dreamweaver.

 

Utilisation des tableaux

Qu'est-ce qu'un tableau ?

Un tableau est une structure permettant de présenter des données de manière ordonnée dans la page web.

Voici un exemple de tableau :

 

Comment ajouter un tableau dans une page web ?

Pour apprendre à utiliser les tableaux dans Dreamweaver, suivez les instructions suivantes en réalisant les actions dans le logiciel et en les mémorisant.

Vous réaliserez dans Dreamweaver les actions demandées dans ce document ressource mais sans enregistrer la page web servant d'exemple d'apprentissage des tableaux. Une fois que vous savez faire un tableau dans Dreamweaver, vous allez en créer un sur la page d'accueil de votre site.

Ouvrez une nouvelle page web dans Dreamweaver (menu Fichier + Nouveau + Page de base + HTML + Créer) puis insérez-y un tableau à 4 lignes et 2 colonnes en cliquant sur Tableau dans le menu Insertion :

Voici à quoi ressemble votre tableau pour l'instant dans la nouvelle page web :

Commençons par colorer les bords du tableau afin qu'il ressorte mieux sur la page web. Pour cela il faut sélectionner le tableau en cliquant sur la balise <table> en bas de l'écran afin d'accéder aux propriétés globales du tableau :

Une fois les propriétés globales du tableau affichées en bas de l'écran il faut mettre 0 dans Espacement de cellule (afin d'avoir une bordure pleine) et configurer la couleur du contour :

Le tableau peut ensuite être rempli en saisissant du texte dans chacune de ses cellules :

Voyons maintenant comment configurer l'alignement du texte et la couleur du fond de chaque cellule du tableau.

Pour mettre en forme le tableau on utilise les propriétés de chaque cellule disponibles dans le volet Propriétés lorsque le curseur est dans le tableau :

Voilà notre tableau mis en forme, mais il n'est pas centré sur la page :

Pour centrer un tableau au milieu de la page web il faut commencer par le sélectionner comme du texte en utilisant la souris, le tableau devient alors foncé.

Lorsque le tableau est sélectionné il faut ensuite cliquer sur le bouton de centrage (comme pour du texte) :

Et voici le tableau parfaitement centré dans la page :

Pour agrandir un tableau on peut facilement ajouter une ligne ou une colonne en allant dans le menu Insertion puis dans Objets du tableau :

Voici par exemple une nouvelle ligne ajoutée en bas du tableau :

Enfin, pour modifier facilement un tableau on trouvera toutes les commandes utiles dans le menu Modifier puis dans Tableau (ajout ou suppression d'une ligne ou d'une colonne) :

 

Astuce à tester : en allant dans le menu Commandes + Formater le tableau, Dreamweaver propose plusieurs mises en forme personnalisables pour colorer rapidement le tableau.

Retener ces procédures permettant de créer et de configurer un tableau dans Dreamwever, puis fermer la page web qui a servi d'exemple d'apprentissage des tableaux sans l'enregistrer (menu Fichier + Fermer).

 

Amélioration de votre page d'accueil

Vous savez désormais créer des bandeaux graphiques dans Fireworks en utilisant les textures, et créer des tableaux dans Dreamweaver pour structurer le contenu d'une page web.

En utilisant à la fois les tableaux et les textures de Fireworks, personnalisez votre page d'accueil principale en y faisant apparaître les 3 éléments suivants :

• le message de bienvenue sous forme d'une images personnalisée utilisant les textures (un bandeau graphique)
• les renseignements NOM, Prénom, Classe, Matière et Année Scolaire sous forme d'un tableau à fond coloré (comme vu ci-dessus)
• un sommaire contenant le lien vers les animaux sous forme d'un bouton graphique créé avec Fireworks comme illustré ci-dessous

Rappel : le chemin absolu de votre page d'accueil principale à modifier est p:\documents\nsi\site\index.html

Voici quelques exemples de boutons graphiques réalisés avec le logiciel Fireworks :

Etc.

Pour convertir une image en bouton il suffit de renseigner le Lien dans les propriétés de l'image (ou d'utiliser la cible à droite de Lien pour viser le fichier destinataire dans le volet fichiers de Dreamweaver).

Comme pour la création des bandeaux graphiques les possibilités artistiques sont pratiquement infinies dans Fireworks en jouant sur les différentes couleurs, les différentes textures, le jeu de lumière, les ombres ou encore les différentes polices de caractères.

Attention tout de même : visuellement il faut absolument veiller à ce que les boutons ne se confondent pas avec les bandeaux graphiques. En voyant une image représentant un bouton sur la page web le visiteur doit immédiatement comprendre qu'il s'agit d'un bouton cliquable (comme lorsqu'il voit un lien textuel) et non d'un simple texte encadré ou d'un titre ...

On peut aussi s'amuser à dessiner des boutons rappelant les têtes des animaux, ou encore remplacer tous les liens textuel des pages des animaux (liens de navigation permettant de passer d'une page à l'autre et liens de retour à la page d'accueil) par des boutons graphiques assortis à la page.