CREER SON SITE INTERNET
Création de Page perso ou site plus professionnel pour les débutants

Pourquoi vouloir créer un site plutôt que de se contenter d'un blog?

Si ton blog est hébergé chez Skyrock, Centerblog, Over-blog, Canalblog etc... tu n'as aucune possibilité de gagner de l'argent. Par contre, avec ton propre site, tu peux organiser des espaces libres afin d'y insérer de la publicité qui te rémunérera au clic sur la bannière ou au mille impressions de la bannière.
Si en plus, tu possèdes un nom de domaine, et que le contenu de ton site soit intéressant, tu pourras exposer, des publicités pour de grandes marques qui rémunèrent leurs éditeurs plus largement. Les régies publicitaires les plus importantes sont à ta portée. Si tu as moins de 18 ans, il te faudra l'autorisation de tes parents pour qu'ils récupèrent tes revenus sur leur compte en banque.

EXEMPLES D'ANNONCEURS QUE TU POURRAS ACCUEILLIR SUR TON SITE

Si tu as déjà un bon niveau, tu peux préférer créer ton site/blog sous Wordpress avec ton propre nom de domaine. Ceci te sera expliqué ultérieurement.

Tu as certainement une grande envie de créer un support pour parler de ce qui t'intéresse le plus au monde.

C'est une très bonne idée!

Tu vas pouvoir partager, avec les autres internautes, tes passions ou tes découvertes.

Après avoir suivi cette initiation, tu seras capable de progresser avec le soutien d'autres sites réservés aux webmestres (webmasters).

Sur ce site, tu trouveras quelques fonds de page (papier peint), des gifs (image), des gifs animés, des mélodies au format midi et quelques javascripts (petits programmes) pour agrémenter et faciliter la navigation sur ton site.

Tu vas pouvoir faire tes preuves en tant que webmaster !

REALISER SON SITE

ETAPE 1

Avant d'ouvrir ton logiciel de création de page Web...
* Prépare le dossier de ton futur site, sur ton bureau :
1. Clic droit sur un endroit vide de ton bureau, puis...
2. Clic gauche sur : Nouveau puis Clic gauche sur Dossier...
3. Inscris le nom de ton site à l'emplacement en surbrillance nommé "Nouveau dossier" (par exemple : Mon site ou Ma page perso)
* Dans ce dossier, tu ouvres un nouveau dossier (comme expliqué ci-dessus) que tu nommes: images (ce dossier est réservé aux diverses images que tu vas mettre dans ta page).
Fais un copier/coller pour mettre dans ce dossier toutes les images que tu auras sélectionnées.
Tu peux faire de même pour tous les autres documents que tu comptes insérer dans ton site.
Tout est prêt ?

ETAPE 2

Ouvre ton logiciel de création de page Web...

• Pour Dreamweaver tu possèdes une barre de ce type :
  | Fichier | Edition | Affichage | Insertion | Modifier | Texte | Commandes | Site | Fenêtre |

Le langage d'Internet est le HTML. Notre première étape comportera une approche de ce langage. Tu peux créer une page web sans mettre le nez dans le code source de la page (éditeur WYSIWYG : What you see is what you get!) mais ta curiosité peut te conduire au-delà de ce qui se voit... et faire de toi "un(e) webmestre simili-professionnel(le)" par ta connaissance du langage html !

Internet comprend aussi le DHTML, le JAVA, le JAVASCRIPT et bien d'autres encore... Je laisse cette partie plus ardue à d'autres sites existants qui t'expliqueront bien mieux que moi, toutes leurs applications.

Ce qu'il va te falloir étudier

1. Les parties importantes d'une page web
2. Quelques balises html courantes
3. La mise en page

Une fois que tu auras acquis ces notions de bases, tu pourras, non seulement, créer ton propre site, mais tu seras apte à poursuivre ta formation en ligne, sur les sites présents sur le Web qui proposent de nombreuses informations et idées pour faire de ton site, un vrai site de pro !

1. Les parties importantes d'une page web

Le code source :

Vu depuis Dreamweaver

Quelques balises html courantes

Avec le logiciel Dreamweaver, il est inutile de connaître le html pour créer sa page perso. Mais, quelque fois certaines erreurs de manipulation entraîne des imperfections dans les codes, dont on ne s'aperçoit que lorsque la page est chargé sur le Web.

Pour éviter ces petites complications, il est toujours possible de vérifier le code source du document, en affichant le html, depuis le logiciel utilisé. Les balises les plus courantes sont écrites de la façon suivante :

• Une couleur de fond de page, s'écrit juste après body :
  • <body bgcolor="#999999">

    - bgcolor veut dire couleur de fond
    - #999999 est le code pour écrire la couleur noire

• Une image (papier peint) en fond de page, s'écrit juste après body :
  • <body background="fonds/pommes.gif" bgcolor="#FFFFFF">

    - background veut dire fond de page
    - fonds/pommes.gif veut dire que le fond de page nommé pommes se trouve dans le dossier nommé fonds

  IMPORTANT - Toujours vérifier la syntaxe et corriger si nécessaire les adresses de ce genre :

  • <body background="file:///C:/WINDOWS/Bureau/MON SITE/fonds/pommes.gif" bgcolor="#FFFFFF">
• Une insertion d'image s'écrit :
  • <img src="images/maphoto.jpg" border="0" width="67" height="108">
• Un lien hypertexte sur une image vers une adresse e-mail s'écrit :
  • <p><a href="mailto=monsite@hebergeur.fr"><img src="images/mail.gif" border="0" width="67" height="108"></a></p>
• Un lien hypertexte sur un texte vers une autre page du site s'écrit :
  • <p><a href="page2.htm">page suivante </a></p>
• Un lien hypertexte sur un texte vers un autre site s'écrit :
  • <p><a href="http://www.autresite.com">site recommandé</a></p>

La mise en page

Il existe 4 possibilités pour créer la mise en page d'une page Web.

1. Se laisser guider par "son sens créatif" directement sur une page blanche (pas très pro!).
2. Respecter la mise en page imaginée lors de la représentation sur feuille du projet

Sur une page blanche

Voilà, après avoir inséré une image, tu ne pourras écrire ton texte que sur une même ligne ou bien au-dessous de celle çi.

 

Mise en page avec un tableau

Un tableau est entièrement paramétrable. Depuis ses proportions dans la page jusqu'à celles de chacune de ses cellules et la couleur de fond.

 

Mise en page sous CSS (Cascading Style Sheets) appelé aussi feuilles de style

Le langage CSS (Cascading Style Sheets) est utilisé pour définir l'aspect futur de ton site, comme par exemple la couleur du fond de la page ou le type de police. Plus concrètement, le CSS (ou feuille de style) est un petit fichier ("style.css") dans lequel tu définiras l'aspect de ton site.

A SAVOIR : En CSS, certains scripts ne sont pas compatibles avec tous les navigateurs.

Une formation complète au CSS en vidéo : Clique ICI

 

Maquette de site prête à l'emploi

Rendez-vous chez 1&1

Non seulement, 1and1 fournit l'hébergement très bon marché, mais aussi le nom de domaine et une multitude de services gratuits et payants.

A. Top Site Express vous permet de concevoir des pages Web rapidement et en toute simplicité.

Les avantages de 1&1 TopSite Express
Aucune connaissance en programmation nécessaire
Pas besoin d’être un professionnel : vous pouvez ajouter vos textes et vos images très rapidement et facilement. Vous concevez, modifiez et publiez votre site Web sans le moindre problème. Des modèles de qualité professionnelle
Peu importe le style que vous souhaitez donner à votre site Web (professionnel, technique, ludique, etc), vous trouverez à coup sûr la mise en page qui vous convient parmi la large gamme de modèles proposée.
Un simple navigateur suffit
Vous n’avez pas besoin de matériel supplémentaire pour créer et publier votre propre site Web. Utilisez votre navigateur actuel et ne vous ruinez pas dans l’achat de nouveaux logiciels.

B. 1&1 DynamicSite Express vous permet de réaliser rapidement et facilement votre site Web et d’y intégrer des animations Flash.

Les avantages de 1&1 DynamicSite Express
La technologie Flash
Dynamisez votre site Web en ajoutant des graphiques animés, des éléments sonores ou encore en proposant une navigation intuitive et interactive.
Une large gamme de modèles
Sélectionnez le modèle qui convient parfaitement à votre activité et adaptez-le en fonction de vos besoins.
Pas de connaissances en programmation nécessaires
Aucune connaissance particulière n’est requise. Il vous suffit de suivre les différentes étapes proposées.

C. L’application 1&1 e-Commerce vous offre toutes les fonctions nécessaires pour réussir vos transactions commerciales sur Internet.

Ces fonctions sont flexibles et peuvent aisément être personnalisées.
Un guide contient toutes les informations dont vous avez besoin pour : configurer votre boutique,
créer des articles et des catégories de produits,
mettre vos articles en vente via eBay,
gérer les commandes et les données de vos clients.

ETAPE 3

Félicitations tu as suivi toutes les étapes. Alors, passe à la réalisation de ta page.

1. Tes dossiers sont prêts ?!

2. Ton logiciel préféré est ouvert ?!

Tu peux mettre en pratique tout ce que tu viens de lire.

TRANSFERT DES PAGES SUR LE WEB

Certains hébergeurs proposent le transfert automatique des pages à l'emplacement qui est réservé à leurs membres, sur leur serveur.

Chez les autres hébergeurs, il faudra passer par un logiciel ftp pour mettre son site en ligne.

Voici les 2 principaux : FTP EXPERT et CUTEftp.

Il est possible de se procurer FTP EXPERT en le téléchargement sur le Net

Download FTP EXPERT ici

Publicité

Dès que ton site terminé est en ligne, commence à gagner de l'argent!

Bonne chance!