Download
1 / 35
360 likes | 477 Views
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
E N D
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 • 16 janvier : présentation et remise du travail de session
La semaine dernière Sinon, on a vu : • Pourquoi ce cours est pertinent, • une courte introduction au HTML, • une courte introduction à Dreamweaver.
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
Alors pourquoi? • Pour promouvoir quelque chose : • Un produit • Une entreprise • Une personne • Pour présenter des informations • Pour le plaisir?
Noms de domaine • Voir 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
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.
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.
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)
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. • <metaname="description" content="… truc …" />
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. • <metaname="keywords" content="mot1 mot2 …" />
Dans Dreamweaver Description et Mots-clé Titre
HTML <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <metaname="keywords" content="communication com2580 tutorial udem" /> <metaname="description" content="C'est ici qu'on indique la description qui apparaitra dans les résultats de recherche Google." /> <title>Tutorial COM2571</title> </head>
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)
Organisation des fichiers Créer des répertoires pour : • Les images • Les styles • Éventuellement pour l’arborescence du site si celui-ci est massif
Concrètement ça donne quoi? • Il est important de laisser le chemin relatif au document. • <imgsrc="images/image1.png" width="267" height="345" alt="Image" />
Et pour les hyperliens? • Comme pour les images, il est important de laisser le chemin relatif au document. • <a href="menu1.html">Menu1</a>
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.
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.
HTML <div id="contenu"> <p>Bienvenue! </p> <p> <imgsrc="images/image1.png" width="267" height="345" alt="Image" /> <imgsrc="images/image2.png" width="395" height="59" alt="image2" /> </p> </div>
Atelier • Cré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.
