La conception d'un site passe tout d'abord par la détermination précise de son contenu. Voici les étapes à suivre :
   Sachez exactement de quoi vous voulez parler, quels thèmes abordés : définissez un sujet précis.
   Mettez toutes vos idées sur papier.
   Organisez vos idées de façon à former vos rubriques que vous compléterez avec vos nouvelles idées.
   Faites un schéma détaillé de votre futur site :
       Rubriques principales,
       Sous-rubriques,
       Liens internes, liens externes,
       Agencement de chaque page : emplacement du menu, des titres, du texte, des images.

Vous obtenez alors un projet concret.




Le langage de base d'une page web est le langage HTML (Hypertext Generalized Markup Language).
Pour créer vos pages, il vous faut donc un éditeur HTML. Plusieurs choix s'offrent à vous :

  Les éditeurs en mode texte

Ce type d'éditeur est disponible avec windows, le bloc-notes, mais il sous-entend que vous devez taper vous-même le code HTML et par conséquence apprendre à utiliser ce langage.
Pour vous aider à débuter en HTML :
     Le HTML facile : cours HTML (bases, formes, liens, images, tableaux, ...), éditeur HTML en ligne.
     Le site du zéro : Tutorial qui vous guide pas à pas dans la création d'un site web.

  Les éditeurs WYSIWYG

Un éditeur wysiwyg (What You See Is What You Get = ce que vous voyez est ce que vous obtenez) vous permet de créer des pages HTML en mode "visuel", c'est-à-dire que vous mettez en forme vos pages en visualisant immédiatement le résultat final obtenu.Vous travaillez directement sur votre site, vous ne voyez pas le code HTML, c'est le logiciel qui s'occupe de le transcrire. Vous n'avez donc pas besoin de connaître le langage HTML. C'est l'idéal pour les débutants.
Je vous conseille dreamweaver qui est un des meilleurs éditeurs de pages HTML du marché.
Voici 2 tutoriels pour apprendre les bases de ce logiciel, ce qui devrait vous suffir pour commencer à créer vos pages
       Créer son site avec Dreamweaver 2
       Utilisation de Dreamweaver 2

  La création assistée

Les deux solutions ci-dessus ne vous conviennent pas ? En voici d'autres qui seront peut être plus adaptés à vos besoins :
       E-monsite.com
Ce site permet à quiconque voulant un site web d'en créer un gratuitement en quelques clics seulement. E-monsite s'occupe de la mise en forme et de l'hébergement. Vous avez juste à vous occuper du contenu.
       BBS Design
Avec leur formule Speedline, BBS Design vous propose d'intègrer vos contenus dans un de leurs kits graphiques que vous choisissez, sans intervention de votre part, à part l'envoie des éléments nécessaires à la personnalisation. Vous recevrez ensuite par email un aperçu de votre site, à vous de décidez si l'offre vous convient.

A vous de faire votre choix !





Le graphisme d'un site web est presque aussi important que son contenu. Plusieurs choix s'offrent à vous pour créer votre graphisme :

  Les graphisme prêt à l'emploi

Pas besoin de créer votre graphisme, des sites vous proposent des kits graphiques complets créés par des designers. Vous n'avez plus qu'à faire votre choix et télécharger le kit qui vous intéresse !

       BBS Design
De nombreux kits flash, HTML, XHTML/CSS

       Générateur.net
395 kits graphiques de qualité professionnelle et personnalisable facilement.

  Les tableaux

A l'aide de tableaux imbriqués, vous pouvez créer une mise en page ordonnée et un graphisme pro.
La création des tableaux est simple et leur manipulation l'est tout autant, à condition de connaître les fonctions HTML ou d'utiliser une éditeur WYSIWYG. Vous pouvez jouer sur de nombreux paramètres :
       la taille des tableaux et des cellules
       la couleur de fond des cellules
       l'épaisseur et la couleur des bordures intérieures et extérieurs
       l'alignement et l'emplacement des tableaux
A vous ensuite d'imbriquer les tableaux comme bon vous semble.

Le problème majeur de l'utilisation des tableaux est que si vous voulez changer un détail, vous devrez le faire sur toutes vos pages. Pour un petit site ne comportant que quelques pages c'est faisable, mais pour un site en comportant plusieurs dizaines, ça complique la tache.
       Balises HTML des tableaux
       Cours HTML : les tableaux

L'alternative est l'utilisation du CSS.

  Le CSS

Le langage CSS (Cascading Style Sheet) est utilisé pour définir l'ensemble de votre graphisme :
       l'emplacement et la taille des blocs
       l'image ou la couleur de fond de chaque bloc
       la couleur et la taille des bordures des blocs
       le style des polices de chaque bloc (police, taille, couleur, alignement, ...)
       le style des liens avant, pendant et après le clic, et pendant le survol de la souris
       ...
La mise en forme de vos pages web va être déclarée dans une unique page : la feuille de style CSS. Celle-ci sera rattachée à vos pages HTML. Ainsi lorsque vous modifierez la feuille de style, cela se répercutera automatiquement sur l'ensemble de vos pages.
Voici un tutoriel pour vous guidez dans l'apprentissage de l'utilisation du CSS. Si vous n'avez pas photoshop pour la création des images, vous pouvez toujours vous reporter à l'étape 3 pour comprendre comment fonctionne le CSS, le code à taper dans la feuille CSS et celui à inscrire dans la page HTML.

Pour vous aider avec le CSS
       Ensemble des propriétés CSS et description de chaque propriété
       Comment faire des feuilles de style avec Dreamweaver

  Outils pour agrémenter votre site

       Freegaia
Des objets graphiques pour agayer votre site : boutons vierges, boutons avec texte, gifs animés, flèches, puces, ...

       I-Trema
Création de bannières flash en ligne. De nombreuses catégores disponibles.

       Pixelomania
Création de bannières, boutons, header, avatars, logos et flyers.

       Menu HDJ
Création de menus dynamiques pour votre site, paramétrables avec plus de 50 paramètres. Allez voir les exemples !!

       Generateur.net
Création de bannièresflash et gifs.

Une fois choisie la méthode qui vous semble la plus appropriée à la conception de votre graphisme, vous allez pouvoir créer vos pages.

  Pour commencer

       Création des dossiers de travail
Créer un dossier construction où vous placerez tous vos fichiers au fur et à mesure de leur construction.
Créer un dossier monsite où vous placerez les fichiers qui iront en ligne, sans oublier les images et autres fichiers contenus dans vos pages.
Chacun de ces 2 dossiers devra avoir un dossier nommé Images où vous placerez toutes vos images gif et jpeg.

       Nom des pages
Nommez toutes vos pages : sans espace, sans accents, 63 caractères au maximum, en minuscule. Si le nom contient plusieurs mots, séparez les par un tiret -. Ne modifiez plus ces noms pour éviter par la suite d'avoir des liens brisés.
Important : votre page d'accueil doit être nommée index.htm (ou .html).

  La mise en page

       Aspect général
Votre mise en page doit être attractive et votre présentation soignée pour inciter les internautes à visiter votre site.

       Poids des pages
Pour ne pas rendre la navigation difficile sur votre site par un chargement lent des pages, ne surchargez pas vos pages. Une page ne doit pas dépasser 100-150 Ko, n'utilisez donc pas des images trop grosse.

       La police de caractère
Choisissez une police classique. Si vous préférez télécharger une police original, sachez qe seuls les internautes ayant également cette police verront correctement votre site, sinon la page sera affichée avec la police de caractère par défaut (Times New Roman en général).

       Les couleurs
Le texte : utiliser des couleurs différentes pour les titres et le texte mais n'en abusez pas.
Le fond : vous pouvez choisir une couleur de fond autre que le blanc, mais attention au ton sur ton, il faut que le texte reste correctement visible.

       Création d'un modèle sous Dreamweaver
Créez une page squelette c'est-à-dire une page type contenant votre graphisme et toutes les parties communes à vos pages (les menus, l'entête par exemples), puis enregistrez la comme modèle. Sélectionnez ensuite les regions modifiables qui contiendront les éléments particuliers à chaque page. Ainsi chaque modification effectuée sur ce modèle entrainera la mise à jour des documents basés sur ce modèle. Très utile si votre site contient plus d'une dizaine de page.
Pour plus de précision sur les modèles avec Dreamweaver 2 : Utilisation des modèles

  Vérification de vos pages

       L'orthographe
C'est une des choses les plus importantes d'un site puisque qu'elle reflète en quelque sorte la personnalité de son créateur. Un visiteur ne s'attardera pas sur un site contenant des dizaines de fautes d'orthographe, alors vérifiez chaque page très attentivement. Le mieux est de faire vérifier vos pagespar une autre personne, celle-ci verra certainement des choses que vous n'avez pas vu !

       Les liens
Vérifiez bien que tous os liens mènent quelques parts et surtout au bon endroit. Quoi de plus énervant que de tomber sur une page d'erreur ou sur une page n'ayant aucun rapport avec ce que l'on cherche.

       La compatibilité avec les autres navigateurs
C e n'est pas parceque votre site fonctionne parfaitement sous Internet Explorer qu'il apparaitra tout aussi bien dans les autres navigateurs. Pensez donc à tester vos pages dans les autres navigateurs, et ce au fur et à mesure de leur création pour ne pas avoir de mauvaises surprises à la fin.

Voici les principaux navigateurs
  - Internet Explorer
  - Mozilla Firefox
  - Netscape
  - Opéra 8

  Pour finir

       Verifiez bien vos sources pour ne pas donner de mauvaises informations à vos visiteurs
       Mettez votre site en ligne qu'une fois terminé afin d'optimiser votre référencement.
       Planifiez des mises à jour régulières afin d'actualiser au mieux votre contenu.