Iweb est un outil permettant de créer ses propres sites web, avec une simplicité déconcertante. C'est un outil wysiwyg. Au premier abord, ça peut paraître limité, mais ça donne des possibilités très intéressantes, dés qu'on commence à fouiller dans les paquets du logiciel. On peut tout modifier à l'intérieur: tout est laissé ouvert (comme d'habitude dans les produits Apple).

Petit tutorial pour ouvrir et modifier les templates de iWeb

1. Ouvrir une fenêtre du finder


2. Aller dans Applications


3. Clic droit (ctrl+click) sur iWeb et voir le contenu de paquet


4. Trouver le template qu'on veut modifier


5. Aller dans "Contents/Resources/French.lproj/Templates/Welcome"


6. Cliquer sur Black Welcome.webtemplate


7. Dupliquer ce paquet (pour le sauvegarder)


8. L'ouvrir (clic droit ou ctrl+clic et voir le contenu du paquet)


9. Glissez le fichier index.xml.gz vers emacs pour l'éditer


10. On arrive aux choses intéressantes :


11. Ouvrir ce fichier xml avec emacs.
    Bien sûr, vous pourriez l'ouvrir avec un autre éditeur, mais celui-ci permet certaines simplifications loin d'être
    banales.


12. Votre fichier est totalement illisible, il vous faut donc le formater pour pouvoir le lire


13. il vous faut donc faire : Pomme-shift + %, >, entrée, >,ctrl+q, ctrl+j, entrée, !
    
    cette commande va remplacer toutes les occurences de > par des > suivies d'un retour à la ligne.
    celà va simplifier de beaucoup la lecture de ce fichier (cette commande prend un certain temps à l'exécution)


14. Autre mise en forme, il faut faire : Pomme-<, ce qui nous ramène tout en au de notre fichier, ctrl-espace qui commence une sélection, Pomme-> qui va à la fin du fichier, puis Pomme-x indent-region entrée qui va indenter tout le fichier de façon à ce que chaque ligne soit bien indentée.


15. On est maintenant prêt à rentrer dans le code


16. Si on fait une recherche (ctrl + s) sur .jpg, on tombe sur l'image 'skd267745sdc-1.jpg'. On peut donc modifier cette image (dans le même dossier) pour pouvoir mettre une autre image à la place).


17. Si maintenant, on cherche la chaîne : Lorem ipsum dolor sit amet (la chaîne de base pour le titre du template), on peut facilement modifier celle-ci pour mettre par exemple : 'Mettre ici votre titre'


18. On sauvegarde maintenant notre fichier .xml.gz à l'aide d'emacs (ctrl-x ctrl-s)


19. Puis ... on teste notre template directement dans iWeb


20. Et là sous vos yeux ébahis, le texte de base est changé


21. En se déplaçant un peu plus bas, on peut voir qu'un gros bloc de texte est présent, c'est le texte d'exemple sur le template. On peut tout à fait le modifier pour que celui-ci soit : 'Paragraphe : mettre ici votre paragraphe de présentation'


22. En regardant de plus près, on voit que ce paragraphe est encadré par 2 balises : sf:ghost-text et sf:p


23. Et là : bingo, on comprend vite que <sf:ghost-text> correspond à du texte non modifiable qui permet à l'utilisateur de voir -un peu- ce que donne le design. Il peut cliquer sur cette partie du texte et directement mettre du texte à la place (sans pouvoir le modifier).


24. On peut voir ensuite que ces deux parties de texte sont elles même encadrées par <sf:p sf:style="SFWPParagraphStyle-22">. On fait donc une recherche (ctrl-s) pour aller voir à quoi correspond ce SFWPParagraphStyle-22 (ctrl-s une autre fois pour voir le suivant). On voit donc que ce style de paragaphe a pour parent sf:parent-ident="paragraph-style-5" on pourrait donc aller voir ce paragraph-style-5 pour le modifier, mais on va rester sur ce SFWPParagraphStyle-22. On voit que la seule information contenue dans ce style set la couleur


25. En recherchant d'autres balises de type sf:color, on se rend vite compte qu'il y a des balises de type sfa:calibrated-rgb-color-type. Quelques essais plus tard, on remplace la ligne <sf:color xsi:type="sfa:calibrated-white-color-type" sfa:w="1" sfa:a="1"/> par <sf:color xsi:type="sfa:calibrated-rgb-color-type" sfa:r="0.58823531866073608" sfa:g="0.58823531866073608" sfa:b="0.58823531866073608" sfa:a="1"/>, on obtient donc dans iWeb un joli gris


26. Allons visiter un peu notre paragraph-style-5 (à coups de ctrl-s), on voit tout un tas de propriétés intéressantes... Il ne reste donc plus qu'à tester quelques modifications pour obtenir ce qu'on veut
    


27. J'espère que ce petit tutorial vous aura été utile et j'attends donc quelques commentaires à ce sujet