TUTO DREAMWAEVER 2

Ce logiciel était distribué gratuitement avec le CD de Wanadoo
Vous le télécharger ICI
Attention : Le copier-coller du N° de série ne fonctionne pas : il faut le retaper au clavier.



Avant tout, voici ce qu'il vous faut pour mettre votre site en ligne, une fois créé :

UN ESPACE DE MISE EN LIGNE:

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.

UN LOGICIEL DE TRANSFERT (appelé FTP)

Il vous permettra de copier les fichiers de votre site dans votre espace d'hébergement. Personnellement j'utilise FileZilla, logiciel gratuit et simple d'utilisation qui permet de se connecter à distance sur le serveur de votre hébergeur afin d'y envoyer les fichiers de votre site (Ils y sont simplement copiés et les documents de base restent sur votre ordinateur)
Vous pourrez le télécharger ICI et vous trouverez un tutoriel d'utilisation ICI

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"
Gai Château
Les Mariés du Moulin
Le Bonheur
"L'absence" PSP XI
Automne
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