Gratuit :

Gratuit, ce service n'est pas proposé en version premium, ce qui vous permet de profiter de toutes les fonctionnalités gratuitement.

Très simple d'utilisation :

Aucune inscription ni formulaire ne sont demandés pour pouvoir utiliser Onadilys. 30 secondes suffiront pour créer un site personnel.

Simple d'utilisation :

Très intuitif, ce site vous donne l'occasion de profiter de ses fonctionnalités sans compétences particulières en programmation.


>>> Cliquer ici pour commencer <<<


Pourquoi utiliser Onadilys ?

Gratuit, simple et rapide, le site Onadilys vous permet de créer des sites de haute qualité sans aucune connaissance particulière en programmation. Ils s'affichent correctement au niveau de tous les navigateurs, jusqu'à IE6. Ils sont conformes aux normes W3C, facilitant ainsi son référencement. Il suffit d'utiliser un des modèles proposés avant de l'adapter à votre vision du projet. Vous pourrez ainsi personnaliser au maximum votre site, et ce, dans les moindres détails.

Comment mettre mon site en ligne ?

Une fois que vous aurez créé un design, il sera nécessaire d'y intégrer du contenu en dézippant votre kit graphique. Un programme tel que Notepad++ / Bloc-note vous permettra de l'éditer en modifiant ainsi le texte. Une fois qu'il sera prêt, il suffira d'acquérir un serveur d'hébergement afin de le rendre accessible à tous vous utilisateurs. OVH et 1&1 sont des solutions payantes intéressantes et assez simples d'utilisation. La dernière étape est le placement de votre site au niveau du serveur. Pour cela, il faudra se munir d'identifiants FTP du serveur et utiliser le logiciel FileZilla. Nous sommes à votre disposition pour vous fournir de l'aide. Renseignez-vous sur notre formulaire de contact.



Suivez le tutoriel suivant pour utiliser Onadilys :


Si vous utilisez le site pour la première fois, voici un guide simple et rapide concernant l'utilisation d'Onadilys. Cliquer ici pour commencer.

L'édition du site est réalisable grâce à l'interface :

Tutorial

Chaque ligne de l'interface permet d'effectuer la gestion d'une partie du design.
Vous pouvez donc activer / désactiver chaque partie de façon individuelle.

Une fois que le menu horizontal sera désactivé, l'interface ressemblera à cela :
Tutorial

Puis son activation donnera un aperçu comme cela :
Tutorial

Vous pouvez également personnaliser un élément après l'avoir activé :
Tutorial

4 options sont disponibles :
AideGrâce à cette option, vous aurez le choix de la couleur de l'élément.

AideAvec cette option, vous pourrez sélectionner la position de l'élément au niveau de la page: droite, gauche, intérieur ou extérieur du corps.
AideVous pourrez choisir une image pour le composant à l'aide de cette option. Pour cela, vous pourrez télécharger une de vos photos ou bien utiliser des modèles déjà fournis.
AideC'est la structure de l'élément qui est concernée par cette option. Plusieurs options sont disponibles, et celles-ci dépendent majoritairement de l'élément que vous aurez sélectionné : taille, contenu, marge, police...
Si une option apparait en gris, alors il n'est pas possible de l'utiliser. Plusieurs options ne sont utilisables que lorsqu'elles sont activées. La seule partie que vous n'avez pas besoin d'activer pour choisir sa couleur est l'arrière-plan.

Lorsque vous choisirez l'option de placement pour le menu horizontal:
Tutorial

La fenêtre suivante s'affichera:
Tutorial

Elle est divisée en quatre zones :
- Une zone d'option afin de personnaliser votre site web.
- Un bouton "Appliquer" afin d'enregistrer toutes les modifications effectuées.
- Un bouton "Retour" afin de revenir à l'interface principale. Rappelez-vous que toute option qui n'a pas été enregistrée sera perdue en cliquant sur "Retour".
- Vous pouvez également accéder à toutes les options pour cette partie du design à partir de cette fenêtre sans avoir à revenir à l'interface principale.
Pour ne pas perdre vos modifications, il sera nécessaire de les enregistrer avant de choisir une autre option.



Mettre votre site Web en ligne


Une fois que votre site sera prêt, vous voudrez le mettre en ligne.
Pour ce faire, vous aurez besoin d'un hébergeur qui va accueillir votre site web sur son serveur.
Il y a un grand nombre d'hébergeurs sur internet et certains d'entre eux sont même gratuits! Néanmoins, ils ne sont pas fiables. Et de nos jours, on peut facilement trouver un hôte bon marché pour la plupart des sites. Notez que certains fournisseurs d'accès Internet peuvent toutefois héberger votre site gratuitement.

Client FTP

Pour ajouter votre site sur le serveur hôte, vous devez utiliser un client FTP.
Il s'agit d'un logiciel permettant de transférer rapidement des fichiers depuis votre ordinateur vers l'hôte.
Vous pouvez trouver de nombreux clients FTP différents sur le web. Cependant, nous vous conseillons d'utiliser FileZilla.
Telecharger FileZilla en cliquant ici puis l'installer.
Ensuite, lancez-le. Vous devriez voir la fenêtre suivante :

Tutorial

Connectez-vous à l'hôte en remplissant les informations "Hôte", "login" et "mot de passe". Celles-ci devraient être fournies par l'hébergeur.
Laissez la case "Port" vide sauf si spécifiée par votre hébergeur.
Une fois que vous serez correctement connecté, il ne vous reste plus qu'une seule chose à faire : transférer votre site web.


Comment modifier manuellement votre design


Une fois votre design prêt, téléchargez-le sous forme d'archive compressée :

Tutorial

Vous devrez extraire le design de l'archive une fois sur l'ordinateur. Pour cela, rendez vous dans le dossier où vous avez téléchargé votre design web et faites un clic droit dessus. Choisissez ensuite l'option "Extraire ici".

Tutorial

Le dossier "kit graphique" devrait alors apparaÓtre.

Tutorial

Une fois le dossier ouvert, vous pourrez voir :
- La page "index.html": elle contient tout le contenu de votre design (le texte, les liens, etc.) Double-cliquez simplement sur index.html pour voir votre design.
- Le dossier "design": il contient toutes les images utilisées dans le design ainsi qu'une feuille de style en cascade (CSS) qui gère toutes les options que vous avez choisies.
BON À SAVOIR: Nous vous conseillons de ne pas modifier cette dernière page à moins d'avoir une bonne compréhension du CSS.

Pour mettre à jour le contenu de "index.html", vous pourrez utiliser n'importe quel éditeur de texte. Nous vous conseillons néanmoins de télécharger Notepad++ car c'est un bon outil.


Modifier le texte

Après avoir téléchargé et installé Notepad+++, cliquez avec le bouton droit de la souris sur "index.html" et sélectionnez "Modifier avec Notepad+++".

Tutorial

Puis Notepad++ vous montrera les lignes de code html qui correspondent à votre design.
Pour éditer le texte, cherchez simplement la chaÓne de texte et changez-la avec ce que vous voulez.
N'oubliez pas d'effectuer la sauvegarde de vos modifications (Ctrl + S) avant d'ouvrir "index.html" avec votre navigateur web par défaut. Sinon, vous ne verrez aucune modification.

Tutorial

Vous aurez probablement besoin d'en savoir un peu plus sur (X)HTML pour personnaliser votre texte (ajouter des liens ou des images par exemple).

Créer une nouvelle page

Pour ajouter une nouvelle page à votre site Web, il suffit de copier-coller index.html.
Puis, renommez ce fichier et laissez-le dans le même répertoire que index.html.
Répétez ce processus afin d'obtenir autant de pages que nécessaire (une par lien dans votre menu par exemple).
Afin de permettre à vos utilisateurs de naviguer sur votre site Web, vous allez devoir ajouter des liens d'une page à l'autre.
Nous expliquerons comment le faire dans la prochaine partie.


Modifier le menu vertical

Rendez vous dans index.html, et essayez de trouver les lignes de code html qui correspondent au menu vertical.

Tutorial

Ce code devrait ressembler à ceci mais il peut varier en fonction de certaines options.
Si le menu vertical était activé, vous devriez voir :

Tutorial

Vous pouvez maintenant insérer vos titres à l'endroit de la "1ère catégorie" et de la "2ème catégorie".

Tutorial

Le menu concerne également les liens. Les lignes croisées en rouge n'ont rien à voir avec les liens.

Tutorial

Les liens sont composés de deux parties :
- La première est la chaîne de texte au niveau de laquelle on clique afin de passer à une autre page. Dans le menu vertical c'est "Lien 1", "Lien 2", etc... Changez ceux-ci en fonction de vos besoins. Par exemple "Page d'accueil", "Livre d'or", etc....
- La seconde est l'adresse à laquelle le lien renvoie. Vous n'avez qu'à remplacer le # dans href="#" par l'adresse à laquelle vous voulez pointer.

Tutorial


Modifier le menu horizontal

Maintenant, regardez dans index.html afin de trouver les lignes de code html qui correspondent au menu horizontal.

Tutorial

Dans le menu horizontal, seuls les liens peuvent être modifiés.

Tutorial

Les liens sont composés de deux parties :
- La première est la chaîne de texte au niveau de laquelle on clique pour passer à une autre page. Dans le menu vertical c'est "Lien 1", "Lien 2", etc... Changez ceux-ci en fonction de vos besoins. Par exemple "Page d'accueil", "Livre d'or", etc....
- La seconde est l'adresse à laquelle le lien renvoie. Vous n'avez qu'à remplacer le # dans href="#" par l'adresse à laquelle vous voulez pointer.

Tutorial


Modifier le bas de page

Regardez d'abord dans index.html afin de trouver les lignes de code html qui correspondent au pied de page.



Il ne vous reste plus qu'à remplacer le contenu du pied de page par ce que vous voulez, comme par exemple un copyright ou bien une liste de sponsors.





Les bases du (X)HTML


Essayons de remplacer le contenu textuel par défaut dans le design web par ce qui suit :
Tutorial

Comme vous pouvez le constater, ce n'est pas réellement ce que nous souhaitons obtenir...
Nous allons donc utiliser du (X)HTML dans le but de l'améliorer.

Vous pouvez ajouter une nouvelle ligne en utilisant :
Une ligne <br /> et une autre

Vous pouvez créer un paragraphe en utilisant :
<p>Remplacez ce texte par votre paragraphe</p>

Vous pouvez insérer un titre à un paragraphe en utilisant :
<h1>Titre</h1>

Vous pouvez obtenir du texte en italique en utilisant :
<em>Texte en italique</em>

Vous pouvez souligner le texte à l'aide de :
<u>Texte souligné</u>

Vous pouvez ajouter du texte en gras en utilisant :
<strong>Texte en gras</strong>

Maintenant, vous êtes en mesure d'éditer du texte simplement (mais surtout de façon utile !). Si vous voulez en savoir plus sur le (X)HTML, vous trouverez de nombreux tutoriels sur Internet.

Ajouter un lien

Vous pouvez ajouter un lien par le biais du code suivant :
<a href="#">Cliquez sur ce lien</a>

Les liens sont composés de deux parties :
- La chaîne de texte au niveau de laquelle on clique afin de passer à une autre page.
- L'adresse à laquelle le lien renvoie. Vous n'avez qu'à remplacer le # dans href="#" par l'adresse à laquelle vous voulez pointer.

Une adresse de lien peut être absolue ou relative. Un lien absolu signifie que l'adresse complète de la page à lier est spécifiée. Un lien relatif signifie que la dernière partie de cette adresse est spécifiée, La première partie étant l'adresse de la page où le lien est maintenant créé!
Habituellement, on utilise l'adresse absolue afin de créer un lien vers un autre site Web et l'adresse relative dans le but de créer un lien vers une page à l'intérieur d'un site Web. Par exemple, si vous souhaitez créer un lien vers Onadilys à partir de votre site Web, vous utiliserez ce lien absolu :
<a href="http://www.onadilys.fr/">Visiter Onadilys</a>

Cependant, si vous souhaitez lier la page "autre.html" depuis votre page d'accueil index.html vous utiliserez le code relatif suivant si les deux pages sont dans le même dossier :
<a href="autre.html">Aller sur l'autre page</a>

Et si "autre.html" se trouve dans un dossier se trouvant dans le même dossier que index.html alors vous utiliserez :
<a href="dossier/autre.html">Aller sur l'autre page</a>

Insérer une image

Ajouter une image est très similaire à ajouter un lien.
Pour ce faire, vous pouvez utiliser le code suivant :
<img src="adresse.jpg" alt="description"/>

Comme pour les liens, un chemin d'image peut être absolu ou relatif.