Your SlideShare is downloading. ×
0
Conception Web Avec Dreamweaver
Conception Web Avec Dreamweaver
Conception Web Avec Dreamweaver
Conception Web Avec Dreamweaver
Conception Web Avec Dreamweaver
Conception Web Avec Dreamweaver
Conception Web Avec Dreamweaver
Conception Web Avec Dreamweaver
Conception Web Avec Dreamweaver
Conception Web Avec Dreamweaver
Conception Web Avec Dreamweaver
Conception Web Avec Dreamweaver
Conception Web Avec Dreamweaver
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Conception Web Avec Dreamweaver

3,079

Published on

approche de la conception web

approche de la conception web

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,079
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. LA CONCEPTION WEB AVEC DREAMWEAVER Intervenant : David Jendrejeski
  • 2. Plan de l’intervention
    • Pré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
    • Le site 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 CSS
    • CSS
    • 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 images
    • JPEG, 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
    • Dans les normes du HTML et du XHTML, un DOCTYPE (contraction pour "Document Type Declaration") 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=“monnom@monsite.com&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 toolbar
    • 92 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.com
      • http://www.fotolia.com
  • 13. Données XML
    • Le contenu (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>

×