FR Tutoriel 1.7 · Pages – Svija ∴ Publish online with Adobe Illustrator

Mis à jour le 9 mars, 2020

< 1.6 · images — retour — 1.8 · modules >

Tutoriel 1.7 · Pages

Svija utilise les calques

Svija se sert des calques pour générer les pages de votre site et pour vous fournir des informations utiles.

Si vous n’êtes pas déjà habitué·e à l’utilisation de calques, il y a trois informations importantes à retenir :

Un fichier Illustrator doit compter au moins deux calques pour être transcrit correctement par Svija
Un calque caché dans Illustrator sera caché sur la page finale
Un calque dont le nom est en italique n’apparaîtra pas sur la page finale

Pour ouvrir le panneau Calques, choisissez Fenêtre › Calques.

Il suffit de maîtriser les trois icônes à gauche du panneau :

l’œil : rendre le calque visible
le cadenas : verrouiller les contenus (les protéger)
la flèche › vers le droit : afficher les contenus du calque

Formats de page par défaut

Les formats suivants sont proposés par défaut et sont inclus dans le modèle Illustrator « Svija Page.ait » (Svija Tools).

Ordinateur (dossier « sync/desktop ») :

fichier Illustrator 1680 px de large (hauteur variable)
1200 px contenu + 240 px marges cachés des deux côtés

Configuration grille conseillée : pas : 240 px · subdivisions : 24

Mobile (dossier « sync/mobile ») · 25% du format ordinateur :

fichier Illustrator documents 420 px de large (hauteur variable)
300 px contenu + 60 px marges des deux côtés

Ordre d’affichage

Quand le navigateur charge une page Svija, les éléments de la page, y compris les calques, sont dessinés dans l’ordre inverse :

les calques du bas sont dessinés avant les calques de dessus
les éléments placés derrière sont dessinés avant les éléments placés devant

C’est logique : il faut dessiner en premier les éléments qui seront couverts par d’autres éléments.

Si on veut qu’un contenu apparaisse rapidement en visitant la page, il faut le mettre en bas dans le panneau Calques et derrière les objets moins importants.

Les ID : CSS & Javascript

Si vous ne souhaitez pas ajouter des animations ou des effets CSS vous n’avez pas besoin de lire plus loin.

· · ·

Tous les éléments de la page peuvent être manipulés par le biais de CSS ou Javascript.

Pour ce faire, il faut leur attribuer des ID.

Un ID, c’est un nom unique qui sert à identifier un élément de la page. Dans Svija Admin on peut sélectionner des éléments par le biais de leurs ID et les manipuler.

Les ID des éléments de la page correspondent aux noms des calques et objets, tous visibles dans le panneau Calques.

Pour donner un ID à un objet, il suffit de cliquer deux fois sur l’objet dans le panneau Calques et renseigner le nom voulu.

Les espaces sont convertis en tirets bas, et les tirets normaux restent inchangés.

Il ne faut pas utiliser le tiret bas car Illustrator le convertit en entité HTML : _x5F_.

Pour chaque calque, Illustrator crée une nouvelle balise SVG où l’ID = le nom du calque :

ne pas utiliser le tiret bas
les espaces seront convertis en tirets bas
les tirets restent inchangés
les autres caractères spéciaux sont convertis en entités HTML

Par exemple, un calque nommé « menu-float » contiendra dans le code source :

‹g id="menu-float"›

Pour les modules, il est utile de donner un ID au SVG entier.

Pour ce faire, on utilise le premier calque (voir image ci-dessus) :

id svg-obj-id

Il suffit de remplacer « svg-obj-id » par le nom voulu (menu-bureau par exemple). On pourra alors utiliser du CSS dans les scripts du module pour le positionner comme on voudra. Pour mettre le menu en bas à droite, dans le coin, ce serait :

#menu-bureau {
  position:fixed;
  right:0; bottom:0;
   left: ;    top: ;
}

Calques d’information

Il est souvent utile de se servir des calques qui n’apparaissent pas dans la page finale :

texte d’origine pour un calque de texte en courbes
emplacement d’un menu ou pied de page
astuces pour informations à retenir

Pour indiquer qu’un calque ne devrait pas apparaître dans le SVG final :

cliquer deux fois sur le calque pour accéder aux options
décocher « Imprimer »
il n’est pas nécessaire de cocher « Modèle »

Le calque ne sera pas inclus dans le fichier SVG final.

Visibilité des calques

Si un calque n’est pas visible dans Illustrator, il ne sera pas visible sur la page :

les contenus apparaîtront normalement dans le SVG
le directive CSS sera display:none;

Il est donc possible de faire apparaître ultérieurement les contenus en manipulant le CSS du calque.

Piège potentiel : deux objets ayant un même ID

Si deux objets ont le même nom dans Illustrator :

un calque appelé « bloc-temoignage »
un groupe d’objets appelé « bloc-temoignage »

Les ID des objets dans la page seront :

‹g id=”bloc-temoignage”›
‹g id=”bloc-temoignage_1“›

On ne peut pas savoir préalablement quel objet aura quel ID.

Le fait de supprimer l’un des deux ne corrige pas le problème : une fois qu’un objet a l’ID « nous-contacter_1 », le fait de supprimer l’autre nom n’aura aucun effet.

Pour résoudre le problème il faut supprimer toute référence à « nous-contacter » puis le remettre.

Poursuivre le tutoriel : modules.