Normalement votre fournisseur d'accès (Orange, Free,
etc...) vous attribue gratuitement un espace pour y héberger
votre site. Chaque FAI ayant des conditions particulières,
vous devez contacter le vôtre pour en faire la demande.
Certains ajoutent des publicités (Free par exemple),
d'autres, comme Orange ne le font pas.
Choisir pour votre futur site, un nom
explicite pas trop long.
ATTENTION
: Avec ces
hébergements, si vous changez de FAI votre site ne
sera plus accessible en ligne.
Il existe
aussi des hébergeurs, la plupart du temps payants,
avec le plus souvent un nom de domaine (.fr ou .com par exemple).
Comme ils sont indépendants, si vous changez deFAI,
le site reste quand même consultable en ligne.
Passons
maintenant à la création de votre site
Bases de la création
d'un site
D'abord créer sur son disque dur un dossier nommé par exemple
"mon site"
Créer un sous-dossier nommé "images" dans lequel seront enregistrées
toutes les images que l'on souhaite utiliser.
IMPORTANT : Les noms des dossiers et des fichiers
ne doivent comporter aucun accent, faute de quoi ils seraient
remplacés en ligne par une petite croix rouge. Par
exemple une image nommée "forêt" ne
serait visible que sur votre ordinateur, alors que la même
image, nommée "foret" est bien visible en
ligne.
Si le site doit comporter
de nombreuses pages, pour s'y retrouver facilement par la
suite, créer dans le dossier "images" d'autres sous-dossiers
par genre.
Exemple : "textures" (pour les fonds de page) "ornements"
(pour les flèches, bulles, petits gifs que l'on utilise régulièrement
sur plusieurs pages)
Ouvrir le logiciel
Enregistrer dans le dossier "mon site" votre première page
qui doit impérativement s'appeler "index.htm" (Fichier>>Enregistrer
sous)
Vous pourrez nommer les pages suivantes comme vous le voudrez,
mais sans accent. Les
images et les fichiers ne doivent pas non plus avoir de nom
accentué : ils ne seraient
pas visibles une fois transférés
Création
de cette page "index"
Dans l'onglet "affichage",
cocher comme suit
LE FOND
1. Cliquer "modifier>>propriété de la page". Dans la boite qui
s'ouvre renseigner chaque case : Inscrire le titre de la page
(il peut être différent du nom d'enregistrement et comporter
des caractères accentués. La page enregistrée sous le nom "index.html"
peut par exemple porter le titre "Mon site". (Chez moi c'est
"Les fantaisies de Monique")
2. Aller chercher l'image
d'arrière-plan dans votre dossier "images" (chez moi c'est
dans le sous-dossier "textures")
3. En cliquant la petite flèche à coté de la case couleur
un nuancier s'ouvre où vous pouvez choisir la couleur qui
vous convient, ou choisir à l'aide de la pipette une couleur
existante déjà sur la page. Vous pouvez aussi inscrire directement
le code-couleur si vous le connaissez (par exemple par
un copier-coller de ce code à partir de la palette "styles
et textures de PSP). Quand tout est renseigné, cliquer
"OK"
LA
PAGE
Nous travaillerons sur des tableaux imbriqués, et pas sur
des cadres, plus cimplexes à mettre en oeuvre, et surtout
utilisés dans les blogs.
1. Cliquer Insertion>>Tableau
2. Dans l'inspecteur
de propriété, dans
la case "alignement" choisir "centrer" (si l'inspecteur n'est
pas visible cliquer droit et choisir "propriétés")
3. Cliquer à l'intérieur
du tableau et paramétrer comme suit
4. L'espace de cellule
est ce qui permet de garder un bord d'une autre couleur (ou
d'une autre texture) à l'insertion du tableau suivant. Les icônes
du bas à droite permettent d'affiner les nuances, où
de revenir à la couleur "par défaut"
(celle qui a été choisie au départ)
5. Au lieu d'une couleur
on peut (en cliquant le dossier jaune) choisir une image d'arrière-plan
6. Se positionner à l'intérieur du tableau et choisir "centrer"
7. Cliquer à nouveau "insertion/tableau, mais cette fois mettre
la largeur à 100% et paramétrer la couleur ou la texture de
fond
8. On peut maintenant insérer des images "insertion>>Image",
et du texte, en choisissant la taille, et la police dans l'inspecteur
de propriété.
9. Pour insérer
plusieurs images les unes à côté des autres,
créer un tableau avec autant de lignes et de colonnes
que d'images à insérer, sans toutefois que la
largeur de la totalité des images dépasse celle
de l'écran
EXEMPLE
Pour que l'on visionne bien le tableau dans cet exemple, je
l'ai paramétré avec "bordure 2", sans
indication de couleur. Les liens sur
le 
sont
actifs et s'ouvrent dans une nouvelle page (cible : Blank
- voir ci-dessous étape 13)
|
|
|
|
Gai
Château
|
Les
Mariés du Moulin
|
Le
Bonheur
|
|
|
|
|
L'Absence
|
Automne
|
Africa-Dream
|
10. Pour aller à
la ligne, sans avoir un espace trop grand, cliquer en même
temps les touches "Maj" et "entrée"
(les icônes jaunes ne se verront pas sur le net : il
s'agit d'éléments cachés)
11. Pour mettre un lien, il suffit de surligner le mot ou de
sélectionner l'image et de renseigner la case correspondante
de l'inspecteur de propriété. Ce peut être un lien sur un dossier
présent dans celui de votre site, (dans ce cas aller le chercher
dans la boite qui s'ouvre)ou un lien extérieur (dans ce cas
faire un copier-coller du lien dans la case "lien")
12. Dans le cas d'un lien sur une image, pour éviter un vilain
entourage de celle-ci, la sélectionner et mettre "bordure 0"
13. Pour qu'un lien ouvre une nouvelle page dans la case "cible",
choisir "Blank". Sinon ne rien mettre la page à
l'écran sera remplacée par la nouvelle.
Pour voir le résultat,
cliquer F12 qui ouvrira votre navigateur. S'il vous satisfait
revenir dans Dreamwaever et cliquer "Fichier/Enregistrer"
Créer les pages
suivantes de la même façon
En bas à droite vous trouverez le "poids"
et la durée de chargement (sans ADSL) de chacune des
pages
Pour Exemple : ci-dessous poids de mon index, et poids de
ma page "liens" (au 20/10/2009)
Vous pouvez réenregistrer
la page "index" sous un autre nom pour obtenir une
nouvelle page dont les paramétrages seront identiques.
Il vous suffira alors de remplacer les images et le texte
par ceux qui doivent figurer sur la nouvelle page.
Pour voir le résultat,
cliquer F12 qui ouvrira votre navigateur
Créé
et mis en ligne le 17/09/2009
J'espère que ce tuto aura été utile
Vous trouverez un tuto très bien fait et très
complet en PDF sur le même sujet ICI
Notez
bien
Me contacter Si
vous souhaitez d'autres explications,
ou
si vous souhaitez
utiliser ce tutoriel dans votre groupe/ou forum
Menu
Général
