Conception Web Avec Dreamweaver

Conception Web Avec Dreamweaver

• 1.
  LA CONCEPTION WEBAVEC DREAMWEAVER Intervenant : David Jendrejeski
• 2.
  Plan de l’interventionPrésentation du cours Module 1 : Les fondamentaux de la conception web Les principes du HTML Les palettes d’outils Création de page HTML et propriétés Gestion du texte dans Dreamweaver Le définition d’un site La gestion des fichiers dans Dreamweaver La gestion des liens (ancres, mailto, hypertexte) Module 2 : conception en tableaux La gestion des tableaux L’intégration d’images et d’arrières plans Poids et types de fichiers Les propriétés de mise en pages des images Module 3 : Gestion des modèles Les cadres et la gestion des frames Présentation des calques Initiation aux css et feuilles de styles Initiation à l’accessibilité et au référencement Module 4 : ergonomie et architecture Les formulaires La bibliothèque Publier et gérer un site avec le ftp Le découpage de cartes images Initiation aux comportements avancés Module 6 : outils complexes L’intégration des médias dans Dreamweaver Les outils de validation dans Dreamweaver Réaliser une newsletter
• 3.
  Présentation Macromedia Dreamweaver(1997 ) est un éditeur de site web de type WYSIWYG : What You See Is What You Get ( ce que vous voyez est ce que vous obtenez). Il a été précédé par Golive. Les dernières versions : Dreamweaver MX (Sortie en Mai 2002) Dreamweaver MX 2004 (Sortie en septembre 2003) Dreamweaver 8 (Sortie le 28 septembre 2005) Dreamweaver CS3 (Sortie juillet 2007) Il offre deux modes de conception (code et visuel)
• 4.
  Liens utiles Lesite officiel : http://www.adobe.com/products/dreamweaver/ Exchange (US) http://www.adobe.com/cfusion/exchange/index.cfm?event=productHome&exc=3&loc=en_us Le html http://www.startyourdev.com/HTML/Index.html Couleurs http://www.colorschemer.com/online.html Lorem ipsum http://www.adobe.com/cfusion/exchange/index.cfm?searchfield=lorem+ipsum&search_exchange=3&search_license=&search_rating=&search_pubdate=&Submit=Search&num=25&startnum=1&event=search http://fr.wikipedia.org/wiki/Faux-texte http://www.adobe.com/cfusion/exchange/index.cfm?event=dl&extid=800287
• 5.
  Liens utiles CSSCSS http://css.alsacreations.com/ http://pompage.net/pompe/cssdezero-2/ Openweb http://openweb.eu.org/articles/dimensions_boites_css/
• 6.
  Les couleurs Un triplet hexadécimal est un nombre hexadécimal à 6 chiffre mémorisé sur trois octets utilisé en HTML. Un octet représente au moins l'intervalle entre 00 et FF (en notation hexadécimal), ou 0 à 255 en notation décimale. Les safe web : un ensemble de 216 couleurs
• 7.
  Les fichiers imagesJPEG, crée en 1987. format « à perte » qui élimine des informations mais un des points forts de JPEG est que son taux de compression est réglable. GIF a été mis au point par CompuServe en 1986, sous licence remplaçant BMP. Possibilité d’animation PNG (w3C) : moins de perte, gère la transparence 1 bit donc monochrome (mais pas forcément noir et blanc) 2 bits pour les images en quadrichromie 4 bits permettant de choisir parmi une palette de maximum 16 couleurs contenues dans le fichier 8 bits en niveaux de gris (256 niveaux) 8 bits permettant de choisir parmi une palette de maximum 256 couleurs contenues dans le fichier (équivalent au format GIF) 24 bits en 16 777 216 ( couleurs vraies ) 48 bits, soit 2 48 ou 281 474 976 710 656 couleurs.
• 8.
  Les doctypes Dansles normes du HTML et du XHTML, un DOCTYPE (contraction pour &quot;Document Type Declaration&quot;) informe le validateur de la version de (X)HTML que vous utilisez, et doit apparaitre en première position dans chaque page web. Les DOCTYPEs sont des composants primordiaux pour les pages conformes aux normes : ni votre balisage ni vos CSS ne passeront une validation sans DOCTYPE. HTML 4.01 Strict, Transitional, Frameset <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> XHTML 1.0 Strict, Transitional, Frameset <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> XHTML 1.1 DTD <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.1//EN&quot; &quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&quot;> Voir aussi : http://www.w3.org/QA/2002/04/valid-dtd-list.html
• 9.
  Les balises META<TITLE>Titre de la  Page</TITLE> <META NAME=&quot;Author&quot; LANG=&quot;fr&quot; CONTENT=&quot;PRENOM NOM&quot;> <META NAME=&quot;Description&quot; CONTENT=&quot;Tapez ici en quelques phrases la description de votre site&quot;> <META NAME=&quot;Keywords&quot; LANG=&quot;fr&quot; CONTENT=&quot;Tapez ici vos mots clés (espacés d'une virgule) qui correspondent le mieux à votre site&quot;>  <META NAME=&quot;Identifier-URL&quot; CONTENT=&quot; http://www.MMT-Fr.com&quot; > <META NAME=&quot;Reply-to&quot; CONTENT=“[email protected]&quot;> <META NAME=&quot;Generator&quot; CONTENT=“dreamweaver,Xpress,...&quot;> <META NAME=&quot;Copyright&quot; CONTENT=&quot;COPYRIGHT.... &quot;>   <META NAME=&quot;robots&quot; CONTENT=&quot;attribut 1, attribut 2...&quot;> All :          Le robot indexe tout (par défaut).  None :      Stoppe le robot.  Index :     Votre page est indexée.  Noindex :  Votre page n'est pas indexée mais il suivra les liens de cette page.  Follow :    Le robot récupère les liens de votre page pour les référencer plus tard.  Nofollow : Le robot ne récupère pas les liens de votre page.  <META NAME=&quot;revisit&quot; CONTENT=&quot;7 days&quot;>
• 10.
  ROBOTS.TXT User-Agent: * Disallow: / User-Agent: NomDuRobot Disallow: / User-Agent: * Disallow: User-Agent: * Disallow: /repertoire/chemin/page.html
• 11.
  accessibilité developer toolbar92 points de validations http://www.accessiweb.org/fr/Label_Accessibilite/criteres_accessiweb/correspondance_accessiweb_wcag10/ Les bonnes pratiques http://www.opquast.org/atelier/index.php/Special:ToutLAtelier
• 12.
  Ressources Images http://www.gettyimages.comhttp://www.fotolia.com …
• 13.
  Données XML Lecontenu (les données XML) et la présentation (définie par le fichier XSL) sont entièrement séparés. <?xml version=“1.0”> <mybooks> <book bookid=“1”> <pubdate>03/01/2004</pubdate> <title>Displaying XML Data with Adobe Dreamweaver</title> <author>Charles Brown</author> </book> <book bookid=“2”> <pubdate>04/08/2004</pubdate> <title>Understanding XML</title> <author>John Thompson</author> </book> </mybooks>