Comment créer un site Web à partir d'une seule image fixe

Trancher de l'image

1. Ouvrez votre logiciel d'édition graphique. L'exemple montré ici utilise Adobe Fireworks, une application graphique spécialement conçu pour travailler avec des graphiques Web.

2. Ouvrez l'image que vous souhaitez utiliser pour votre site Web et redimensionner les dimensions dont vous avez besoin. Dans Fireworks, la commande de redimensionner une image se trouve sous le commandement de toile dans le menu Modifier.

3. Utilisez l'outil de texte dans votre programme graphique pour ajouter un titre ou étiquettes site à l'image afin que les visiteurs sauront quoi cliquez sur si elle est pas évident de l'image.

   

4. Utilisez l'outil Slice dans votre boîte à outils de logiciels graphiques pour diviser votre image en sections plus petites. Dans Fireworks cela se fait en cliquant et en faisant glisser l'outil de tranche pour délimiter les zones en formes géométriques - rectangulaire par défaut.

   

5. Garder les zones que vous souhaitez être cliquables comme simples tranches de sorte que le plan de l'image n'a pas à aller sur plusieurs tranches pour créer un point chaud.

6. Double-cliquez sur l'étiquette de tranche et renommez-le si votre programme graphique Web vous donne la possibilité d'étiqueter vos tranches. Dans Fireworks, les étiquettes sont dans la palette de calque Web sur le côté droit de l'écran. Les étiquettes vous aident à identifier les différentes tranches si vous affichez le code HTML de votre page Web plus tard et devez modifier quelque chose.

   
   
   
   
   

   

7. Créer suffisamment tranches pour couvrir l'ensemble du graphique.

   

8. Enregistrez votre fichier, puis l'exporter, en utilisant le menu Fichier. Choisissez HTML et images sur l'écran d'exportation si vous utilisez Adobe Fireworks. Cela crée une page web avec le code HTML de mettre vos tranches de retour ensemble en une seule image sur la page Web.

   
   
   
   
   

   

Ajouter les cartes d'image

1. Ouvrez la page Web exporté avec vos tranches dans un outil d'édition Web tel que Adobe Dreamweaver. Vous remarquerez que votre image a été remis ensemble par des tables sans bordure si vous utilisez Fireworks à exporter les tranches.

   

2. Ajoutez des cartes d'image à la page Web en utilisant la carte outil d'image dans votre logiciel d'édition Web. Si vous utilisez Adobe Dreamweaver, l'outil image de la carte se trouve sur la barre d'outils des éléments communs sous le commandement Insérer une image, qui est un menu déroulant.

   

3. Entrez adresse de la page web que le visiteur sera amené à en cliquant sur le point chaud, généralement une autre page sur votre site web.

   

4. Continuez à ajouter des images carte des points chauds jusqu'à ce que vous avez tous les domaines couverts de l'image que vous voulez être cliquable.

   

5. Enregistrez votre page web changements, puis de télécharger la page Web et les fichiers graphiques associés (les tranches) à votre serveur web. Utilisez un navigateur Web pour tester votre page et de voir comment les points chauds travaillent.