Y'en a qui maitrisent bien Dreamweaver?

[altar]

Salut a tous,

Je veux creer une tres grande image avec des zones cliquables (avec des liens qui emmenent vers diverses pages de mon site)

Alors dois-je utiliser des images maps? Ou dois-je slicer mon image et creer un tableau dans Dreamweaver?

Pour moi, qui suis plus a l'aise dans Illustrator, les images maps ont l'avantage d'etre plus simples a faire, j'imagine. Mais vu que l'image sera tres grande ca peut etre un peu long a charger.

D'un autre cote, le tableau chargera peut-etre plus vite mais il peut y avoir des differences d'affichage suivant le navigateur, d'apres ce que j'ai entendu.

Alors a votre avis, comment dois-je faire?

Un lien pour illustrer ce que je cherche a faire.

Merci

[Imperatrice]

Découper l'image facilite le chargement, c'est préférable (la patience de l'internaute a des limites quand il attend )

Les différences d'affichage selon les navigateurs sont possibles, mais pas systématiques, ni incontournables.

[altar]

d'accord, mais faire un tableau aux cases toutes differentes ca s'apprend facilement? Tu as regarde le lien que j'ai mis en exemple?

Je lis que si je decoupe mon image dans Fireworks, Dreamweaver pourra faire automatiquement le tableau. J'ai pas Fireworks mais j'imagine qu'avec Illustrator ca sera pareil...

Modifié 30 Août 2006 par altar

[Imperatrice]

d'accord, mais faire un tableau aux cases toutes differentes ca s'apprend facilement? Tu as regarde le lien que j'ai mis en exemple?

Oui un tableau, c'est simple à faire (et oui j'ai vu le lien, c'est un tableau).

Je peux t'aider si tu veux.

Le tout c'est surtout de découper ton image en portions... mais là, c'est moins mon domaine : je n'utilise pas Dreamweaver, ni Fireworks, ni Illustrator

Pour faire un tableau le code est le suivant :

<table> <!-- ouverture du tableau -->
  <tr> <!-- 1ère ligne du tableau -->
	 <td> <!-- 1ère cellule de la première ligne -->
		  <!-- ICI ma portion d'image -->
	 </td> <!-- fermeture 1ère cellule -->

	 <td> <!-- 2ème cellule de la première ligne -->
		  <!-- ICI ma portion d'image -->
	 </td> <!-- fermeture 2ème cellule -->

	 <!-- autant de cellules nécessaires sur la ligne -->

  </tr> <!-- fermeture 1ère ligne -->

  <tr> <!-- 2ème ligne avec autant de cellules à insérer -->
	 <td><!-- ICI ma portion d'image --></td>
	 <td></td>
  </tr> <!-- fermeture de la ligne -->

</table> <!-- fermeture du tableau -->

Si tu utilises Dreamweaver, regardes le code, il sera de cette forme.

Si tu as des questions, n'hésites pas.

[altar]

Merci! Donc toi c'est pas d'editeurs html, tout a la main.

T'es une codeuse hardcore!

Je vais m'y essayer demain et je reposterai le resultat.

[Imperatrice]

Merci! Donc toi c'est pas d'editeurs html, tout a la main.

T'es une codeuse hardcore!

codeuse hardcore... on me l'avait jamais faite celle là ! lol

Plus sérieusement, c'est vrai qu'un logiciel WYSIWYG (What You See Is What You Get) est pratique au début car çà permet de construire avec un visuel.

Mais çà n'empêche pas de regarder à quoi correspond le code. Petit à petit, ces lignes infâmes deviennent familières.

Un logiciel te rajoute toujours des bouts de code à sa sauce... alors au bout d'un moment, oui, à la main, c'est plus simple

Fais tes essais, et si tu galères, je t'aiderai

[aymericj]

Bonjour Altar,

Si tu as photoshop en plus d'illustrator tu peux passer par imageready pour créer ta map complète, avec l'avantage de choisir pour chaque partie de ton image découpée si tu choisis gif/png8 ou jpeg en focntion des informations visuelles.

Tu peux également assigner un lien sur une partie (tranche).

Et générer ta page html à la volée.

Fireworks le fait, mais comme tu ne l'as pas et que la plupart des gens qui ont illustrator ont aussi photoshop.

Si tu n'as jamais utilisé imageready mais que tu es habitué a photoshop, au final ce n'est pas très compliqué, il suffit de tatonner un peu.

Ahh oui, au passage pour imperatrice, je n'ai pas répondu sur ton blog, mais pour OS CSS, attends un peu, on vient de la tester et y'a encore pas mal de bugs.

++

Aymeric Jacquet

[Imperatrice]

Ahh oui, au passage pour imperatrice, je n'ai pas répondu sur ton blog, mais pour OS CSS, attends un peu, on vient de la tester et y'a encore pas mal de bugs.

Merci de l'info Aymeric.

Veux-tu partager ton avis la dessus sur ce fil de discussion là (spécial osCSS) ?

Un autre utilisateur a l'air d'en être content (en reconnaissant qu'il y a du boulot quand même ) ..j'aimerai me faire une opinion plus précise !

[pixhiboo]

même si je suis graphiste à la base, je pratique l'intégration souvent et franchement...déjà que dreamweaver c'est pas très propre alors Image ready....si c'est juste pour couper des images pourquoi pas mais surtout n'utilises pas son code.

[aymericj]

Bonjour pixhiboo

Dans mes souvenirs des précédents messages de altar, il n'a que peu de connaissances de l'html, il l'a dit lui même.

Alors je lui apporte une réponse à la mesure de ses compétences, du moins j'essaie.

Et contrairement à la légende urbaine que tu contribues à faire circuler, imageready bien configuré peu faire un code très propre.

Il peut même t'editer une page non structurée en tableaux mais en conteneurs de type div avec le css qui va bien avec.

Les outils ne font que ce qu'on leur demande, après il suffit de savoir bien les configurer.

Et ça vaut aussi pour dreamweaver.

++

Aymeric

[altar]

Ah la oui, moi et le html, ca fait 3...

Apres avoir passe des jours a valider le code de mon blog pour decouvrir apres que le designer de ma boutique est arrive a faire 14 erreurs en 11 lignes de code...

Je crois vais creer et decouper mon image avec Illustrator, exporter dans Photoshop, faire "write slices" et ensuite verifier dans ImageReady (j'ai lu un tuto hier alors je fais le malin )

Mais avant je dois faire de bonnes photos et faire une bonne composition.

[Dudu]

Découper l'image facilite le chargement, c'est préférable

C'est faux, puisque toutes les méta-données sont dupliquées le nombre de fois que l'image est découpée.

Du coup, 10 petits fichiers seront plus lourds qu'un seul.. pour un résultat visuel identique

[BlinZ]

Peut être mais ça fait patienter les visiteurs du site...

Voir petit à petit les morceaux d'images participe au suspence

[PotatoesJunky]

Peut être mais ça fait patienter les visiteurs du site...

Voir petit à petit les morceaux d'images participe au suspence

L'autre solution consiste à enregistrer la grande image en jpg progressif (image apparaît d'abord floue, puis de moins en moins au fur et à mesure qu'elle se charge), ça peut aussi être une solution.

Au passage, je confirme ce que dit aymericj quant à IR > le code généré est propre et peut même être généré en XHTML/CSS.

quant à Dreamweaver, je l'utilise aussi, mais toujours en mode code+création, ce qui me permet de modifier le code à ma sauce, mais c'est quand même plus rapide que la saisie au bloc-notes.

Enfin, bref, my 2 cents

[mediaforest]

il me semble que si toutes les images font la même taille, on peut obtenir le même résultat sans map et sans tableau :

<p align="left">
<a href="<!-- ici l'url d'action pour la 1ere image --><img src="<!-- ICI l'url de la 1ere image -->" border = "0" /></a>
<a href="<!-- ici l'url d'action pour la 2° image --><img src="<!-- ICI l'url de la 2° image -->" border = "0" /></a>
<a href="<!-- ici l'url d'action pour la 3° image --><img src="<!-- ICI l'url de la 3° image -->" border = "0" /></a><br/><!-- fin de la 1ere ligne -->
<a href="<!-- ici l'url d'action pour la 4° image --><img src="<!-- ICI l'url de la 4° image -->" border = "0" /></a>
<a href="<!-- ici l'url d'action pour la 5° image --><img src="<!-- ICI l'url de la 5° image -->" border = "0" /></a>
<a href="<!-- ici l'url d'action pour la 6° image --><img src="<!-- ICI l'url de la 6° image -->" border = "0" /></a><br/><!-- fin de la 2° ligne -->
<a href="<!-- ici l'url d'action pour la 7° image --><img src="<!-- ICI l'url de la 7° image -->" border = "0" /></a>
<a href="<!-- ici l'url d'action pour la 8° image --><img src="<!-- ICI l'url de la 8° image -->" border = "0" /></a>
<a href="<!-- ici l'url d'action pour la 9° image --><img src="<!-- ICI l'url de la 9° image -->" border = "0" /></a><!-- fin de la 3° ligne -->
</p>