Introduction

RapidWeaver est un petit shareware qui vous permet de faire votre premier site web très facilement.

Et oui, bien que limité au niveau HTML (déjà très bien pour les débutants), il offre une dixaine de thèmes dans le style d'Apple. Le site Apple est l'exemple le plus représentatif de ce logiciel car celui-ci reprend un thème qui s'avère être la copie conforme du design de ce site (Apple France).

Initiation

Le logiciel RapidWeaver est très simple à utiliser et ce tutorial va vous accompagné tout au long de la création de votre site web.

Tout d'abord, il vous faut choisir un thème et là, vous êtes le seul maître à bord.

(cliquez sur l'image pour l'agrandir)

Cliquez donc sur Themes (en haut à gauche de votre fenêtre) et votre fenetre va s'allonger pour faire place aux différents thèmes offert par RapidWeaver par défault! (d'autres thèmes peuvent être achetés).

(cliquez sur l'image pour l'agrandir)

Votre thème sélectionné, il ne vous reste plus qu'à cliquer sur le petit " + " (en bas à gauche de votre fenêtre).

(cliquez sur l'image pour l'agrandir)

A ce moment, vous pouvez choisir entre différents "types" de page HTML

(cliquez sur l'image pour l'agrandir)

Pas à pas

"Blog"

(cliquez sur l'image pour l'agrandir)

Ici vous verrez les "news" que vous avez déjà mise en ligne. Cliquez sur le petit "+" en bas en gauche de la fenêtre pour ajouter une "news".

(cliquez sur l'image pour l'agrandir)

Remplissez les champs: Title avec le titre de votre news, Date (laissez comme tel si vous le souhaitez) et Entry, pour le contenu de votre news.

(cliquez sur l'image pour l'agrandir)

Une fois les champs remplis, appuyez sur OK

(cliquez sur l'image pour l'agrandir)

et voila le résultat...

"File Sharing"

(cliquez sur l'image pour l'agrandir)

Voici l'interface où vous pouvez mettre une description générale des fichiers qui seront en téléchargement. Pour ajouter un fichier à télécharger, cliquez sur le petit "+".

(cliquez sur l'image pour l'agrandir)

Cette fenêtre apparait et vous devez remplir les champs. Appuyez sur Browse pour aller chercher le fichier à mettre en téléchargement et ensuite mettez une description. Cliquez ensuite sur OK.

RW_TUTO6-3

"HTML Code"

(cliquez sur l'image pour l'agrandir)

Ici vous voyez un exemple de code HTML inséré à l'aide du menu "Quick Insert".

RW_TUTO7-2

"iFrame"

Les iFrames ouvrent des sites externes à votre site à l'intérieur de celui-ci.

"Offsite Page"

Les Offsite Page, cela ouvre un URL défini dans une nouvelle fenêtre.

"Photo Album"

Photo Album se sert de iPhoto de Mac OSX comme source pour puiser vos photos.

(cliquez sur l'image pour l'agrandir)

Pour commencer une page contenant vos photos, vous devez choisir vos photos via une interface très simple. Les photos sont celles contenues dans le logiciel iPhoto de Mac OSX. Vous pouvez regler quelques détails comme la taille, le nombre de colones, l'espace entre chaque photos, etc.

(cliquez sur l'image pour l'agrandir)

Et voila ce que vous obtenez une fois que vous avez choisi vos photos. Quand vous cliquez sur l'une d'entre elles, une autre fenetre s'ouvre où vous pouvez les faire défilées en appuyant sur Suivant.

"QuickTime"

(cliquez sur l'image pour l'agrandir)

RW_TUTO9-2

"Styled Text"

(cliquez sur l'image pour l'agrandir)

RW_TUTO10-2

"La Mise en Page"

Quand vous aurez fini votre site web, en sachant que plusieurs types de page peuvent être présentes (ex: 2 File Sharing, 2 QuickTime, etc.), vous avez deux possibilités: soit vous publiez votre site sur votre compte • Mac si vous en avez un et là donc vous appyez sur Publish en hait à droite de la fenêtre; soit vous exportez votre site où vous le voulez sur votre machine et là il va créer un dossier avec l'entièreté de votre site avec les images (des boutons et vos images perso), vos fichiers (si vous avez mis des File Sharing), etc.

Exemple, voici le site que j'ai fait en suivant toutes les étapes ci-dessus:

(cliquez sur l'image pour l'agrandir)

Alors ici vous voyez bien que les Boutons correspondent aux noms donnés à chaque page.

Voici ce que vous aurez dans RapidWeaver pour le site ci-dessus:

(cliquez sur l'image pour l'agrandir)

Vous voyez que les noms de chaque page HTML (ex: Blog, File Sharing, ...) correspondent bien à ce qui est marqué sur les pages de votre site. (PS: Vous pouvez changer la taille et le texte du bouton en appuyant sur le bouton de la page à modifier et ensuite de cliquer sur Button au dessus à gauche de la fenêtre).

Et voila enfin ce que vous optiendrai si vous exportez votre site web (sur le bureau par exemple):

(cliquez sur l'image pour l'agrandir)

Dans le dossier Files, vous avez le .XML (le RSS du Blog), les pages web crées pour l'album photo, les vidéos (ou mp3) dans QuickTime et les fichiers mis en téléchargements.

Dans images, vous avez tout ce qui concerne le design du site (les boutons, les bordures, etc.).

Vous avez biensure les pages web de votre site nommées index.html, page1.html, ... ;
ensuite javascript.js qui sert au rollover des boutons (ils changent de couleurs de fond dans l'exemple) et enfin le styles.css qui est la feuille de style qui contient la police de caractère, la couleur du texte, etc.

Conclusion