La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Créer un site web simple Avec Dreamweaver 2. Idées et matériel nécessaires Une réflexion et des réponses à des questions préliminaires Quelques connaissances.

Présentations similaires


Présentation au sujet: "Créer un site web simple Avec Dreamweaver 2. Idées et matériel nécessaires Une réflexion et des réponses à des questions préliminaires Quelques connaissances."— Transcription de la présentation:

1 Créer un site web simple Avec Dreamweaver 2

2 Idées et matériel nécessaires Une réflexion et des réponses à des questions préliminaires Quelques connaissances « basiques » de mise en page dans un traitement de textes Le logiciel Dreamweaver 2 installé sur son poste Un peu de rigueur et d imagination...

3 Des réponses précises aux questions : Pourquoi faire un site web ? Pour qui (Quelle « cible ») ? Que contiendra-t-il ? Comment va-t-on travailler (avec qui, avec quelles compétences, sur quel matériel, avec quelles possibilités de temps, pour avoir fini à quelle date,...) ?

4 Connaissances de base Savoir rédiger un texte, le mettre en forme Savoir insérer une image, faire un tableau Savoir scanner et rapidement « travailler » une image Savoir créer un dossier, y enregistrer un fichier, le retrouver, le ré-ouvrir

5 Avant de démarrer 3 précautions : Etablir sur papier un plan du site Créer un dossier pour le site Avoir réfléchi aux problèmes de droits

6 Plan du site Prévoir sur papier le contenu et la présentation des pages, lemplacement des images, les liens... Exemple d organisation dun site simple : Page d accueil Page 2 contenant 1 texte, 2 images, un lien vers la page 4 et un retour vers la page daccueil Page 3 avec un tableau, 2 liens externes et un retour vers la page daccueil Page 4 comportant sur une image un lien vers la page 2, et un retour vers la page daccueil

7 Préparation du dossier « Mon site » Créer sur le disque dur un nouveau dossier, qui contiendra tous les éléments constitutifs du site Y créer un sous-dossier « images » pour y placer tous les documents iconographiques (fonds, boutons, gifs, photos, …) Placer éventuellement dans le dossier les fichiers.htm déjà existants (enregistrés à partir de Word )

8 Conseils pratiques Ne donner aucun nom de dossier, de fichier ou dimage excédant 8 caractères (extension non comprise) Ne pas utiliser despaces, de majuscules, de signes de ponctuation dans le nom des fichiers Ceci afin de faciliter la navigation (liens) et lintégration éventuelle du site sur un serveur institutionnel (CRDP par exemple) Autre remarque : Dans les textes, éviter les soulignements qui pourraient être pris pour les liens actifs … qui naboutiront pas ! Tous les documents (fichiers, images, …) doivent figurer dans le dossier réservé au site : penser à les y ranger ou les y copier !

9 Formats de fichiers Les pages elles-mêmes : elles sont au format HTML ; on peut : Les créer directement dans Dreamweaver (Menu Fichier => Nouveau ; la nommer tout de suite par le menu Modifier => Propriétés de la page) Les enregistrer à partir de Word (dans le cas de l'utilisation d'un document préexistant) : dans ce cas, ouvrir le fichier dans Word, aller dans le menu Fichier, cliquer sur Enregistrer au format HTML (Word 97) ou Enregistrer en tant que page web sur Word 2000, et l'enregistrer dans le dossier créé pour notre site.

10 Chaque page web est écrite dans un langage particulier appellé le HTML "Hypertext Generalized Markup Language". Ce langage est basé sur des balises (ou tags), qui contiennent des instructions, lesquelles sont interprétées par les différents navigateurs et apparaissent sur votre écran. Il s'agit donc d'un langage de mise en forme du texte. Le code HTML d'une page est appelé le "code source". Il nest pas utile, même si cela est souhaitable, de connaître le langage HTML pour bâtir des pages web : certains logiciels, tels Dreamweaver, le font pour vous de manière « transparente », sans que vous le voyiez ! charte graphique Choix esthétiques : il est important de définir une harmonie de couleurs (fonds, textes, liens), de boutons, dimages et gifs animés, un nombre réduit de polices (parmi les plus courantes afin que tous les postes les reconnaissent). Il faut donc définir une charte graphique pour le site !

11 Les images : elles n'ont pas besoin d'une définition très fine, mais par contre devront se "charger" le plus rapidement possible. Il est donc conseillé d'utiliser Le format GIF (.gif), format de 8 bits pouvant afficher un choix limité de couleurs (256) : pratique pour les dessins et petites animations. Attention : pour les animations, prévisualiser ses pages dans MIE et dans Netscape pour éviter certaines mauvaises surprises (affichage fixe ou animation ne se produisant quune seule fois) Le format JPEG ou ProJPEG (.jpeg ou.jpg) pour les photographies et images utilisant une plus large palette de couleurs ; les images JPEG doivent être enregistrées en mode RVB (couleurs indexées) afin dêtre prises en charge par les navigateurs.

12 Le son : On peut associer à une page un fichier MIDI (.mid), lourd seulement de quelques kilo-octets ou dizaines de Ko La vidéo : dont laffichage nécessite la présence dun plug-un externe à installer sur son disque dur : Fichiers Microsoft Vidéo (.avi), pouvant utiliser le contrôle ActiveX Active Movie Fichiers MPEG (.mpg ou.mpeg) Fichiers QuickTime (.mov) Fichiers Shockwave (.dcr)

13 Installer Dreamweaver 2 Ce logiciel de création de site, actuellement proposé dans la version 4 (payante) est utilisable gratuitement dans sa version 2 ; il suffit de se le procurer et de linstaller sur son disque dur. Une icône sur le bureau (raccourci), et une en barre des tâches seront utiles pour travailler « confortablement » ! Un programme de téléchargement (FTPExpert, Cute FTP) sera nécessaire pour « monter » le site terminé sur le web, et ensuite l actualiser

14 Création de la page d accueil Une page vierge saffiche à louverture du logiciel Il est préférable dafficher la page en « grande fenêtre » et davoir toujours à l écran les 2 barres d outils indiquées Peuvent safficher par le menu « Fenêtre » Barre Objets Barre Propriétés

15 Construction de la page d accueil On peut par exemple y placer 3 cadres, pour le titre, le sommaire et le contenu de laccueil.

16 Ouvrir le menu Modifier => Jeu de cadres => Fractionner le cadre vers le haut. Par glisser - déposer (bouton gauche souris enfoncé), remonter la ligne horizontale Cliquer dans la partie du bas ; ouvrir le menu Modifier => Jeu de cadres => Fractionner le cadre à gauche ; tirer à gauche la ligne verticale obtenue On a créé ainsi 3 zones, qu il faut enregistrer chacune sous un nom différent : cliquer dans une zone => menu fichier => enregistrer sous => ouvrir le dossier « Mon site » => enregistrer sous le nom choisi (titre par exemple). Recommencer pour les 2 autres zones. Il faut ensuite enregistrer la page entière pour en faire la page d accueil : par le menu Fichier, cliquer sur Enregistrer le jeu de cadres sous => s ouvre le dossier du site où on enregistre sous le nom d index Pour en arriver là: Pour en arriver là : Exemple : site « Communimage »

17 Enregistrement du site pour Dreamweaver Pour faire fonctionner le site, les liens qui y seront placés, il doit être le plus vite possible enregistré. Ouvrir le menu Fichier => Nouveau site Donner un nom Cliquer sur icône pour rechercher le dossier, et le sélectionner OK

18 Cliquer sur Créer dans la proposition qui souvre ensuite ; apparaît alors la fenêtre suivante : Se positionner avec la souris sur le fichier « index » => bouton droit => Définir comme page daccueil ; cela permettra d obtenir la carte du site Cliquer ici pour obtenir la carte du site Fermer alors la fenêtre pour retourner à la création de pages.

19 Propriétés de la page Créer la page 2 par le menu Fichier => Nouveau. Aller au menu Modifier => Propriétés de la page Donner un titre Définir les choix d arrière- plan (image ou couleur) Déterminer les couleurs de texte, liens, … selon une charte graphique Terminer en cliquant sur « Appliquer » et OK

20 Travail sur la page 2 Texte sélectionné Choix de la police, de la taille, de la mise en forme (ici, gras et centré) Dreamweaver est un éditeur WYSIWYG : en cliquant sur F12, on a accès au navigateur ; en actualisant par F5, on peut tester les effets programmés !

21 Cliquer sur le menu Insertion => Image Souvre alors cette fenêtre de dialogue ; de « Mon site », cliquer sur le sous-dossier Image, dans lequel on aura placé une image ; cliquer pour en voir laperçu, et ensuite sur Sélectionner : elle sera placée sur la page !

22 Enregistrer la page (Fichier => Enregistrer sous => Mon site => la nommer page2 L image est apparue ; on peut par les pognées en modifier la taille. Aller à la ligne, taper « Vers page 4 », modifier les paramètres de ce texte : police, taille, couleur en cliquant ici pur choisir dans la palette,... Insérer un bouton (placé dans le sous- dossier Images) comme il a été fait pour limage pour préparer le retour vers la page daccueil

23 Ouvrir 2 nouvelles pages (menu Fichier => Nouveau), et les enregistrer dans le dossier « Mon site » sous les noms de page3 et page4. Leur donner un nom par Modifier => Propriétés de la page Revenir à la page 2 (en cliquant ici) afin de préparer les liens. Si les pages ne sont pas refermées, on pourra passer de l une à lautre en cliquant sur leur nom en ouvrant le menu Fenêtre.

24 Sélectionner le texte, cliquer sur l icône dossier S ouvre le contenu du dossier ; cliquer sur le fichier correspondant à la page, puis sur Sélectionner Le lien vient sinscrire dans la fenêtre correspondante ; on aurait pu directement y taper le nom du fichier. C est là que lon tapera lURL d un site vers lequel on voudra faire un lien

25 Le texte a changé de couleur et est souligné ; le lien est créé. Sélectionner limage du bouton, et taper dans la fenêtre Lien le nom de la page daccueil (index.htm). Touche Entrée (clavier) pour enregistrer. Revenir à la page 3 pour créer le tableau Cliquer ici pour faire apparaître la fenêtre de dialogue. Choisir le nombre de lignes et de colonnes ; pour un tableau qui prendra automatiquement la largeur de lécran, choisir 100 et pourcentage. En tapant 0 dans Bordure, on supprime le cadre du tableau. OK pour le créer.

26 La taille des cellules peut se modifier par Glissé sur les limites de cadres. Lien vers une information placée dans la même page : création d une ancre nommée. Sélectionner le texte vers lequel on veut créer un lien ; ouvrir le menu Insertion => Ancre nommée. Dans la fenêtre, taper un nom (bas par exemple) Sélectionner l endroit d où partira le lien ; dans la fenêtre de lien, taper le nom de lancre précédé du signe # Aller vérifier par F12 et F5 que cela fonctionne (il faut pour cela qu il y ait vraiment un texte assez long entre les 2 parties de la page !)

27 Lien vers une adresse de courrier électronique Sélectionner lendroit d où se fera le lien (ce peut être aussi un gif animé de mail) Taper dans le champ Lien : mailto: suivi de votre adresse E.Mail Xxxxxxx Par F12 et F5, vérifier le lien Une fenêtre courrier s ouvre, avec votre adresse déjà indiquée sur le ligne A

28 Pour aller plus loin... Le site de Luc Van Lancker, présentant un didacticiel pour Dreamweaver 2 : Le même auteur propose une découverte pour débutants du langage HTML : Un tutoriel complet pour Dreamweaver à l adresse : Des outils et tutoriels québécois pour monter son site : Liens utiles pour créer sons site à partir de l adresse :

29 Et encore... Fabrication de titres animés sur le site : Pages pour mieux connaître et utiliser les images : de cette page présentant les formats, avancer en cliquant en bas à droite sur « suite du cours » En librairie : « Poche VISUEL Dreamweaver 3 » Editions First Interactive, 231 pages, 69 francs La version 3 diffère peu de la 2, et la quasi-totalité des informations de ce livre sont valables pour Dreamweaver 2 !


Télécharger ppt "Créer un site web simple Avec Dreamweaver 2. Idées et matériel nécessaires Une réflexion et des réponses à des questions préliminaires Quelques connaissances."

Présentations similaires


Annonces Google