Rechercher
Formation médicale continue
Profession
Divers
Rechercher

Créer un site web

EMBELLISSEMENT : Les tableaux et les images


  1. Nous savons créer une page
  2. Nous savons aller d'une page à une autre par un lien Hypertexte
  3. Nous savons transferer nos pages sur notre MINISITE
  4. Il nous reste a embellir nos pages par 3 artifices
    1. Les Tableaux
    2. Les Images
    3. Les Cadres

     

LES TABLEAUX

OUVRONS NOTRE MODELE MINISITE_page.DWT

1.Insérons un tableau en haut de la page (ENTETE)

Page {1} Minisite
***{:-)

2. Insérons un tableau en milieu de notre page (CORPS)

  {TEXTE}

3.ENREGISTREZ LES MODIFICATIONS DU MODELE (CTRL+W)

@ suivre pour la suite suivante...

Au fait il y en a au moins un seul qui suit dans la bande ???

EXEMPLES SUR http://bluegyn.free.fr/m/minisite/4a_tableaux/

Les Images

===================================

Il existe 2 types d'utilisation d'une image

====================================

1. Soit le simple agrément graphique Comme une photo d'échographie

2. Soit la présentation d'un lien cliquable convivial vers une autre page

Ce lien interactif pouvant se présenter de 3 façons:

a. L'Hyperlien sur une Image complète

b. Réalisation d'un Bouton ou d'un menu dynamique

c. Ou suprème rafinement, la Carte interactive

Rappelons en préambule que toute image intégrée à une page WEB doit être parfaitement préparée à l'avance, car si son redimensionnement à l'intérieur de la page est possible, elle est considérée par tous les maîtres comme une erreur de débutant, car elle consomme inutilement de l'espace.

====================================

Il y a très globalement 2 types de formats graphiques disponibles

====================================

1. Le Format JPG ou JPEG (pour Join Picture)

qui convient parfaitement pour les photographies complexes et polychromes (ex Echographies)

2. Et le Format GIF (grafic InterChange)

qui est plus performant pour les dessins (ex captures d'écran.)

**************************************************************************

COMMENT INSERER UNE IMAGE AVEC DREAMWEAVER ?

**************************************************************************

Rien n'est plus simple Il suffit de Placer son Curseur sur la page puis de Cliquer sur:

INSERTION Puis IMAGE

De Chercher son Image (grace aux miniatures affichées) Et de cliquer sur [SELECTIONNER] Pour l'intégrer dans la Page

**************************************************************************

POUR INSERER UNE IMAGE EN FOND D'ECRAN

**************************************************************************

Il faut cliquez cette fois ci sur le

MENU MODIFIER puis Propriété de la Page (Ou cliquer-droit sur la Page Blanche)

Et Choisir une image

Il convient de bien choisir son fond d'écran, car la mosaique obtenue est souvent d'assez mauvais effet, rendant la lecture de la page difficile Elle est donc à priori à déconseiller.

Rien ne vaut pour un site medical un banale page blanche, ou un fond pierre ou un cahier d'écolier assez discret.

**************************************************************************

QUELLES SONT LES PROPRIETES MODIFIABLES DE CETTE IMAGE ?

**************************************************************************

Pointez l'image insérée dans votre page et examinez l'INSPECTEUR DE PROPRIETES

*LIEN

===

Permet de désigner l'hyperlien cliquable en sélectionnant la page WEB qui devra s'ouvrir apres clic sur l'image. (Cette notion est déja connue et rien ne permet de différencier un hyperlien textuel et visuel.

*SEC

===

Sec vient de "texte secondaire" parfois appelé "alternatif", et désigne le texte à afficher sur la page, lorsque le navigateur ne peut ou ne doit pas afficher les images (C'est en gros la légende)

DANS LES PROPRIETES AVANCEES DE L'INSPECTEUR ON TROUVERA AUSSI

*CIBLE

====

Désigne le CADRE dans lequel doit d'afficher le lien (cette notion sera vue avec les CADRES dans la leçon suivante

*BORDURE + ESPACE Hor +t ESPACE Ver

========

Qui sont faciles a comprendre et a parametrer, désigne l'agencement (encadrement) de l'image dans la page.

*SRC FAIBLE

=========

Désigne un image alternative de faible poids, qui doit etre chargée en démarrage de page, lorsque l'image complète est assez lourde (et ne semble compatible qu'avec Netscape

Il serait préférable de réaliser des Miniatures (ThumbNail), et de placer un lien sur chaque Miniature vers l'Image en taille réelle.

On note également le Bouton [ EDITER

qui lie DREAMWEAVER à un RETOUCHEUR GRAPHIQUE quelconque (comme XNVIEW par exemple) le programme intégré de Macromédia "FireWorks" n'étant pas fourni avec cette version gratuite, peut être remplacé par celui de votre choix.

**************************************************************************

COMMENT REALISER UNE IMAGE SURVOLEE ?

**************************************************************************

L'image survolée désigne un texte ou une image qui change d'aspect au passage de la souris, et est habituellement utilisée pour la réalisation de superbes barres de menus animées et inter-actives.

La encore la Manip qui bien que techniquement assez complexe est de mise en oeuvre enfantine sous DREAMWEAVER car il suffit de cliquer sur le

MENU INSERTION Puis "Image Retournée"

Et d'argumenter les Champs

1. Image Originale (telle qu'elle apparait sur la page)

2. Image Renouvelée (telle qu'elle doit apparaitre au passage de la souris)

Puis de désigner le lien cliquable et de cocher la case [PRECHARGER LES IMAGES] afin que l'illusion du survol soit quasi instantané.

En fait toute la difficulté consiste dans la réalisation de ces 2 images siamoises car de tailles strictement superposables, Le plus simple etant d'ecrire un menu standard en Noir sur Blanc et le meme survolé en Blanc sur Noir (Car les menus textuels présentés ne sont en fait que des images de texte

Celui qui s'interesse aux scripts constatera en examninant le code HTML que cette manip enfantine crée toute une série très complexe de code javascript sans aucune connaissance, ni intervention de l'utilisateur

**************************************************************************

QUANT A LA REALISATION DES CARTES CLIQUABLES

**************************************************************************

Nous nous bornerons à dire que cette possibilité existe,

pour réaliser par exemple des "Cartes de France", un clic sur un département permettant d'ouvrir une page régionale contextuelle, ou autre exemple des photos de classe, un clic sur chaque bobine ouvrant un CV personnalisé.

ll suffit de cliquer sur le Bouton [ Carte ] de l'Inspecteur d'image, puis de dessiner des zones cliquables et d'argumenter leurs liens

@ suivre

***{:- Kenavo

Dr Jean-Christophe HILD


Retour

15/01/2002