Flashxpress » Dreamweaver général

Ajouter aux favoris

Bertrand Gac — Thu, 28 Jul 2005 17:56:26 +0000

Pour IE5+ uniquement

Il faut que votre programme de dessin puisse sauvegarder/exporter au format .ico. Sinon il y a des éditeurs spécialisés : MicroAngelo, IconForge…Faites une image de 16 sur 16 pixels, 256 couleurs, donnez lui le nom ‘favicon.ico’.
Dimensions et nombre de couleurs doivent être respectés, sinon il semble que IE n’en tienne pas compte.
Placez cette image à la racine de votre serveur, là où se trouve généralement votre page index.

Dans l’en tête du HTML, rentrez le code suivant :

On peut aussi placer l’image ailleurs, dans différents dossiers :

Dans ce cas il faut indiquer le chemin d’accès ET si vous voulez que l’icone apparaisse, quelque soit l’endroit où le visiteur veut bookmarker, la télécharger autant de fois que nécessaire dans les dossiers adéquats.

Extensions

Add To Favorites

Favorites Icon

Insert Shortcut Icon

Site dédié

Favicon.com – custom icons for your website
http://www.favicon.com/

How to Add a Shortcut Icon to a Web Page
http://msdn.microsoft.com/workshop/author/dhtml/howto/ShortcutIcon.asp

Appliquer des comportements sur du texte

Bertrand Gac — Thu, 28 Jul 2005 17:51:55 +0000

Les comportements ne peuvent s’appliquer que sur des images ou des liens. Or, on peut parfaitement avoir besoin d’utiliser un comportement sur un texte sans nécessairement que celui-ci soit un lien redirigeant vers une une autre page.

Appliquer un comportement sur du simple texte n’est pas possible, vous constatez que tous vos comportements dans la palette correspondante sont grisés, donc inaccessibles.

Pour remédier à cela, il faut créer un faux lien (null link) destiné à « bluffer » le navigateur. Sélectionnez votre texte, et dans le champ « Lien » de la palette des propriétés, rentrez l’une des syntaxes suivantes au choix:
- javascript:;
- javascript://
- # (le dièse est à éviter car Netscape y associe aussi un retour en début de page)

A présent, tous les comportements sont accessibles.

Snap Layers de Projectseven

Jean-Luc — Wed, 27 Jul 2005 19:01:27 +0000

Un problème récurrent au sujet de l’utilisation des calques est le problème du positionnement par rapport à des éléments tels que des images, dans un document utilisant des tableaux définis en pourcentage, en cas de résolutions différentes de l’écran ayant servi à la mise en page ou en cas de redimensionnement de la fenêtre du navigateur.

L’extension Snap Layers, disponible sur l’excellent site de Project Seven, permet de contourner ces problèmes, nous allons voir ici comment l’utiliser (reportez-vous au tutorial Introduction aux extensions pour savoir comment installer et utiliser les extensions).

Placement des images

On crée tout d’abord une interface, avec un tableau de trois lignes et deux colonnes, faisant 100% de largeur. Jj’ai défini des marges de 20 pixels dans le document, afin que le tableau ne colle pas aux bords du document.

Dans les colonnes de droite du tableau viennent se placer trois boutons, faisant 135 * 30 pixels et se nommant bouton_1.gif, bouton_2.gif et bouton_3.gif.

Dans le panneau Propriétés on nomme ces boutons, (boutonUn, boutonDeux, boutonTrois) afin de leur donner un identifiant unique, pas d’espaces ni de caractères accentués.

On en profite pour créer un lien virtuel, en tapant dans le champ Lien javascript:; (javascript deux points point virgule), lien qui nous permettra d’afficher les calques sur un évenement OnMouseOver.

Placement des calques

On définit ensuite trois calques, ayant pour noms, layerUn, layerDeux, layerTrois, d’une largeur de 150 pixels, hauteur indéfinie, visibilité cachée et de couleurs différentes, afin de bien les différencier.

L’interface des calques et des boutons dans le document

Ces calques peuvent être placés à n’importe quel endroit du document, le but étant de les faire apparaitre par rapport aux coordonnées du bouton voulu.

Les propriétés du layerUn

Interface "Snap Layers"

On accède au comportement via le menu Fenêtre > Comportements > Studio VII > Snap layers by PVII.

La nouvelle fenêtre qui apparait nous permet de choisir l’évènement, le bouton qui va servir d’ancre au calque et la position de ce calque par rapport au bouton choisi.

On sélectionne le boutonUn en Anchor Object, puis le layerUn qui va venir se positionner par rapport à ce bouton dans Layer to Snap et enfin la position par rapport à cette image dans Presets, ici à la droite du bouton (To the Right of Image).

En cliquant sur le bouton plus + de l’interface on ajoute autant d’évènement que voulu, au contraire en cliquant sur le bouton moins – on en élimine, on peut aussi les déplacer en utilisant les flèches haut et bas.

On peut donc jouer sur l’emplacement du calque par rapport à l’image choisi, soit en utilisant le menu déroulant Presets, soit en rentrant les coordonnées x y du calque choisi par rapport à l’image, dans les champs Offset Left et Offset Top.

Evènement onLoad et onResize

Par défaut l’extension s’applique à l’évènement onLoad de la balise , en cas de redimensionnement de la page il faut forcer le document à se recharger (pour NN4 et Opera) pour que les calques trouvent leurs positions par rapport aux images.

Vous pouvez trouver, toujours sur Project Seven, des extensions pour forcer le rechargement du document pour les navigateurs Netscape et Opera, à savoir les extensions Opera Resize Fix et ReDoIt. Vous pouvez trouver un bref descriptif de ces dernières dans le tutorial de Mimi Quelques extensions indispensables.

Affichage des calques

Il nous reste à afficher/masquer les calques sur un évènement OnMouseOver des différents boutons, pour ce faire vous pouvez utiliser les outils présents dans les comportements de Dreamweaver en natif ou encore une fois les extensions de Project Seven, à savoir AutoLayers et autoHide Layers.

Conclusion et exemple

Cette extension est très pratique pour la création de menus par exemple, mais pas seulement, car en la combinant à d’autres, vous pouvez jouer sur l’emplacement et les évènements de vos calques, et ce de manière très simple, pour avoir des interfaces vraiment dynamiques et réactives.
Ce n’est qu’une histoire d’imagination…
Vous pouvez voir l’exemple du tutorial sur cette page.

Barres de défilement en couleurs

maru — Wed, 27 Jul 2005 18:53:55 +0000

Il faut utiliser les feuilles de style (interne ou externe) pour réaliser cet effet, mais ce n’est pas géré par Dreamweaver !
Donc direction le Bloc-notes ou autre éditeur :

Ces propriétés s’appliquent aussi aux champs textes multlignes (Textarea).