Créez votre site de... A à Z!
Pour cela, vous aurez besoin:
- D'un hébergeur (je vous conseil Olympe-network: http://fr.olympe-network.com/)
- Un logiciel de transfert FTP (comme Filezilla : http://www.filezilla.fr/)
- Un éditeur de pages HTML (perso, j'adore Nvu: http://www.01net.com/telecharger/windows/Internet/editeur_de_site/fiches/29699.html)
- Un kit graphique à choisir ici: http://www.monsitegratuit.com/services/templates/ ou ici: http://www.yourkitgrafik.com/
- Un peu (beaucoup) de courage!
Si vous n'arrivez pas à voir une image, allez tout en bas de ce topic, j'ai mit les liens vers des images plus grandes!
A quoi sa va servir tout ça?
Un hébergeur vous propose de mettre votre site sur des serveurs en vous fournissant un domaine ce qui vous permettra d'avoir gratuitement (dans mon cas) votre site sur internet. Un logiciel de transfert FTP vous permet d'envoyer vos fichiers sur le serveur de votre hébergeur. Un éditeur de pages HTML vous permet de faire les pages internet qui seront envoyées grâce au logiciel de transfert FTP chez votre hébergeur: c'est ça que vos visiteurs verront! Un kit graphique, c'est le style visuel de vos pages HTML. Du courage, il va vous en falloir car cela risque d'être long de monter complètement un site ^^!
Sur votre ordinateur (pas encore sur internet)
Le Kit graphique
Personnellement, je vais faire comme vous: je vais télécharger un kit que je ne connait pas pour pouvoir suivre ce que je vous dit de faire. Dans mon cas, j'ai choisi le kit style apple (http://www.monsitegratuit.com/services/templates/telechargement.php?kit=apple). Dans le cas d'un téléchargement sur Mon site gratuit, vous devrez renseigner votre email et éventuellement, le nom de votre site. Une fois ceci fait, vous arrivez ici:
Allez voir votre boite email et cliquez sur le lien qui vous a été envoyé, le téléchargement débute. Dézippez l'archive à l'aide du dézippeur de Windows ou d'un logiciel de décompression (dans mon cas, c'est Alzip). Félicitations, une grosse partie du travail viens d'être effectué!
Vous pouvez ouvrir le fichier que vous venez de dézipper et ouvrir "Index.html" pour voir à quoi va ressembler votre futur site!
Edition des pages!
Ah, c'est génial, mais j'en fait quoi moi de ça?
C'est là que Super-Nvu entre en jeu. Lancez Nvu (que vous aurez évidemment installé!) et ouvrez votre page "index.html":
A partir de maintenant, nous allons faire les pages mais ce n'est pas moi qui vais vous dire leur contenu! C'est votre site que vous êtes en train de faire, c'est vos textes, vos images qui doivent figurer dessus!
Pour la page d'accueil, je vous recommande un message de bienvenue dans ce genre:
message d'accueil possible a écrit:Bienvenue sur mon site, comme vous pouvez surement le constater, c'est un site qui va parler de Mac, d'Apple... Bref, de ce qu'on peux surnommer "le paradis"! j'espère que vous passerez une très agréable visite en ma compagnie et surtout, si vous avez des question, n'hésitez surtout pas à me contacter!
Votre texte dois donner envie de visiter votre site! Allez-y, tapez vos textes, n'hésitez pas!
Pour mettre une image, je comprends que vous avez envie! Commencez par copier votre image dans le dossier "img" ou "images" de votre kit graphique, par exemple, moi, je vais mettre une image du Mac Book Air:
Je le mets dons à l'intérieur du dossier où se trouve mon kit dans un dossier réservé aux images, ici: "img".
Puis je fais un glisser/déposé de mon image jusqu'à ma page dans Nvu, vous pouvez alors redimensionner votre image comme je m'apprête à le faire sur ma capture d'écran!
Maintenant, enregistrez, et ouvrez "Index.html" avec Firefox, Internet explorer ou safari. Vous pouvez admirer votre travail!
Les autres pages
Vous allez faire pareil pour les autres pages sans pour autant retélécharger le kit, il vous suffit de faire une copie de la page "Index.html", de la renommer et de la modifier pour créer une autre page.
Vous pouvez aussi éditer la page "index.html" et faire "Fichier", "Enregistrer sous" pour créer une autre page, différente de la page Index.html!
Lier les pages
Oui, je vous l'accorde bien volontié, c'est bien d'avoir deux pages mais comment fait-on pour aller de l'index à la deuxième page? Le plus simple est de faire un lien! Pour cela, vous allez ouvrir votre page "index.html" (ou tout autre page où vous voulez faire un lien). Mettre un texte sur lequel on cliquera pour activer le lien (le texte peut-être mit n'importe où mais qui sait, c'est peut-être mieux dans un menu, non?
)Ensuite, sélectionnez ce texte et cliquez du bouton droit avec la souris (ou gauche si vous êtes gaucher) et choisissez "Créer un lien":
Puis choisissez la page vers laquelle se lien doit mener, validez deux fois et c'est bon!
Je rappel que jusque là , on est toujours dans le fichier où se trouve l'intégralité du kit!
Vous n'avez plus qu'à répéter toutes ces opérations pour faire les pages de votre site, n'oubliez pas que tout ce qui compose le site doit être dans le même fichier: celui du kit sinon à la fin, il y aura un problème pour vos visiteurs!
Les détails qui font la différence
Vous remarquerez que le nom du site, celui qui apparait dans les onglets est créer par Cclleemm (pour les kits de son site), hors, tout le monde ne veux pas un site nommé "Cclleemm" (un seul c'est tellement mieux de Cclleemm, nous on a le vrai!
). Donc vous allez cliquer sur "source" dans Nvu. Cherchez les balises <title></title> (en général, plus vers le haut) et mettez le nom de votre site à la place de celui qui est entre ses balises! Vous n'avez plus qu'à sauvegarder!Nvu débogue en permanence les pages et vu qu'il ne comprends pas le php, il supprimera tout les codes php qu'il trouvera! Mais si vous faites "Insertion", "Code PHP", Nvu vous donnera la possibilité d'insérer un code qu'il ne supprimera pas!
Attention, Nvu rajoute les balises <?php et ?> au début et à la fin, ne les mettez pas lors de l'insertion de vos codes!
En ligne sur Internet
Le plus gros est fait, je vous rassure de suite! Aller, courage c'est la dernière ligne droite!
L'hébergeur
Je vous conseil d'utiliser Olympe-network pour plusieurs raisons: il permet d'héberger de petits sites (100mo maximum), il est très à l'écoute de ses membres et surtout, il n'impose aucune publicité! Sans compter PHP 5 et Mysql gratuits, rien que ça! Mais là , sa va pas nous servir! Commencez par vous rendre à cette adresse pour vous inscrire: http://fr.olympe-network.com/inscription, remplissez bien tout les champs, validez et allez voir vos emails, dedans, il y a celui d'Olympe-network avec les infos suivante qui sont celle qui nous intéresse pour la suite:
Notez-bien ça; on va s'en servir tout de suite!
Filezilla entre en jeu!
Une fois que vous avez installer Filezilla, lancez-le! Vous arrivez sur une interface bizarre, je vous fais une capture d'écran:
J'ai noirci tout ce qui risque de ne pas nous servir lors d'une première fois, on y vois plus clair, non?
Alors maintenant, vous allez remplir les champs comme je vous le dit:
Le champ "Hôte" sur Filezilla: ftp.olympe-network.com ou autre adresse FTP si vous avez choisi un autre hébergeur!
Le champs "Utilisateur" sur Filezilla: c'est le pseudo que vous avez choisi lors de votre inscription (si vous ne vous en rappellez plus, il est dans l'email que vous avez reçu!)
Le champs "Mot de passe" sur Filezilla: c'est le mot de passe que vous avez choisi en vous inscrivant.
Et enfin le champs "Port" n'est pas obligatoire (si vous voulez quand même le remplir, mettez "21").
Faites "Entrée" au clavier ou "Conection rapide" sur Filezilla.
Normalement, des codes, mots et phrases défilent, patientez un peu jusqu'à ce que vous voyez, à la place de "Pas de conexion à un serveur", apparaitre un petit fichier. Allez chercher l'intégralité du contenu de votre site (donc tout le contenu du fichier du kit) et glissez-déposez-le dans ce champs (avec le petit dossier), patientez jusqu'à ce que l'onglet "Fichiers dans la file d'attente" soit vide. Quittez et rendez-vous à l'adresse fournie par Olympe-network sur votre navigateur préféré.
Félicitations, votre site est en ligne!
Donnez l'adresse aux personnes de votre choix et surtout, à la communauté de Mon site gratuit!
Conseils supplémentaires
- Évitez les pages trop lourdes: trop d'images en fait.
- Évitez tant que possible les fautes d'orthographe!!!!!!
- La page d'accueil doit s'appeler "Index" pour que le serveur la reconnaisse!
Du point de vue de la loi (en France)
Vous êtes responsable du contenu de votre site, Olympe-network retournera la plainte vers vous si quelqu'un en dépose une à cause de vous!
Vous êtes le propriétaire de ce qu'il y a sur le site: vous avez le droit de demander à quelqu'un qui a copié une image que vous avez faite ou un texte de le retirer, s'il ne veux pas, vous pouvez le poursuivre en justice grâce à l'article L 1.111 du code de la propriété intellectuelle:
Loi française a écrit:L'auteur d'une œuvre de l'esprit jouit sur cette oeuvre, du seul fait de sa création, d'un droit de propriété incorporelle exclusif et opposable à tous. Ce droit comporte des attributs d'ordre intellectuel et moral, ainsi que des attributs d'ordre patrimonial
Voilà , en espérant vous avoir aidé à construire votre site!
Tutoriel écrit par Jeromecold pour Monsitegratuit.com reproduction interdite
J'ai fait ce tuto sur Windows (Vista) vu que je n'ai plus que lui mais si vous cherchez, vous trouverez très facilement Filezilla et Nvu pour Linux et Os X!
Ensuite, rien ne vous empêche d'investir pour votre site mais ne faites pas l'erreur de prendre des logiciels payants si vous n'êtes pas sur de continuer à faire votre site (sinon, c'est simple: un kit à 40 euros (oui, sa existe), un éditeur HTML à 40 et un logiciel professionnel de transfert FTP à 20, sa vous fait une facture de 100 euros plus les frais d'hébergement tout les mois, je vois pas trop l'intérêt.)
EDIT: correction et ajout de précisions
EDIT 2: Mise en grand des images, voici les liens des originaux:
http://www.hiboox.com/lang-fr/image.php?img=gw4zggym.png
http://www.hiboox.com/lang-fr/image.php?img=bocc7cu7.png
http://www.hiboox.com/lang-fr/image.php?img=sapyhc1j.png
http://www.hiboox.com/lang-fr/image.php?img=t8ezmmzp.png
http://www.hiboox.com/lang-fr/image.php?img=zymau42t.png
http://www.hiboox.com/lang-fr/image.php?img=wbwum3ba.png
http://www.hiboox.com/lang-fr/image.php?img=4a5zahi6.png
EDIT 3: Z'auriez pu me dire qu'il y avait encore autant de fautes de frappe
!EDIT 4: J'ai centré les images, c'est mieux maintenant!
Bravo
)
