introduction à la production de site web
DESCRIPTION
Introduction à la production de site Web. 10 octobre 2012 Grégory Petit http://lrcm.com.umontreal.ca/greg/COM2580/. La semaine dernière…. On a fixé les dates importantes : 31 octobre : premier travail à rendre 28 novembre : second travail à rendre - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/1.jpg)
Introduction à la production de site Web
10 octobre 2012Grégory Petit
http://lrcm.com.umontreal.ca/greg/COM2580/
![Page 2: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/2.jpg)
La semaine dernière…On a fixé les dates importantes :
31 octobre : premier travail à rendre
28 novembre : second travail à rendre
16 janvier : présentation et remise du travail de session
![Page 3: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/3.jpg)
La semaine dernièreSinon, on a vu :
Pourquoi ce cours est pertinent,
une courte introduction au HTML,
une courte introduction à Dreamweaver.
![Page 4: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/4.jpg)
Et donc on fait quoi aujourd’hui?
Pourquoi fait-on des sites Web?
Entête des pages Web
Organisation des fichiers d’un site Web
La structure des pages Web
Atelier
![Page 5: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/5.jpg)
Pourquoi fait-ondes sites Web?
![Page 6: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/6.jpg)
Alors pourquoi?Pour promouvoir quelque chose :
Un produitUne entrepriseUne personne
Pour présenter des informations
Pour le plaisir?
![Page 7: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/7.jpg)
Pour communiquer avec le monde!
![Page 8: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/8.jpg)
Noms de domaineVoir http://www.ic.gc.ca/epic/site/dir-ect.nsf/fr/h_uw00890f.html
Votre produit, votre nom (accès intuitif) chocolats.miam-miam.ca
Éviter d’inclure le fournisseur d’accès (Bell, Videotron, etc.)
Les noms de domaines sont payant et réglementé.
Généralement .com ou .ca
![Page 9: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/9.jpg)
Noms de domaines.com - Destiné à être utilisé par les domaines commerciaux. .org - Destiné à être utilisé par les organismes
non-commerciaux. .biz - Destiné aux entreprises. .info - Destiné aux organismes fournissant de l’information. .name - Limité aux noms des particuliers. .net - Principalement utilisé par les entreprises et les organismes
disposant d’un réseau. .edu - Limité aux établissements d’enseignement qui sont des
collèges ou universités offrant un programme de quatre ans. .mil - Limité au secteur militaire des États-Unis. .gov - Limité au gouvernement des États-Unis. .int - Limité aux organismes dont l’existence résulte d’un traité
international. .museum - Limité aux musées. .coop - Limité aux coopératives.
![Page 10: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/10.jpg)
Entête des pages Web(Racine invisible de notre arbre)
![Page 11: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/11.jpg)
Entête des pages Web <head>Les entêtes de pages doivent contenir les
éléments :
Titre (<title>)
Description
Mot-clé
Il faut penser à ces données pour toutes les pages du site.
![Page 12: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/12.jpg)
Titre de la Page <title>
Utilisez un titre pertinent, court et expressif.
N’écrivez pas un paragraphe.
N’écrivez pas une suite de mots descriptifs.
Généralement, le nom du site suivi par le nom de la page. (ex : COM2580 Applications Web – Evaluation)
![Page 13: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/13.jpg)
Description
Assurez-vous de connaître parfaitement le contenu du site.
Énoncez de manière claire et concise les fonctions ou services décrits dans votre site.
Rédigez le texte comme s’il s’agissait d’un texte publicitaire.
Employez des mots susceptibles d’attirer la clientèle.Incorporez le plus de mots-clés possibles.Assurez-vous d’inclure les méta-références dans le
code source.Employez entre 100 et 200 caractères.<meta name="description" content="… truc …" />
![Page 14: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/14.jpg)
Mots-Clés
Prévoyez les mots-clés que votre clientèle cible utilisera pour chercher ce que vous offrez.
Considérez les mots-clés comme un moyen d’attirer l’attention sur votre site.
Choisissez le singulier ou le pluriel, de faire des phrases.
Ne répétez pas les mots-clés plus de 3 fois car vous serez pénalisé.
N’inscrivez pas des mots qui sont sans rapport avec le contenu de votre page.
N’utilisez pas plus de 20 mots-clés.<meta name="keywords" content="mot1 mot2
…" />
![Page 15: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/15.jpg)
Dans DreamweaverDescription et Mots-clé Titre
![Page 16: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/16.jpg)
HTML
<head><meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" /><meta name="keywords" content="communication
com2580 tutorial udem" /> <meta name="description" content="C'est ici qu'on indique la description qui apparaitra dans les résultats de recherche Google." />
<title>Tutorial COM2571</title></head>
![Page 17: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/17.jpg)
Organisation des fichiersd’un site Web
![Page 18: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/18.jpg)
Création d’un nouveau site avec Dreamweaver
Dreamweaver permet de créer un nouveau site et son infrastructure.
Il est aussi possible de gérer ses sites à distance avec Dreamweaver (voir cours Intégration Web)
![Page 19: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/19.jpg)
Création d’un nouveau site avec Dreamweaver
![Page 20: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/20.jpg)
Création d’un nouveau site avec Dreamweaver
![Page 21: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/21.jpg)
Organisation des fichiersCréer des répertoires pour :
Les images
Les styles
Éventuellement pour l’arborescence du site si celui-ci est massif
![Page 22: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/22.jpg)
Arborescence des fichiers
![Page 23: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/23.jpg)
Concrètement ça donne quoi?
![Page 24: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/24.jpg)
Concrètement ça donne quoi? Il est important de laisser le chemin relatif au
document.
<img src="images/image1.png" width="267" height="345" alt="Image" />
![Page 25: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/25.jpg)
Et pour les hyperliens?
![Page 26: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/26.jpg)
Et pour les hyperliens?Comme pour les images, il est important de
laisser le chemin relatif au document.
<a href="menu1.html">Menu1</a>
![Page 27: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/27.jpg)
Les structures de page Web
![Page 28: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/28.jpg)
On va apprendre un nouvel élément HTML!
![Page 29: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/29.jpg)
La division <div>L’élément div permet de séparer sa page Web
en plusieurs parties.
C’est utile pour la mise en page.
C’est utile aussi pour regrouper les éléments ensembles.
![Page 30: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/30.jpg)
La division <div>
![Page 31: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/31.jpg)
La division <div>Vous êtes obligés de remplir l’attribut id.
Plusieurs div peuvent avoir la même valeur pour l’attribut id.
Pour l’attribut class, on verra ça plus tard avec les feuilles de style.
![Page 32: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/32.jpg)
HTML
<div id="contenu"><p>Bienvenue! </p><p>
<img src="images/image1.png" width="267" height="345" alt="Image" />
<img src="images/image2.png" width="395" height="59" alt="image2" />
</p></div>
![Page 33: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/33.jpg)
Atelier
![Page 34: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/34.jpg)
AtelierCréez un nouveau site Web avec Dreamweaver.
Vous devez concevoir une page Web avec plusieurs divisions.
Il doit y avoir au moins : Une division d’entête où vous mettrez plusieurs
liens pour faire une sorte de menu,Une division pour le contenu,Uns division pour le pied de page.
La division d’entête doit contenir des liens vers d’autres pages que vous aurez créés.
![Page 35: Introduction à la production de site Web](https://reader036.vdocuments.site/reader036/viewer/2022062410/56815ec9550346895dcd4f9d/html5/thumbnails/35.jpg)
Des questions???
Merci de votre attention!
A la semaine prochaine!
[email protected]://lrcm.com.umontreal.ca/greg/COM2580/