cours dreamweaver
Description
MACROMEDIA DREAMWEAVER 1. Qu’est-ce qu’une page HTML ? 2. Comment faire une page web ? 3. L’interface du logiciel 4. Avant d’ouvrir le logiciel… 5. Les connaissances de base 6. Les fonctions avancées 7. Avant de publier… 8. Publier vos pages 9. Questions – réponses 10. Ressources Macromedia Dreamweaver est un logiciel qui permet de créer des pages HTML. Il est WYSIWYG (What you see is what you get), mais il permet également de voir le code HTML (que plusieurs ne veulent pas nécessairement voir). Il est donc un éditeur complet et il fait partie d’un logiciel très connu de l’industrie. J’espère que vous aurez plaisir à vous en servir ! Vous pouvez télécharger une version d’évaluation complètement fonctionnelle sur le site de Macromedia (www.macromedia.com ou www.macromedia.fr si vous préférez télécharger une version française du logiciel). Tous les logiciels ne se valent pas, mais tous les goûts sont dans la nature. Ayant travaillé avec WebExpert, puis avec FrontPage, j’ai fait la connaissance de Dreamweaver il y a déjà 2 ans et je l’ai trouvé très agréable à utiliser. Mais cette petite formation vise à vous donner les outils pour l’utiliser, pas pour l’aimer nécessairement… Plusieurs ressources sont disponibles si vous avez des difficultés avec le logiciel ou si vous avez des questions sur tel ou tel aspect. En cas de problèmes, commencez toujours par presser la touche « F1 » (aide du logiciel). Si cela ne vous aide pas avec votre problème, ...
Sujets
Informations
| Publié par | Apre |
| Nombre de lectures | 90 |
| Langue | Français |
Extrait
MACROMEDIA DREAMWEAVER 1. Quest-ce quune page HTML ? 2. Comment faire une page web ? 3. Linterface du logiciel 4. Avant douvrir le logiciel 5. Les connaissances de base 6. Les fonctions avancées 7. Avant de publier 8. Publier vos pages 9. Questions réponses 10. Ressources Macromedia Dreamweaver est un logiciel qui permet de créer des pages HTML. Il est WYSIWYG (What you see is what you get), mais il permet également de voir le code HTML (que plusieurs ne veulent pas nécessairement voir). Il est donc un éditeur complet et il fait partie dun logiciel très connu de lindustrie. Jespère que vous aurez plaisir à vous en servir ! Vous pouvez télécharger une version dévaluation complètement fonctionnelle sur le site de Macromedia www.macromedia.com ou www.macromedia.fr si vous préférez télécharger une version française du logiciel). Tous les logiciels ne se valent pas, mais tous les goûts sont dans la nature. Ayant travaillé avec WebExpert, puis avec FrontPage, jai fait la connaissance de Dreamweaver il y a déjà 2 ans et je lai trouvé très agréable à utiliser. Mais cette petite formation vise à vous donner les outils pour lutiliser, pas pour laimer nécessairement Plusieurs ressources sont disponibles si vous avez des difficultés avec le logiciel ou si vous avez des questions sur tel ou tel aspect. En cas de problèmes, commencez toujours par presser la touche « F1 » (aide du logiciel). Si cela ne vous aide pas avec votre problème, essayez les newsgroups, les sites web, les tutoriels, etc. Tapez Dreamweaver tutoriel dans Google.fr et voyez ce qui en ressort (voir la section « Ressources ») ! 1. Quest-ce quune page HTML ? Il est facile de décrire la page HTML. Lorsque vous naviguez, remarquez que toutes les pages sont des .htm ou des .html (au même titre quun fichier word est un .doc) Le HTML est un format de page lisible par les navigateurs (Netscape ou Internet Explorer). Cest un format presque universel (vous verrez pourquoi plus tard!) Si on enregistre une page blanche de Dreamweaver, vous naurez quune série de code et non une page blanche ! Voici à quoi ressemble une page vide : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Document sans titre</title> ____________________________________________________________________ 1 Macromedia Dreamweaver par Suzanne Roy Octobre 2002
<meta http-equiv="Content-Type content="text/html; charset=iso-8859-1"> " </head> <body> </body> </html> Tous ces codes ne sont pas nécessaires, mais Dreamweaver en ajoute certains car il sait quil vaudrait mieux les remplir. Trois « balises » sont nécessaires pour faire une page web. Les balises sont les mots « clefs » qui se trouvent entre deux < > comme <html>. Si on met <html>, il faut également fermer la balise avec </html>. Cela signifie que ce qui se trouve entre ces balises est du code HTML, le navigateur le traite donc en conséquence. Les balises essentielles sont : <html> La balise HTML permet dindiquer le format du fichier (qui est fichier de type HTML). Lorsque vous utiliserez un autre langage (comme Javascript ou PHP), vous devez indiquer au logiciel le langage qui sera lu. <head> La « tête » du fichier. Contient les informations comme le titre de la page, lauteur, les META (mots-clés utilisés pour les moteurs de recherche), le type dencodage de vos fichiers, etc. Ces informations sont souvent remplies par Dreamweaver, mais avec des informations de base. Il vaut mieux changer le minimum (au moins le nom du document qui apparaîtra dans la barre du haut du navigateur). <body> Tout ce quil y a dans le corps de la page : bref, tout le reste! Le texte, les tableaux, les images, etc. Ce qui est affiché dans la page elle-même.
2. Comment faire une page web ? Les logiciels daujourdhui enregistrent souvent au format HTML. Mais ce nest pas parce que Word ou tout autre logiciel que vous avez en votre possession enregistre au format HTML quil fait de belles pages web ! Comment savoir si votre logiciel enregistre au format HTML ? Vérifiez ! Faites file -> save as -> et vérifiez si le format html est une possibilité. Attention : dans tous les cas, vérifiez vos pages dans votre navigateur. Parfois, le résultat est désastreux ! Ouvrez également votre page HTML dans Dreamweaver et vérifiez que votre code est propre (certains logiciels ajoutent du code inutilement). Dreamweaver peut également « nettoyer » ce code inutile (qui alourdit et crée des problèmes sur certains navigateurs) mais cela nécessite certaines démarches. Consultez laide pour plus de détails (touche « F1 »). 2 ____________________________________________________________________ Macromedia Dreamweaver par Suzanne Roy Octobre 2002
Comme pour tous les métiers, il faut être bien outillé. Dreamweaver est un excellent outil pour faire vos pages et vos sites Internet. Il est à la fois simple dutilisation et capable de faire des choses complexes comme ajouter des composantes « flash », des images survolées, etc. 3. Linterface du logiciel Comme pour tous les logiciels que vous connaissez, linterface est simple, elle comporte une barre doutils et des menus.
Le logiciel se partage en deux sections le haut et le bas (la colonne de droite étant pour les développeurs et ne sera pas traitée ici). La zone du haut nommée « HTML » : vous permet de voir le « code » lorsque vous faites une action dans la zone du bas. Utile si vous voulez ajouter du « code » déjà tout prêt (comme il sen trouve sur le Web). Utile aussi pour apprendre comment cela fonctionne ! La zone du bas nommée « graphique » : elle est comme votre Word, vous y tapez votre texte, y mettez des images, des objets, etc. Loutil « Propriétés » est une fenêtre flottante que lon affiche par Fenêtres > Propriétés et qui vous donne les propriétés de lobjet sélectionné par la souris (image, tableau, texte, lien, etc.) Tout en haut de votre fenêtre, vous pouvez voir les icônes suivants :
3 ____________________________________________________________________ Macromedia Dreamweaver par Suzanne Roy Octobre 2002
La barre de menu saffiche par Fenêtres > Insertions et vous permet davoir les objets utiles sous la main. Par exemple, de gauche à droite, vous avez : insertion dun « lien , » dun courriel, dun ancre, dun tableau, dun calque, dune image, dun espace réservé, dun document « Fireworks », dun fichier « Flash », etc. En cliquant dans les diverses sections du sous-menu du haut, vous pouvez ajouter des « cadres », du texte, des formulaires, etc. ATTENTION : il vaut mieux connaître la base du logiciel avant de saventurer dans des grands projets qui vous compliqueront rapidement la vie (la simplicité est parfois mieux! « less is more ») 4. Avant douvrir le logiciel Avant même douvrir Dreamweaver ou tout autre logiciel, vous devez savoir ce que vous en ferez. Faites dabord un plan de vos pages HTML sur papier. Voici un exemple de site Internet créé avec le logiciel Inspiration :
Ce plan vous aide à voir combien de pages seront nécessaires à votre site pour couvrir lensemble du sujet traité. De plus, les flèches montrent les liens entre les pages. Certains sujets peuvent faire référence à dautres de vos pages. Page daccueil : Celle-ci est souvent comme la page couverture de vos travaux : avec le titre de votre site Internet, une image ou une animation, la date de la dernière mise à jour, votre nom et un compteur de visites par exemple. Menu et mot de bienvenue : Page vous donnant accès au menu de votre site ainsi quun mot de bienvenue qui ressemble en gros à un résumé de vos pages, pourquoi vous 4 ____________________________________________________________________ Macromedia Dreamweaver par Suzanne Roy Octobre 2002
avez décidé de faire un site sur ce sujet, etc. Le menu peut être nimporte où dans votre page, mais il est habituellement en haut ou à gauche de la page et les rubriques sont facilement identifiables (si je clique à cet endroit, je sais où je men vais!) Dans le cas du plan mis en exemple, le menu comporte quatre liens sur quatre pages bien distinctes (biographie, uvre, projet et liens) et ces pages elle-mêmes font références à dautres pages par la suite (comme des chapitres et des sous-chapitres). Chacune des pages que vous créerez doit avoir un « titre » et un sujet à elle-seule. Il est également fort important de créer une page « Me contacter » ou « Pour me joindre » afin que vos visiteurs vous laissent des commentaires. Certains vous feront remarquer vos erreurs typographiques, dautres vous écriront pour vous dire combien ils partagent la même passion que vous Où suis-je ? : Parfois, vos visiteurs clique ici, clique là mais où sont-ils ? Jetez un il sur les exemples des étudiants qui ont créés un site Internet ( www.unites.uqam.ca/pcpes/test rubrique étudiants/sites web). Vous devez indiquer à vos visiteurs où ils sont et leur offrir le moyen de retourner aux pages précédentes. Ne perdez pas vos visiteurs à travers votre site ! Cela justifiera votre structure et démontrera combien vos pages sont solidaires entres-elles ! 5. Les connaissances de base Tout dabord, noubliez pas que faire une page Internet est identique à faire un beau fichier dans Word, à lexception que vous devez penser aux liens entre les pages et que vos possibilités sont beaucoup plus vastes. Voici, en gros, comment faire une page web simple. PREMIÈRE ÉTAPE : Créez un dossier ! Noubliez pas que vos fichiers ne sont pas destinés à être vu de par votre ordinateur, mais via un serveur ! Il vaut donc commencer prudemment : faites un dossier « pageweb » dans lequel vous ferez un sous-dossier « images » (vous pouvez mettre vos images et vos fichiers HTML au même endroit, mais lorsque vous aurez un gros site Internet, ce sera un peu le fouillis) Si vous aimez les bonnes habitudes, créez un dossier pour vos images et un pour vos fichiers à télécharger (ex : votre powerpoint). Ceci nest pas obligatoire. Certes il vous faut un dossier de base pour y placer vos fichiers, autrement votre site sera incomplet ou aura de mauvais liens entre les pages). Mais vos images peuvent se trouver au même niveau que vos fichiers .htm (ou.html) DEUXIÈME ÉTAPE : Ouvrez dreamweaver (démarrer > programmes > macromedia > dreamweaver ou, si vous êtes dans le laboratoire (dans le répertoire cours EDU7492 > dreamweaver ) .
5 ____________________________________________________________________ Macromedia Dreamweaver par Suzanne Roy Octobre 2002
Avant même de faire quoi que ce soit : enregistrez votre page dans votre dossier « pageweb ». Votre fichier repèrera alors vos images ou tous les autres fichiers liés via ce dossier. Autrement, les fichiers « liés » auront une adresse « c:/windows/bureau » et ce ne sera pas utile lorsque vos fichiers seront sur Internet ! Insertion dune image : Vous songez à ajouter une image dans votre page? Songez dabord à placer votre image dans le bon dossier ! Par la suite, cliquez sur le menu insertion > image et sélectionnez limage désirée. TRUC : Il est très important de redimensionner limage selon la taille désirée avant de limporter dans Dreamweaver. La raison est simple : certains navigateurs en perdront la qualité ou votre image aura lair étirée. Pour la redimensionner, plusieurs logiciels soffrent à vous : Photoshop, PaintShopPro, AcdSee en cas de problème de ce genre, faites F1 (fiez-vous à laide du logiciel!). Insertion dun tableau : Aussi simple que dinsérer une image : menu insertion > tableau . A quoi servira votre tableau ? 1) Un tableau est utile pour classer des données :
Notez que chaque fois que vous cliquez sur un élément dans votre page (en loccurrence le tableau) le menu « propriétés » se modifie selon les paramètres qui soffre à vous. Ci-dessus dans limage, vous pouvez modifier la police du texte qui se trouve dans le tableau (voir partie du haut), mais également lagencement des cellules : leur taille, leur orientation, la couleur darrière plan, avec ou sans bordure, etc. (voir partie du bas).
____________________________________________________________________ 6 Macromedia Dreamweaver par Suzanne Roy Octobre 2002
2) Un tableau est aussi très utile pour faire votre mise en page :
Pour agencer vos images et votre texte, il vaut mieux cadrer le tout dans un tableau « sans bordure » sinon vous verrez que votre image sera toujours au mauvais endroit selon le navigateur utilisé. A la création du tableau, indiquez 0 dans bordure (pour ne pas quil y en ait). Notez également que vous pouvez séparer ou joindre des cellules de tableaux en surlignant les cellules désirées et en cliquant sur le bouton des « propriétés » suivantes :
Insertion dun lien dans une même page : Vous pouvez insérer un lien dans une même page (cela ne sappelle pas nécessairement un lien, mais plutôt une ancre). Comme dans Word, vous pouvez envoyer - sur un mot ou une phrase ou encore sur une image particulière votre visiteur sur un endroit particulier de cette même page. Voici comment : Ouvez dabord votre barre dobjet (pour ce faire aller dans fenêtre > insertion ). Placez-vous, dans votre page web, à lendroit où vous désirez envoyer votre visiteur au clic de souris et cliquez sur le dessin encerclé sur limage ci-dessous (nommé ancre).
On vous demande dentrer un nom pour votre ancre. Nommez-là « ici » (sans les guillemets).
____________________________________________________________________ 7 Macromedia Dreamweaver par Suzanne Roy Octobre 2002
Ensuite, sélectionnez un mot ou une image sur lequel un clic de souris redirigera votre visiteur à lendroit où vous avez positionner votre ancre. Dans votre barre des propriétés, vous un endroit tout indiqué pour mettre ladresse de ce lien :
Comme votre ancre se nomme ici et quil sagit dun lien dans la même page. Une ancre se nomme toujours avec un # avant le nom. Donc, pour nommer votre « ancre », vous allez inscrire, dans la case « Lien » : #ici (avec le caractère # qui signifie que le lien est dans la même page). Voilà ! Vous pouvez tester votre ancre en appuyant la touche F12, ce qui ouvrira votre page dans un navigateur. Insertion dun lien : Vous avez envie douvrir une autre page et non pas denvoyer votre visiteur dans la même page ? Le même principe se pose ! Au lieu dinscrire #ici, vous allez écrire « lenomdelapage.htm» que votre navigateur doit ouvrir (toujours sans les guillemets). Par contre, lenomdelapage.html doit se trouver dans le même répertoire que la page sur laquelle se trouve ce lien. Si cette page se trouve dans un autre répertoire, cliquez sur la chemise jaune des propriétés, Dreamweaver vous permettra daller « pointer » le fichier par vous-même et indiquera ladresse à votre place. Truc : Vous pouvez inscrire le nom dune autre page (sur un autre serveur) : comme : http://www.allotoi.com/mapageweb/mapage.html Si vous ne voulez pas que cette page « envoie » votre visiteur sur la page en question (car il ne serait plus sur la vôtre) vous pouvez lobliger à suivre le lien dans une « nouvelle fenêtre ».
Après avoir indiqué ladresse web (http://) en question, sélectionner la « cible » du lien et indiquez « _blank » (qui signifie dans une nouvelle fenêtre). Notez également les autres options qui soffrent à vous : _blank, _parent, _self, _top. Testez-les et voyez ce que cela provoque ! Dautres options peuvent safficher lorsque vous utilisez les « cadres » (aussi nommés « frames »). Vous êtes presque prêt à réaliser votre première page web, mais il manque un élément de taille ! Les propriétés de la page ! Pour ce faire, aller dans le menu modifier > propriétés de la page .
____________________________________________________________________ 8 Macromedia Dreamweaver par Suzanne Roy Octobre 2002
Titre de la page Couleur de la page
Image en arrière-plan Couleurs de votre texte, de vos liens, etc.
À quoi servent ces propriétés ? À intituler votre page (nom qui saffichera dans le haut de votre navigateur), à donner une couleur ou une image comme fond décran (image qui est dans le bon répertoire!!!), vous pouvez indiquer la couleur de vos liens, de votre texte, des liens qui ont été visités et qui sont actifs, etc. Ces propriétés sont une étape importante (au moins, nommez votre page!!!) Voilà, avec ces quelques notions, vous pourrez confectionner vos premières pages web. Un exercice pour vérifier vos connaissances : créez une page insérez des images et des liens, créez diverses pages qui pointent entres elles et vous comprendrez rapidement comment le tout fonctionne 6. Les fonctions avancées Pour confectionner une page plus complexe, Dreamweaver est lélément idéal. Bien que plusieurs fonctions soffrent à vous comme : insérer des fichiers « flash » ou « Shockwave » ou encore dajouter des formulaires, de la programmation javascript, php ou autre, nous nous attarderons à quelques éléments complexes, mais réalisables dans le cadre de la conception dun site Internet en peu de temps. Ajout dune image survolée : une image survolée, aussi nommée « rollover » est une image qui se transforme au passage de la souris. Cela est fréquemment utilisé et est simple à réaliser (en autant que vous ayez vos images prêtes à lutilisation). Assurez-vous toujours davoir les deux images en question dans votre répertoire « images ». Imaginons que limage 1a.jpg, au passage de la souris, se transformerait pour montrer limage 1b.jpg (celles-ci étant toutes deux dans le bon dossier). 1a.jpg 1b.jpg Image affichée Image qui saffiche au normale en passage de la souris m t
____________________________________________________________________ 9 Macromedia Dreamweaver par Suzanne Roy Octobre 2002
Vous avez sûrement vu des pages qui utilisent ce système ( www.pcpes.tk par exemple!). Pour réaliser ceci, allez dans le menu insertion > image interactive > image survolée une fenêtre souvre alors et vous demande le nom des deux fichiers (1a.jpg et 1b.jpg) ainsi que le lien de la page qui souvrira au clic de la souris. Pas plus compliqué ! Truc : pour faire deux images « similaires » pour faire ce fameux « rollover , » utilisez un logiciel simple comme « RealDraw » disponible sur www.mediachance.com . Créez votre première image, puis exportez-là. Par la suite, modifiez cette même image (en lencadrant ou en modifiant sa couleur) et exportez-là de nouveau. Vous aurez alors vos deux images prêtes pour créer votre « rollover ». Notez que vous pouvez faire la même procédure dans tout autre logiciel de dessin (Photoshop par exemple). FAIRE DES CADRES (POUR UTILISATEURS AVANCÉS SEULEMENT) À quoi servent les cadres (aussi nommés FRAMES) ? Si vous avez un menu ou un titre et vous désirez que celui-ci saffiche constamment, vous pouvez utiliser les cadres. Un cadre est une page divisé en plusieurs pages web (html). Exemple :
Voici un exemple qui contient 4 pages web. Pourquoi 4 ? Dabord, il y a trois cadres différents. Imaginons que le titre de votre page soit constamment dans le haut de la page (topframe) et que votre menu soit constamment dans le cadre de gauche (leftframe). Vous avez également une page « principale » qui affichera les pages appelées par le (_ me). Où est donc la 4 e page ? Lensemble des pages doivent faire partie menu mainfra dune autre page.
0 ____________________________________________________________________ 1 Macromedia Dreamweaver par Suzanne Roy Octobre 2002
La page principale (qui contient linformation sur les cadres intérieurs) doit définir : 1) La taille ou le pourcentage des cadres. Ex : 20% - 80% ou 20 pixels, * (* signifie le reste de la page) ; 2) Le nom des cadres auquel vous pourrez faire appel dans Dreamweaver ; 3) Les pages qui sont appelés, à la base, dans ces cadres. Notez que Dreamweaver calcule automatiquement la largeur sélectionnée de vos cadres. Vous navez donc pas à calculer la taille par vous-même. Juste à bouger la frontière de vos cadres et à enregistrer suffit ! Ouf ! Un petit exemple visuel ? Ouvrez Dreamweaver et créez un cadre en haut de votre page, qui sera le titre et le menu. Si vous enregistrez « tout » ( fichier > enregistrer tout ), Dreamweaver vous demande, évidemment lendroit, mais le nom de 3 fichiers. UntitledFrame et UntitledFrameSet. FrameSet signifie (le jeu de cadres) donc le cadre qui contient les deux autres cadres. Appelons-le : index.htm UntitledFrame1 signifie le cadre du bas. Appelons le bas.htm UntitledFrame1 : cadre du haut. Nom : haut.htm (etc. etc.) Insérez une image (menu.jpg) dans le cadre du haut. Il faut sélectionner le cadre dabord, puis faire insertion > image . Votre image semble ne pas « rentrer » dans le cadre. Essayez dabord de retirer toutes les marges modifier > propriétés de la page . Vous pouvez aussi descendre la ligne du cadre selon votre désir. Dreamweaver enregistrera automatiquement la taille de vos cadres.
Noubliez pas, la partie du bas est une autre page html !Si vous écrivez un petit texte dans la partie du bas, que vous enregistrez toute vos pages, ouvrez-les séparément et vous verrez que chacune des pages vous offre une vision différente (la page du haut, la page du bas, lensemble des pages). 11 ____________________________________________________________________ Macromedia Dreamweaver par Suzanne Roy Octobre 2002
© 2010-2024 YouScribe