Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Comment bien commencer son site ?

Par piloue, le 22 octobre 2005

Organisation

L'ensemble de votre site doit se trouver dans un seul et même dossier. Celui-ci devra être organisé au mieux pour vous éviter de vous perdre, cela vous fera gagner un temps précieux !
C'est le contenu de ce dossier qui sera transféré sur le serveur d'hébergement, qui évidement ne pourra pas “lire” des documents restés sur votre propre ordinateur :)

Premiers pas

1/ On réfléchi à son projet : on maquette, on gribouille, on y pense avant de se ruer sur son Dream préféré :) Au besoin on chine et on s'inspire de sites existant, mais on ne pompe pas et on ne vole pas les images et les scripts d'autrui !

2/ On se crée un dossier “site” (attention à la nomeclature, voir les Règles générales à respecter ci-dessous). Mettez le où vous voulez, dans Mes documents ou sur le Bureau, cela n'a pas d'importance.

3/ On y créer un dossier “img” ou “images” et on y place les documents images que l'on a déjà

4/ On ouvre Dream et on fait Site>Nouveau site. On saisie le nom “mon premier site”, on trouve le dossier racine local (à savoir “site”). Ca suffit pour débuter :) Faites Fenêtre>Fichiers du site et sélectionnez “Mon premier site” dans la liste déroulante.

Pourquoi utiliser “Fichiers du site” ? Parce que c'est mieux ;-)

Cela vous évite d'une part d'avoir un dossier classic (du système) ouvert pour avoir une idée du contenu et de l'organisation de votre site. Dream vous indique tous les éléments présents dans votre dossier “site” et vous reperez rapidement le type de document (css, js, htm, image…)

Un grand avantage est que si vous désirez renommer ou déplacer un fichier, les fichiers du site tiendront compte de la modification et se mettront automatiquement à jour :)

5/ On demande un Nouveau document, que l'on appelle index.htm et on l'enregistre à la racine du site.

Voilà, on a l'architecture nécessaire pour commencer le site !

Bien ranger les éléments
Voilà comment moi je procède. Ce n'est pas l'unique bonne facon de procéder, mais celle-ci a fait ses preuves :)

exemple d'architecture de site

  1. Les images sont rangées dans un dossier “img” qui peut, suivant le nombre de document, être lui même subdivisé en plusieurs sous-dossiers. Ce dossier peut aussi etre appelé “media” (surtout s'il contient des animations flash et des vidéos)
  2. Tous les fichiers HTM d'importance première sont placés à la racine du site, avec leur index. Les fichiers secondaires, s'il y en a, peuvent être rangés dans un ou des dossiers spécifiques.
  3. Si les fichiers externes type css ou js sont rares, je les laisse à la racine du site, sinon je crée un dossier spécifique

Les erreurs à éviter

D'une manière systématique, lorsque vous créez un nouveau document, enregistrez le tout de suite, ça pourra vous éviter des surprises par la suite.
Lorsque vous liez un document à un autre (ajout d'image, lien, fichier css ou js externe) faites attention à ce que l'adresse du dit document soit relative (par rapport au dossier du site) et pas absolue . C'est comme ca qu'on se retrouve avec des liens du genre

C:\Documents and Settings\Administrateur\Bureau\site\img\fond.jpg

qui ne veulent rien dire pour le serveur qui héberge votre site. Le “vrai” lien devrait être

img/fond.jpg

:!: Renommer ou déplacer un fichier sans passer par “Fichiers du site” : les documents de votre site faisant référence au fichier modifié ne le reconnaitront plus, c'est comme ca que l'on a des erreurs 404 ou des images qui ne s'affichent pas…

:!: Ne pas respecter la nomenclature pour les noms des fichiers et des dossiers (voir ci-dessous)

Règles générales à respecter

Les hebergeurs imposent qu'un fichier “index.htm” ou “index.html” soit à la racine du site. Sans ça, le serveur ne peut pas deviner quel est le premier document à servir…

Les noms de fichiers et des dossiers doivent avoir une nomenclature particulière et stricte :
seuls les 26 lettres de l'alphabet, les 10 chiffres et les signes - et _ sont utilisables. Jamais d'accent, d'espace ou autre chose d'étrange… Evitez les noms à ralonge :)

Pour les images, seuls les formats gif, jpg (jpeg) et png sont utilisables. On oublie les .bmp ou les .psd !

On essaye de se fixer un poids maximum de 80Ko par page et 50Ko pour la page d'accueil. L'ADLS n'étant pas encore généralisé, on pense aux gens à lente connexion…
Attention, le poids de la page n'est pas le poids inscrit dans “Fichiers du site” (ça ce n'est que le code). Il est affiché en bas à droite dans la fenêtre du document ouvert. Il ne tient généralement pas compte des imahes préchargées ni des applets.

Les erreurs du débutant Penser que les frames ca va lui sauver la vie
OK, pour les mises à jour ça à l'air chouette et le menu est toujours visible mais :

  1. les frames sont un cauchemard pour le référencement (même s'il existe des astuces)
  2. les frames sont passées de mode : allez sur n'importe quel grand site, malgrè la présence d'élements constants de pages en pages il n'y a pas de frame
  3. pour gérer facilement les mises à jour du site, on utilise soit les templates de Dream, soit les includes (php par exemple)

Penser que les calques (je parle des elements que Dream vous laisse poser à votre guise sur la page, pas d'un couplage DIV+CSS) c'est mieux pour mettre en page
Qu'il est pratique ce bouton “Calque” dans ma palette : on n'en met partout où on veut ! Erreur !!
D'une manière générale, évitez les calques tels qu'ils sont évoqués ci-dessus tant que ceux-ci ne sont pas nécessaires et vitaux. Il peuvent sembler plus facile à gerer et à organiser dans la page, mais peuvent poser des gros problèmes de compatibilités s'ils sont mal utilisés.
Préférez donc la mise en page avec tableau, voire tableaux imbriqué.
Vous ne vous en sortez vraiment pas ? Utilisez les calques pour positionner vos élements, sélectionnez les tous et faites Modification>Convertir>Calques en tableau
Par contre, si vous désirez vous lancer dans des mises en page XHTML + CSS, usez et abusez des balises DIV :) Consultez les tutoriaux de SIBELIUS à ce sujet.

Penser que plus ca bouge et plus ca fait du bruit mieux c'est
Heu… c'est juste fatiguant visuellement et auditivement ;-)
Ca surcharge la page d'élements lourds qui ralentissent la navigations et le chargement de la page. Bien réfléchir donc avant d'inserer ce genre de fantaisie !

Oublier que tout le monde n'est pas en 1024*768
A l'heure qu'il est encore 40 % des internautes sont encore en 800*600. Les ascenceurs horizontaux sont souvent de mauvais goût (sauf utilisation spécifique) et rendent la navigation difficile.
La largeur total des éléments d'une page ne doit pas dépasser 760 px (on tient compte de l'ascenceur vertical et de navigateurs -comme NN7- qui affichent un menu vertical)

Quelques idées

Un site vous intrigue par sa mise en page ? Enregistrez la page-sous et ouvrez la avec DreamWeaver : elle n'aura plus aucun secret pour vous :)

Visitez la galerie des plus beaux sites de DreamWeaver forum !