Astuces de mise en page

sur les pages des sites créés sur YesWiki

(source initiale de cette page: Interpole https://interpole.xyz/?PageAjoutAnimation - cliquer sur REMINDER dans la fiche pour retrouver cette ressource!)

IMAGES


STP réduire le poids des images avant de les mettre sur le site!!! << 150k° idéalement

En ligne
Multiples sites, dont I💚IMG, Unsplash gratuits, sans besoin de compte. Freepiks

Sur PC
Réduire la taille d’une image sur pc Windows.
Ouvrir l’image, elle s’ouvre dans Photos (par défaut, sinon clic droit, sélectionner Ouvrir avec et choisir Photos)
Cliquer sur les « trois petits points » dans le menu puis choisir Redimensionner l’image.
Faire glisser la molette de la Qualité afin de la baisser, voir en bas l’indication de taille correspondante en Ko (aller jusqu’à environ 150 Ko).
Cliquer sur enregistrer (indiquer le nom et l’emplacement du fichier)


Sur Mac
cliquer sur l'image, qui ouvra en Aperçu.
Cliquer sur ajuster la taille
Regarder le poids en k° en bas
Si >150 k°, tester différentes niveau de réduction, comme suit...
Vérifier que ECHELLE PROPORTIONNELLE est bien cochée
Réduire la largeur (la hauteur s'ajustera automatiquement)
Regarder le résultat en k°, en bas de la fenêtre
Quand c'est <150k° (même 50k°, c'est largement suffisant)
Sauvegarder (bonne habitude de rajouter au nom de l'image 'web' si tu réutilises l'image plus tard, tu sauras que la réduction est déjà faite!)

Sur Linux
Quelqu'un peut donner des conseils sur Linux?


Pour info: 150k° = 1 500 octets / 2 M° = 2 000 000 octets

Pour télécharger une image dans une page (hors cadre d'un formulaire), utiliser le bouton Joindre/insérer un fichier


Cliquer sur cette page deux fois pour voir le code derrière le formatage!

Règles de formatage
Accentuation

Gras

Italique

Souligné

Barré


Titres

Titre 1


Titre 2


Titre 3


Titre 4


Titre 5

Listes

  • Liste à puce niveau 1
  • Liste à puce niveau 1
    • Liste à puce niveau 2
    • Liste à puce niveau 2
  • Liste à puce niveau 1

  • 1. Liste énumérée
  • 2. Liste énumérée
  • 3. Liste énumérée


point inclusif (sur Mac) = alt maj F
ex. animateur·ices

texte invisible ici! voir en mode édition pour copier les parenthèses avec le code!! exemple :
parenthèses à copier:

Nom connu sur internet (comme YouTube, par exemple) qui aura un crayon ainsi YouTube qui invite à mettre un lien si on ne met pas les double-double guillemets! (cliquer 2 fois sur cette page pour voir)

Liens

Texte à afficher pour le lien externe

Texte à afficher pour le lien interne


Lien qui force l'ouverture vers une page extérieure

ton texte


iFrames
https://yeswiki.net/?DocumentationIntegrerDuHtml
mettre avant le code iFrame, et après
pour "embed", encapsuler, intégrer un widget

.
Tableaux

Colonne 1 Colonne 2 Colonne 3
John Doe Male
Mary Smith Female



Boutons wiki

votre texte

Placer un bouton qui s'ouvre dans un autre onglet

votre texte


Ecrire en html

si vous déposez du html dans la page wiki,
il faut l'entourer de doubles guillemets (deux fois le double guillemet, si tu vient de l'Angleterre, où on a des guillemets simples aussi!!)
pour qu'il soit interprété


Placer du code en commentaire sur la page




Code exemples
Insérer un iframe
Inclure un autre site, ou un pad, ou une vidéo youtube, etc...


(continuer à scroller -- plus en dessous !)

Texte en couleur

votre texte à colorer

Quelques codes couleur => mauve : 990066 / vert : 99cc33 / rouge : cc3333 / orange : ff9900 / bleu : 006699Voir les codes hexa des couleurs : http://fr.wikipedia.org/wiki/Liste_de_couleurs
Message d'alerte
Avec une croix pour le fermer.

Attention ! Voici votre message.



Label "important" ou "info"
Important et Info

Important et Info


Mise en page par colonne
le total des colonnes doit faire 12 (ou moins)

Titre de la colonne 1

Texte colonne 1

Titre de la colonne 2

Texte colonne 2


Créer des onglets dans une page
Il est possible de créer des onglets au sein d'une page wiki en utilisant l'action . La syntaxe est (elle est à répéter sur toutes les pages concernée par la barre d'onglet)


Formulaires avec onglets

choisir "déplacer le bouton valider" au début de la création des onglets, afin qu'on ne le voit pas sur les premiers onglets, seulement à la fin.


Formulaires de contact


Pour l'affichage des formulaires, le champ "facettes" pour les réglages concernent les filtres qu'on peut y mettre.

Inclure une page dans une autre

NomPageAInclure

Pour inclure une page d'un autre yeswiki : ( Noter le pipe | après les premiers PageAInclure


Image de fond avec du texte par dessus
Avec possibilité de mettre du texte par dessus

Télécharger le fichier monbandeau.jpg

Texte du titre

description