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/ (voir fin de tutos pour plus))
- 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, [ur=http://www.kompozer.net/l]Kompozer[/url], c'est le même mais en mieux donc faites votre choix.)
- Un kit graphique à choisir ici (ou ailleurs): http://www.monsitegratuit.com/services/templates/ ou ici: http://lesite.jeromecold.fr/kits.php.
- Un peu (beaucoup) de courage (mais ça, vous ne le trouverez pas sur le net!)!
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 [urlhttp://www.01net.com/telecharger/windows/Utilitaire/compression_et_decompression/fiches/30591.html]Alzip[/url] si vous n'avez aucun logiciel de ce type, c'est le moment d'en prendre un!). 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!
Édition 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 (ou Kompozer, l'interface est la même; 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 dossier 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 et trop de textes ralentissent le chargement et les visiteurs n'apprécient pas!
- Évitez tant que possible les fautes d'orthographe! même si je suis le premier à en faire, les site "é wech cmt k'sa va?" c'est d'un lourd!
- La page d'accueil doit s'appeler "Index" pour que le serveur la reconnaisse!
- Évitez (par pitié) les fonds rouge fluo avec des textes en vert! C'est bon pour ceux qui ont un blog chez un certain hébergeur (que je ne citerai pas) et qui trouvent l'inspiration aux toilettes! La sobriété rapporte plus de visiteurs!
Du point de vue de la loi (en France)
Vous êtes responsable du contenu de votre site, Olympe-network (ou la plupart des autres hébergeurs) 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 œuvre, 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
Aide et précisions
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 à l'éditer (sinon, c'est simple: un kit à 40 euros (oui, sa existe), un éditeur HTML à 40 (certains vont jusque 1000) 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 (~30€/an), je vois pas trop l'intérêt.)
Les captures d'écran en gros:
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
Différence entre Nvu et Kompozer
Je vous ai fait choisir au début de ce tutoriel entre deux logiciels d'édition: Nvu et Kompozer. En fait, Nvu est un projet abandonné (mais toujours d'actualité) et mozilla (la fondation qui édite firefox) a repris le projet pour en faire Kompozer, qui gère par exemple mieux l'intégration du PHP dans les pages (mais au niveau qui nous intéresse là , honnêtement, on en a rien à faire!).
Hébergeurs
Je vous propose ici Olympe-network car je le considère comme la référence française mais d'autres hébegeurs sont bien aussi: Umbreon network, Les cigales...
Les offres payante vous en proposent plus mais avant d'y souscrire, regardez bien si les tarifs sont compétitifs (regardez si il y a au moins 1 accès FTP, 1Go d'espace disque, 1Go de bande passante et le tout pas pour plus de 5€!). Voici quelques hébergeurs payants (2€38 TTC/mois): OVH, 1&1 (mais ne souscrivez pas à une offre payante sans avoir déjà testé la conception d'un site sur une offre gratuite!).
Dernière mise à jour de cet article: 14/10/09 - Pour tout support technique, ne me contactez pas par MP, posez vos questions à la suite du topic.
Bravo
)
