Votre site perso
Accueil
Quoi de neuf ?
Humour
Chanter
Danser
Manger
Les perles
Les enfants
Photothèque
Votre site perso
Mes cours LEA
Dico trilingue
L'Angleterre
Mes photos
Mon CV
Mes Favoris

 

 

Franchement, y a rien de compliqué la-dedans !! Vous verrez !
C'est comme une recette de cuisine : c'est inratable !

Tout d'abord, il vous faut un minimum d'ingrédients. Voici ceux que je vais utiliser :

Un éditeur de pages html : Frontpage (vous le trouverez dans le pack office de Microsoft)
Un logiciel de retouche photo et images : Paint Shop Pro
Un traitement de texte : Word (vous le trouverez aussi dans le pack office de Microsoft)
Un "client FTP" pour mettre votre site en ligne : Cute FTP

Pour vous procurer ces logiciels, allez sur la page des Favoris et téléchargez une version d'évaluation.

Coté savoir-faire, on va dire que vous avez déjà des bases : organiser des dossiers et fichiers, les commandes de bases des logiciels, surfer sur internet.... et un minimum de créativité !

1ère étape : Réfléchir

 au contenu du site ! Suffit pas d'avoir une belle page colorée si c'est pour rien dire !! Éventuellement coucher une esquisse sur le papier. Genre titres et rapide sommaire (mais moi ça me sopotte alors...).

2ème étape : Préparer le terrain

Créer un dossier "mon site web" sur votre disque dur, par exemple dans Mes documents.

3ème étape : A l'attaque !

 Faire la page d'accueil du site.

Ouvrez Frontpage (FP), Fichier/Ouvrir un site web ; Sélectionnez votre dossier "mon site web", accepter les ajouts de FP. Votre dossier est maintenant un site web.

Fichier/Nouveau/Page/Page normale
Fichier/Enregistrer sous.... 
IMPERATIF : donner comme nom à votre page "index.htm" ou "index.html" , et ne pas l'enregistrer dans un sous dossier.

Clic droit sur la page/Propriétés de la page : Donner un titre a votre page. Comme il s'agit de la page d'accueil, choisir un titre générique d'accueil pour votre site (ex : Bienvenue chez Babylone !)

ATTENTION : Pour tout nom de page ou dossier ou autre document destiné à votre site : PAS DE MAJUSCULE, PAS D'ESPACE, PAS D'ACCENT NI PONCTUATION. A la rigueur, vous pouvez utiliser un "_" en guise d'espace.

Cette page est destinée à accueillir vos visiteur et à leur présenter le contenu de votre site.

Choisir un thème général

Format / Thème : Sélectionner "Toutes les pages" et choisir un thème pour votre site. Cela inclut un fond, des polices, une bannière de titre, des boutons, etc...

Créer un modèle de mise en page

Un tableau vous permet de mettre en page rapidement les différentes rubriques de vos pages : une cellule pour la navigation, une autre pour le titre, et une pour le contenu : Voilà le minimum !

Tableau / Insérer / Tableau : choisir 2 lignes et 2 colonnes.

Sélectionner la 1ère ligne (donc 2 cellules) puis Tableau / Fusionner les cellules : Ce sera la "case" pour le titre

Il vous reste en dessous 2 cellules : celle de gauche pour la navigation, celle de droite pour le contenu !

Faire un titre 

2 solutions :

Bannière de thème

Se placer dans la cellule adéquate (en haut)
Insertion / Bannière de page. Reprend le titre de la page.

Wordart

Dans FP, clic droit sur la page/Propriété de la page/Arrière plan : Sélectionnez une couleur de fond pour votre page. Dans "autre couleur", notez les valeurs héxadécimales de votre couleur (Ex : FFCCFF pour la couleur de fond de cette page)

Ouvrir WORD, Insertion/Images/Wordart
Tapez votre texte et modifiez l'apparence du futur titre (couleur, taille, orientation, ombre, etc...)
Edition/Copier (ctrl+C)

Ouvrir Paint Shop Pro (PSP), Edition/Coller comme nouvelle image (ctrl+V)
Choisir une taille d'environ 600 X 100 pixels
Vérifiez que la case "garder la proportion d'origine" est bien cochée.
Clic sur la couleur de votre pinceau (case de droite) et sélectionnez la couleur de votre page, éventuellement notez les valeurs notées précédemment dans la case "code html" (ex : #FFCCFF)
Sélectionnez l'outil "pot de peinture" et remplir le fond de la couleur de votre page
Fichier/Enregistrer sous.../ : 
- type GIF
- options : mode entrelacé
Bien vérifier que le titre est enregistré dans le dossier "mon site web".

Dans FP, cliquez en haut de la page, sélectionner un alignement centré, insérez votre titre (Insertion/Images/A partir du fichier ; clic sur l'icône du bas à droite pour parcourir vos dossiers.
Clic droit sur le titre inséré, Propriété de l'image, dans la ligne texte, mettre le même titre : c'est au survol du titre que le texte s'affichera ou encore si le titre ne s'affiche pas correctement.

Il ne vous reste plus qu'à inciter les visiteurs à découvrir plus en détail votre site.

Faire un sommaire 

2 solutions :

En barre de navigation

Se placer dans la cellule adéquate (à gauche)
Insertion / Barre de navigation. On peut choisir horizontale ou verticale.
Reprend les pages du site insérées en mode Navigation (Voir Organiser ses pages)

Les liens sont automatiques.

En images

Dans FP, sur une nouvelle ligne, insérer un tableau (Tableau/Insérer/Tableau : indiquez le nombre de lignes et de colonnes, mettre une valeur de 0 dans "taille de la bordure")
Cherchez des Gif animés qui représentent chaque page de votre site (voir ma photothèque), les enregistrer dans votre dossier de site perso.
Insérer une image dans chaque case du tableau, en laissant une ligne entre chaque pour la description.
Ne pas oublier la description texte pour chaque image.

4ème étape : les autres pages et les liens

Soyons logiques : nous allons partir du sommaire et faire chaque page une à une afin de ne pas se perdre. Donc, vous sélectionnez la 1ere image de votre sommaire, puis Insertion/Lien hypertexte.
Comme votre page n'est pas encore créée, vous cliquez sur l'icône en forme de page blanche en bas à droite.

ATTENTION : Pour faire un lien vers une page existante, la sélectionner dans la liste du haut : TOUTE PAGE LIÉE DOIT APPARTENIR AU SITE et donc se trouver dans le dossier du site. Si vous liez vers une page hors du site, lorsque vos visiteurs cliqueront dessus ils n'auront rien ! Ou alors, cela signifie que vous avez lier vers une page qui est déjà sur le web, à ce moment, c'est un lien externe au site : mais c'est possible !
DE PLUS : Si vous voulez insérer une image qui ne se trouve pas dans le dossier du site, FP lors de l'enregistrement de votre page vous demande d'enregistrer l'image. Sélectionnez l'endroit et acceptez !

Une nouvelle page apparaît. A vous d'y mettre un titre, une couleur de fond, du texte.
Enfin, vous l'enregistrez.
CONSEIL : Vous pouvez mettre votre page dans un nouveau dossier de votre site web, ainsi vous pouvez créer un dossier supplémentaire par chapitre, qui contiendra toutes vos nouvelles pages et vos images.
Votre 1er lien a été créé, répétez l'opération pour toutes les images de votre sommaire.

5ème étape : Organiser ses pages

Vous voici maintenant avec quelques pages html. Pour vous y retrouver facilement, vous allez les organiser dans le mode Navigation de FP. Cliquez sur Navigation dans le menu de gauche. Vous y voyez votre page d'accueil avec une icône de petite maison.
Grâce à la liste de vos dossiers et fichiers qui se trouve à coté (sinon : Affichage/Liste des dossiers), vous faites glisser chaque nouvelle page html sur la liste de droite. Un organigramme hiérarchique est alors créé peu à peu.
Pensez à modifier le titre de vos pages en sélectionnant la page puis clic droit/Renommer. Les titres de pages sont importants car ils sont affichés dans la barre des taches !
ATTENTION : Cet organigramme n'accepte que les pages html, il n'est pas utile d'y mettre les images. Cela doit juste vous montrer à quel niveau se trouve telle ou telle page dans votre site web. Par ailleurs, cette organisation est indispensable si vous avez utilisé une bannière ou une barre de navigation.

Vous savez à présent :
- Créer une page d'accueil
- Faire un titre
- Insérer une image dans FP + lui donner un texte au survol
- Créer un lien sur une image
- Insérer un tableau dans FP
- Organiser vos pages web en mode navigation
- Lier vers une page web
- Utiliser les thèmes FP
- Insérer un tableau et s'en servir pour agencer sa page

C'est déjà pas mal : avec un peu d'imagination on peut faire un site assez sympa ! Mais on va améliorer ça encore un peu avant de le publier. 

6ème étape : Ajouter des compteurs

Est-ce que votre site perso est une star sur le web ?? 
Pour savoir, il faut installer des compteurs de visite.
Voici le site ou je suis abonnée : Swisstools.net (avoir déjà une adresse de site pour s'inscrire)
Mais vous pouvez aussi profiter du tout en 1 des hébergeurs de site. Ainsi, Lycos  vous permet aussi d'avoir des compteurs. Grosso modo le système est le même : vous vous inscrivez, vous donnez un nom à votre / vos compteurs et vous récupérez un code spécial à insérer dans vos pages en complément d'un code de pub pour le service.

Donc, pour vous : allez sur Lycos.fr ou encore chez l'hébergeur de votre choix (m'en fiche moi après tout !) et inscrivez vous.
Vous aurez ainsi votre adresse de site web allouée (ex : http://www.membres.lycos.fr/babylonechat/)
Et ensuite, vous pouvez choisir le service de compteur de votre choix.
On vous donne 2 codes par compteur en général : 1 pour le compteur, 1 pour la pub. Vous faites un copier-coller dans un document texte et voila le travail. N'oubliez pas de noter quels codes correspond a quel compteur !! 
ATTENTION : J ai bien dit vers un document texte (clic droit sur le bureau par exemple Nouveau/Document texte) et pas vers Word ! Sinon, vous allez pourrir votre code !!

Une fois les codes récupérés, que faire ?? On va trifouiller dans le code pour la 1ere fois, vous verrez c est pas si dur si on sait copier-coller !!
Bref, vous voici avec vos précieux codes, vous copiez le 1er code, celui du compteur1.
Ouvrez la page correspondant à votre 1er compteur.
En bas, vous insérez 2 tableaux (séparés par 2 lignes vides) de 1 ligne 1 colonne chacun.
Vous mettez votre curseur dans le 1er tableau et vous cliquez sur l'onglet HTML qui se trouve en bas. Normalement vous retrouvez votre curseur clignotant (ne pas cliquer dans la page avant, sinon c'est perdu !)
Et hop : vous collez le code !
Revenez dans l'onglet Normal, et mettez votre curseur dans le 2eme tableau. Vous copiez le code Pub1 et le collez dans le mode HTML.
De retour dans le mode normal, vous devez apercevoir 2 carrés blancs qui deviendront votre compteur et votre pub associée.
Répétez pour tous les compteurs sur toutes les pages ! Courage !

7ème étape : Mettre en ligne le site

Comme FP ne le fait pas correctement, on a inventé Cute FTP (CFTP). Ce logiciel d'aspect barbare va balancer vos pages sur l'ordinateur de votre hébergeur de site.
Pour cela, il vous faut les mots de passe de votre hébergeur :
- l'adresse d'hôte FTP est un truc du genre : ftp.multimania.com
- votre code d'utilisateur est votre nom d'inscription : babylonechat
- votre mot de passe perso
Une fois que vous avez tout ça, vous vous connectez, vous ouvrez CFTP et dans la fenêtre paramètre de site, vous créez un nom de site, et vous renseignez les codes ci-dessus. Le type de connexion est : Normal.
Vous faites : connecter et vous attendez le message de bienvenue du site.
A gauche vous avez vos dossier, a droite ceux de votre site sur le net.
Vous sélectionnez tous les fichiers et vous faites un glisser-déplacer vers la droite.
Vous voyez vos pages se mettre en ligne 1 à 1.
Répétez jusqu'à ce que tout soit bien en ligne.
ATTENTION : Toute hiérarchie doit être identique à droite comme à  gauche !!! Sinon, vos liens seront perdus !!
Une fois tout en ligne, vous fermez tout, et vous allez sur votre site web comme 1er visiteur ! Vérifiez chaque lien et chaque compteur !! Et vérifiez que les pages ne mettent pas trop de temps à s'afficher.

8ème étape : Avoir un nom de site convivial

Vous trouvez votre adresse de site trop longue ?
Ce site va vous être très utile : ulimit.com
Vous pourrez choisir un nom de site avec une extension bizarre, mais bien moins longue ! Courez-y, en plus, c'est gratuit ! Et ça, ben c'est carrément extraordinaire !

9ème étape : Faire répertorier son site

Pour que votre site soit visité, il faut que les gens sachent qu'il existe ! Et pour cela, ils font comme vous : ils cherchent sur les moteurs de recherche, par mot clef !
Pour que ces moteurs vous répertorient dans leurs adresses de site, il faut leur envoyer un "faire part de naissance" de votre site.
Certains sites permettent de se faire répertorier simultanément chez plusieurs moteurs, c'est quand même moins long !

Pour trouver les adresses allez sur ma page Favoris

Vous voilà Webmaster !!! Félicitation !

 
Vous trouverez tous les liens pour agrémenter vos sites en allant sur ma page Favoris
Mettez du Javascript dans vos pages
Tous les sites de ressources

 

Ajoutez des images en piochant dans ma photothèque