Débuter sur iWeb : les ombres

Ombres et problèmes

30 juin 10

Vous pouvez rencontrer quelques problèmes avec les ombres d’iWeb :

‣l’affichage des ombres des images détourées sous Firefox.
‣la transformation des textes en image
‣la possible disparition du changement de couleur des liens.

Il existe des moyens simples des les éviter.

A. Les ombres d’iWeb :

1. sur iWeb :

Les ombres d’iWeb s’ajoutent via l’inspecteur :

1. Sélectionner un objet sur la page iWeb (un mot, un extrait de texte, une zone de texte, une image, une figure, etc.)
2. Afficher l’inspecteur > inspecteur des graphismes

> cocher Ombre.
Puis choisissez la couleur, l’angle, le décalage, le flou et l’opacité.

Réglages de l’image Artwork du jeu Mirror’s Edge, EA (cf plus bas)

2. Après publication :

l’ombre d’une image est due à un effet JavaScript,
l’ombre d’un texte ou d’une zone de texte sur iWeb est une image du texte accompagnée de son ombre (cf plus bas «des zones de texte en images»).

Pour les images détourées, contrairement à ce que laissait espérer iWeb et à ce que l’on observe sur de nombreux autres navigateurs, le résultat affiché sur Firefox n’est pas le celui attendu.

Hou, que c’est moche!

Pour éviter cela, 2 solutions entre autres. Dans les 2 cas, il s’agit de ne plus avoir une ombre due à un effet JavaScript, mais une ombre en «image».

1. En passant par Aperçu :
a. iWeb

Sélectionner une image

lui ajouter une ombre avec l’inspecteur des graphismes

copier cette image

b. Aperçu

Ouvrir Aperçu

cmd N (ou Barre de menu > Édition > créer à partir du presse-papier)

au choix :

•copier l’image : cmd C ( ou Barre de menu > Édition > Copier ) puis la coller sur votre page iWeb
•afficher la barre latérale d’Aperçu et glisser-déposer la vignette de la colonne latérale dans iWeb
•sauvegarder au format PDF dans le Finder, glisser ultérieurement ce PDF sur iWeb.

Une figure et son ombre copiées dans iWebpuis créé dans Aperçu à partir du presse-papier.

c. Résultat obtenu : à voir sur Firefox

d. NB :

Pour les images non détourées, sans zone de transparence , il n’est pas nécessaire de faire tout cela. Les bordures de la partie visible étant les mêmes que celles de l’image entière, on peut donc utiliser le système d’ombre d’iWeb

Artwork du jeu Mirror’s Edge, EA (PS3, XBOX 360, iPad)

Autre précision : comme il le fait pour les ombres, le presse-papier peut copier d’autres effets comme les cadres et les reflets.

2.En utilisant la capture d’écran :

Si vous avez un fond uni, remplacez votre image par une capture d’écran peut être une solution gagnante.

1.dans iWeb :

Sélectionner votre image

ajouter lui une ombre avec l’inspecteur des graphismes

Faites une capture d’écran sélective (cmd maj 4 ) de votre image

Renommez votre capture (donnez-lui un nom simple) dans le Finder glissez-la dans iWeb à la place de votre image originale, effacez cette dernière

Publier

2. Dans Safari

Visiter votre site avec Safari, vérifier l’image s’accorde avec son arrière-plan.

Si vous notez des différences de teintes entre l’image et son arrière-plan, voici une alternative :

1.dans iWeb :

Sélectionner votre image

ajouter lui une ombre avec l’inspecteur des graphismes

Faites une capture d’écran sélective (cmd maj 4 ) de votre image

Publier

2. Dans Safari

Visiter votre site avec Safari

Faites une capture d’écran sélective (cmd maj 4 ) de votre image

Renommez votre capture (donnez-lui un nom simple) dans le Finder glissez-la dans iWeb à la place de votre image originale, effacez cette dernière

3. Retour dans iWeb

Renommer votre capture (donnez-lui un nom simple) et collez-la dans iWeb à la place de votre image originale, effacer cette dernière

Publier

Pourquoi utiliser cette méthode des captures d’écran plutôt que la première avec Aperçu ?

C’est une question de poids d’image.

La première méthode affiche une image détourée avec des zones de transparence qui devra être convertie en PNG par iWeb

la seconde méthode capture l’image détourée avec son arrière-plan, il n’y a pas de transparence, l’image sera convertie en JPG par iWeb.

Les images en JPG d’iWeb sont généralement beaucoup légères que les PNG.

Je ne vais pas m’étendre : voir aussi la page «Des textes en images».

En préambule de ce chapitre, voici un petit montage en image pour montrer 3 modes de sélection, il s’agit de bien différencier la sélection du texte (1 et 2) au sein de sa zone et la sélection de la zone de texte (3):

(1) sélection d’un mot.

(2) sélection d’un groupe de mots. Ce groupe de mots pouvant être la totalité du texte dans sa zone.

(3) sélection d’une zone de texte.

Ajouter une ombre à un mot, un groupe de mots ou une zone de texte transforme la zone de texte en image.
Ajouter une ombre à du texte est donc un bon moyen de tuer le référencement de votre page par les moteurs de recherche (les ombres sont donc à éviter sur les mots les groupes de mots et les zones de textes les plus importantes) .

Lorem ipsum dolor sit amet, consectetur adipiscing elit, set eiusmod tempor incidunt et labore et dolore magna aliquam. Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse molestaie cillum. Tia non ob ea soluad incom dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda et tam. Neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam is nostrud exercitation ullam mmodo consequet.

Une zone de texte avec ombre convertie en image

Si vous demandez à afficher l’indicateur de dessin dans les préférences d’iWeb,

celui-ci apparait dans la partie supérieure gauche de la zone de texte signalant que cette dernière sera convertie en image à la publication.

Mais rien ne serait merveilleux s’il n’existait pas des exceptions :

Si vous ajoutez une ombre ayant une opacité de 100 % à un mot ou un groupe de mots au sein d’une zone de texte celle-ci ne sera pas transformée en image

Si vous ajoutez un fond opaque (opacité 100 %) à une zone de texte, celle-ci ne sera pas transformée en image, il n’y aura pas d’ombre sous le texte et l’ombre apparaitra uniquement à la périphérie de la zone de texte

Lorem ipsum dolor sit amet, ligula suspendisse nulla pretium, rhoncus tempor placerat fermentum, enim integer ad vestibulum volutpat.

(1) Ajout d’une ombre (opacité 75 %) à un texte, la zone de texte devient une image.

(2) Ajout d’une ombre (opacité 100 %) à un texte, le texte reste du texte à la publication.

(3) ajout à la zone de texte d’une ombre (opacité 75 %) et d’un remplissage couleur (opacité 100 %). le texte reste du texte

Pour avoir un changement de couleur des liens, il faut que l’objet sélectionné pour l’ajout du lien et de l’ombre soit

•le texte au sein de sa zone de texte
•et non la zone de texte elle-même.

Sélectionnez le texte au sein de sa zone.

Ne sélectionnez pas la zone de texte.

1.Ajouter une ombre à la zone de texte :

En sélectionnant la zone de texte et en lui ajoutant une ombre, le changement de couleur des liens (inspecteur de lien > Format > «Normal», «Passage du pointeur», «Suivi de lien», «Désactivation») ne se fait pas.

Survoler ces liens : le changement de couleur ne s’effectue pas.

2.ajouter l’ombre au texte :

En sélectionnant le texte au sein des zones de textes avant d’ajouter une ombre, le rollover est fonctionnel, les liens apparaissent en vert au survol de la souris.

ACCUEIL