COURS DE WEB DESIGN - Le blog de Helmut - Ivoire Blog

More documents

Recommendations

Info

La balise est celle qui concerne la police. L’utilisation de l'attribut face permet de préciser une liste de polices. Voici par exemple comment attribuer les polices Futura, Arial et Helvetica au texte "Fin du cours de webdesign" : Fin du cours de Webdesign 3- GIF OU JPEG ? GIF et JPEG, Définition : Les formats GIF et JPEG sont deux formats de fichiers d'images au même titre que TIFF, PICT, BMP et autres dont vous avez certainement déjà entendu parler. Si les formats GIF et JPEG sont si populaires c'est surtout parce qu'ils sont les deux formats standards pour Internet. En d'autres termes, pour placer des images sur vos pages Web il faut qu'elles aient été sauvegardées soit au format GIF ou soit au format JPEG ... Pourquoi GIF et JPEG : L'un des soucis premiers du webmaster est de réussir le difficile équilibre entre un site au graphisme alléchant et un temps de chargement supportable pour les internautes. Les formats GIF et JPEG sont intéressants parce qu'ils permettent de réduire considérablement la taille (en kilo-octets) des images. Même avec la généralisiation de l'adsl, il faut faire attention au poids des images et procèder à leur compression en les mettants en GIF ou JPEG. Le Format GIF : Le format GIF est un format qui utilise une compression sans perte de qualité. Les images au format GIF peuvent contenir un maximum de 256 couleurs, ce qui rend ce format peu adapté pour les photographies, les images nuancées et les dégradés. Par contre ce format donne d'excellents résultats pour les images avec un petit nombre de couleurs, les logos, les formes géométriques, boutons etc... Le format GIF supporte la transparence et il permet également de créer des animations : Les Gifs Animés. L'option d'entrelacement permet d'afficher l'image progressivement, l'image étant flou au début du chargement et devenant de plus en plus précise. Le Format JPEG : JPEG (Joint Photographic Experts Group) est une alternative à GIF. Ce format de compression est très efficace mais entraîne une perte de qualité. Plus l'image est compressée, plus la qualité de l'image diminue. Il convient donc de trouver un compromis permettant un chargement rapide tout en gardant une qualité acceptable. Les logiciels graphiques permettent de régler le facteur de compression qui va de 1 à 99. Le format JPEG est particulièrement adapté et recommandé pour les images de type Photographies, il peut supporter en effet 16.7 millions de couleurs et donne un bon rendu pour les images nuancées et les dégradés. Le format JPEG ne supporte pas la transparence et ne permet pas de créer des animations. GIF ou JPEG ? Il n'y pas de réponse absolue même si dans certains cas le choix de l'un ou de l'autre des formats s'impose comme une évidence. C'est à vous de voir quel est le meilleur rendu avec le poids le faible possible. Le formt PNG De l’anglais : Portable Network Graphic. Format de fichiers graphiques. Un candidat à la sucession du format GIF, plus complet, il est capable de contenir des tracés vectoriels plus légers et indépendants de la taille en pixels du fichier, et surtout la transparence. Ce format existe depuis quelques années déjà, peut être affiché par les dernières versions d’internet explorer et netscape, mais est bizarrement peu employé sur internet. Il est pourtant en open source, c’est à dire que son utilisation n’est pas protégée par un brevet, tous les programmeurs peuvent donc l’utiliser sans payer des droits de licence. Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 4
DREAMWEAVER 1-PRESENTATION GENERALE DE DREAMWEAVER Dreamweaver est l'éditeur HTML par excellence. Non seulement il est WYSIWYG (What You See Is What You Get, utilisable comme un traitement de texte), mais en plus : • il rédige un code HTML économique (pas de code inutile pour alléger la page) • il utilise le HTML à 100% (ce qui n'est pas le cas de Front Page qui possède ses composants propres) • l'affichage sous Netscape et Internet Explorer est plus fiable. (Front Page est essentiellement optimisé pour Internet Explorer) Vous pouvez télécharger une version d'évaluation sur le site de Macromedia Voici un aperçu des différentes fonctionnalités de Dreamweaver : • les modèles : changez l'apparence de l'intégralité de votre site en quelques clics. • La bibliothèque : Certaines icônes (contact, forum ou autre) reviennent souvent, faites-en un élément de la bibliothèques, vous pourrez alors l'ajouter en 1 Clic à vos pages. • Vérification des liens (indispensable pour éviter les erreurs de lien) • Vous voulez changer tous les liens qui pointent vers X vers Y. Pas de problème. Dreamweaver le fait automatiquement en 2 coups de clics. • Comme dans Front Page, Dreamweaver vous propose une arborescence de votre site. • Possibilité de vérifier la compatibilité de la page avec différents navigateurs • ... 2- LA MISE EN PAGE AVEC DREAMWEAVER Pour que l'affichage soit compatible avec les 2 principaux navigateurs, un seul moyen : les tables. Il est vrai que Dreamweaver gère les calques admirablement mais l'affichage sous Netscape peut s'avérer extrêmement capricieux. Je ne vous le conseille donc pas. Comment faire votre première table ? Créez un nouveau document (Control - N ou menu Fichier >> Nouveau fichier). Menu : Insertion Tableau (touche de raccourci : Control - ALT - T) Vous arrivez sur cette fenêtre : Vous allez définir les grandes lignes de votre table avec cette boîte de dialogue. Inscrivez simplement le nombre de lignes et de colonnes. L'aspect de la table est modifiable après via les propriétés de la table. Les propriétés de la table Exemple de table en mode rédaction au sein de DW : Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 5
Page 1 and 2: 3131 NIVEAU : DEBUTANT NOM : PRENOM
Page 3: La signification des couleurs : Rou
Page 7 and 8: Voici un schéma qui explique les d
Page 9 and 10: Pour ajouter cliquez sur + (plus) ,
Page 11 and 12: Répertoire hôte : si votre réper
Page 13 and 14: Dans le cas de site comportant beau
Page 15 and 16: 2/ Faire une image survolée (rollo
Page 17 and 18: Remarque concernant votre fond de p
Page 19 and 20: 3. Attacher une feuille de style ex
Page 21 and 22: CREER SON SITE DE A A Z AVEC DREAMW
Page 23 and 24: Cliquez alors sur suivant. Dans la
Page 25 and 26: Faites ensuite OK puis Appliquer. E
Page 27 and 28: Vous avait avec ceci un tableu cent
Page 29 and 30: Cela devrait vous donnez ceci ( uti
Page 31: Cliquez sur l'icone en forme de cib

COURS DE WEB DESIGN - Le blog de Helmut - Ivoire Blog

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?