Post on 04-Apr-2015
Introduction à la production de site Web
10 octobre 2012Gré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èreSinon, 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
Pourquoi fait-ondes sites Web?
Alors pourquoi?Pour promouvoir quelque chose :
Un produitUne entrepriseUne personne
Pour présenter des informations
Pour le plaisir?
Pour communiquer avec le monde!
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
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(Racine invisible de notre arbre)
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.<meta name="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.<meta name="keywords" content="mot1 mot2 …"
/>
Dans DreamweaverDescription et Mots-clé Titre
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>
Organisation des fichiersd’un site Web
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)
Création d’un nouveau site avec Dreamweaver
Création d’un nouveau site avec Dreamweaver
Organisation des fichiersCréer des répertoires pour :
Les images
Les styles
Éventuellement pour l’arborescence du site si celui-ci est massif
Arborescence des fichiers
Concrètement ça donne quoi?
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" />
Et pour les hyperliens?
Et pour les hyperliens?Comme pour les images, il est important de
laisser le chemin relatif au document.
<a href="menu1.html">Menu1</a>
Les structures de page Web
On va apprendre un nouvel élément HTML!
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>
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>
<img src="images/image1.png" width="267" height="345" alt="Image" />
<img src="images/image2.png" width="395" height="59" alt="image2" />
</p></div>
Atelier
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.
Des questions???
Merci de votre attention!
A la semaine prochaine!
gregory.petit@umontreal.cahttp://lrcm.com.umontreal.ca/greg/COM2580/