cours dreamweaver

pages

Français

Documents

Écrit par
Sabina

Publié par
Apre

Lire

Le téléchargement nécessite un accès à la bibliothèque YouScribe Tout savoir sur nos offres

pages

Français

Documents

Lire

Le téléchargement nécessite un accès à la bibliothèque YouScribe Tout savoir sur nos offres

Publié par

Apre

Nombre de lectures

Langue

Français

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, ...

Voir

Publié par

Apre

Langue

Français

ordinateur

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, 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. Quest-ce quune 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 quun fichier word est un .doc) Le HTML est un format de page lisible par les navigateurs (Netscape ou Internet Explorer). Cest un format presque universel (vous verrez pourquoi plus tard!) Si on enregistre une page blanche de Dreamweaver, vous naurez quune 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

2. Comment faire une page web ? Les logiciels daujourdhui enregistrent souvent au format HTML. Mais ce nest pas parce que Word ou tout autre logiciel que vous avez en votre possession enregistre au format HTML quil 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 laide 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 dutilisation et capable de faire des choses complexes comme ajouter des composantes « flash », des images survolées, etc. 3. Linterface du logiciel Comme pour tous les logiciels que vous connaissez, linterface est simple, elle comporte une barre doutils 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 sen 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. Loutil « Propriétés » est une fenêtre flottante que lon affiche par Fenêtres > Propriétés et qui vous donne les propriétés de lobjet 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 saffiche par Fenêtres > Insertions et vous permet davoir les objets utiles sous la main. Par exemple, de gauche à droite, vous avez : insertion dun « lien , » dun courriel, dun ancre, dun tableau, dun calque, dune image, dun espace réservé, dun document « Fireworks », dun 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 saventurer dans des grands projets qui vous compliqueront rapidement la vie (la simplicité est parfois mieux! « less is more ») 4. Avant douvrir le logiciel Avant même douvrir Dreamweaver ou tout autre logiciel, vous devez savoir ce que vous en ferez. Faites dabord 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 lensemble du sujet traité. De plus, les flèches montrent les liens entre les pages. Certains sujets peuvent faire référence à dautres de vos pages. Page daccueil : 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 quun 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 nimporte 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 men 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 à dautres 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, dautres 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 dabord, noubliez pas que faire une page Internet est identique à faire un beau fichier dans Word, à lexception 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 ! Noubliez 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 nest 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 dune image : Vous songez à ajouter une image dans votre page? Songez dabord à placer votre image dans le bon dossier ! Par la suite, cliquez sur le menu insertion > image et sélectionnez limage désirée. TRUC : Il est très important de redimensionner limage selon la taille désirée avant de limporter dans Dreamweaver. La raison est simple : certains navigateurs en perdront la qualité ou votre image aura lair étirée. Pour la redimensionner, plusieurs logiciels soffrent à vous : Photoshop, PaintShopPro, AcdSee en cas de problème de ce genre, faites F1 (fiez-vous à laide du logiciel!). Insertion dun tableau : Aussi simple que dinsé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 loccurrence le tableau) le menu « propriétés » se modifie selon les paramètres qui soffre à vous. Ci-dessus dans limage, vous pouvez modifier la police du texte qui se trouve dans le tableau (voir partie du haut), mais également lagencement des cellules : leur taille, leur orientation, la couleur darriè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 quil 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 dun lien dans une même page : Vous pouvez insérer un lien dans une même page (cela ne sappelle 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 dabord votre barre dobjet (pour ce faire aller dans fenêtre > insertion ). Placez-vous, dans votre page web, à lendroit où vous désirez envoyer votre visiteur au clic de souris et cliquez sur le dessin encerclé sur limage ci-dessous (nommé ancre).

On vous demande dentrer 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 à lendroit où vous avez positionner votre ancre. Dans votre barre des propriétés, vous un endroit tout indiqué pour mettre ladresse de ce lien :

Comme votre ancre se nomme ici et quil sagit dun 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 dun lien : Vous avez envie douvrir une autre page et non pas denvoyer votre visiteur dans la même page ? Le même principe se pose ! Au lieu dinscrire #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 daller « pointer » le fichier par vous-même et indiquera ladresse à votre place. Truc : Vous pouvez inscrire le nom dune 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 lobliger à suivre le lien dans une « nouvelle fenêtre ».

Après avoir indiqué ladresse 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 soffrent à vous : _blank, _parent, _self, _top. Testez-les et voyez ce que cela provoque ! Dautres options peuvent safficher 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 saffichera 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 soffrent à vous comme : insérer des fichiers « flash » ou « Shockwave » ou encore dajouter 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 dun site Internet en peu de temps. Ajout dune 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 à lutilisation). Assurez-vous toujours davoir les deux images en question dans votre répertoire « images ». Imaginons que limage 1a.jpg, au passage de la souris, se transformerait pour montrer limage 1b.jpg (celles-ci étant toutes deux dans le bon dossier). 1a.jpg 1b.jpg Image affichée Image qui saffiche 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 souvre alors et vous demande le nom des deux fichiers (1a.jpg et 1b.jpg) ainsi que le lien de la page qui souvrira 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 lencadrant 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 saffiche 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 ? Dabord, 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 ? Lensemble des pages doivent faire partie menu mainfra dune autre page.

0 ____________________________________________________________________ 1 Macromedia Dreamweaver par Suzanne Roy Octobre 2002

La page principale (qui contient linformation 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 navez 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 lendroit, 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 dabord, puis faire insertion > image . Votre image semble ne pas « rentrer » dans le cadre. Essayez dabord 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.

Noubliez 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, lensemble des pages). 11 ____________________________________________________________________ Macromedia Dreamweaver par Suzanne Roy Octobre 2002

Voir