Télécharger Dreamweaver 2 (gratuit)
- Dreamweaver 2 est un éditeur de page web "wysiwyg". C'est un logiciel propriétaire mais cette version a été distribuée gratuitement dans un numéro de PC Expert (n° 94 en mars 2000) et elle se trouvait aussi dans le kit de connexion Wanadoo, alors...
Pour lancer Dreamweaver 2 sous Windows XP pour la première fois, Internet Explorer doit être le navigateur par défaut. Vous pourrez ensuite choisir votre navigateur préféré (Mozilla Firefox par exemple).
[Vous devez être inscrit et connecté pour voir ce lien]Attention : Le copier-coller du N° de série ne fonctionne pas : il faut le retaper au clavier.- Documentation permettant aux élèves d'utiliser le logiciel Dreamweaver 2 pour créer des pages web
[Vous devez être inscrit et connecté pour voir ce lien]~~~~~~~~~~~~~~~~~~~~~~
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
[Vous devez être inscrit et connecté pour voir ce lien] et vous trouverez un tutoriel d'utilisation
[Vous devez être inscrit et connecté pour voir ce lien]~~~~~~~~~~~~~~~~~~~~~~~~
~
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
[Vous devez être inscrit et connecté pour voir ce lien]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 "Au bonheur de Ludivine")
[Vous devez être inscrit et connecté pour voir ce lien]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
[Vous devez être inscrit et connecté pour voir ce lien]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")
[Vous devez être inscrit et connecté pour voir ce lien] 3. Cliquer à l'intérieur du tableau et paramétrer comme suit
[Vous devez être inscrit et connecté pour voir ce lien]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)
[Vous devez être inscrit et connecté pour voir ce lien]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
[Vous devez être inscrit et connecté pour voir ce lien] sont actifs et s'ouvrent dans une nouvelle page (cible : Blank - voir ci-dessous étape 13)
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 devez être inscrit et connecté pour voir ce lien]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