Mode d`emploi : traitement des images pour diffusion web
Contents
1. associer fen tre Insert object I Insert object Portail de la BIU de Montpellier Mozilla Firefox Objets associ s Images associ es C eded Contenu associ Hom Type 0 Bienvenue sur le site web de la Biblioth que interuniversitaire de Montpellier Documentation page Nouveau t l chargement jouter un objet existant Frapri t s Mom de la propri t Valeur Size medium 5j Alignment Centre Class aucun j Wie embed z Inline IC ottset fo limit 5 a cE E EE Ici du fait de manipulations pr c dentes la page en dition techniques_ingenierie cf capture d cran de la barre d outils ci dessus est d j associ e deux objets la page Bienvenue sur le site web cause d un lien entre pages et une image eded BIU Montpellier Service informatique 4 7 Cr le 18 03 2010 gestion __image_v1 doc La fonctionnalit Ajouter un objet existant permet de parcourir l arborescence du CMS et d aller chercher une image d j utilis e par ailleurs pour l ins rer dans la page en cours La fonctionnalit Nouveau t l chargement permet d ajouter un objet une image ext rieur pour enrichir le contenu du CMS Une nouvelle fen tre Insert object s ouvre Insert object Portail de la BIU de Montpellier Mozilla Firefox mi http han biu montpellier fr ezpublishiindex phpifrerlavout set dialog ezdhtolfinsertobiect 2696 00 T l chargez un fichier local2. BIU Montpellier Service informatique Mode d emploi traitement des images pour diffusion web OR E E E E E 1 2 Exemple 1 r cup ration et traitement d une vignette Aleph nnn00annnnnnnnnnnnnnnnnnnnnnnnnnnsnnnenennnnne 1 2 1 R cup ration de limage ns ssenenissenneensenessneensssncennosassen men ages eeesspens einen 1 2 2 Ouverture avec picresize suppression des bordures blanches ssssssesssrrrrrrrenssrrrrrrrresrrrnnn 1 2 3 Redimensionnement de l image sise 2 OA a de ee 2 3 Insertion d image dans les pages du CMS 4 3 1 Fa on rapide directement partir d une page en dition nnnnsnnsnennnneneesrrnntrrreesrrrnrrrressen nnn 4 1 Introduction Pour des raisons de rapidit d affichage et pour une gestion moins probl matique par le CMS les images mises en ligne sur le CMS doivent tre au format gif et assez l g res Nous conseillons d utiliser le webservice disponible sur http www picresize com pour traiter les images en fonction des pr conisations donn es ailleurs taille en pixel notamment Formats d entr e jpeg gif png bitmap formats de sortie idem Un tutoriel en anglais est disponible sur cette application ici http www youtube com watch v 2HoxQ9FJIp0 Rem description avec Firefox 2 Exemple 1 r cup ration et traitement d une vignette Aleph 2 1 R cup ration de l image Sur la liste de r sultat ouvrir la vignette de couverture sur amazon
3. Emplacement Automatiqu re min A E techniques ing nierie Fichier Parcourir Choisir comme emplacement la page qui s appelle ici techniques _ingenierie et pas le choix par d faut Automatique Donner un nom explicite l objet image c est le nom sous lequel cet objet apparaitra dans les menus d dition de la page Enfin r cup rer le fichier de l objet sur un emplacement local poste ou serveur Insert object Portail de la BIU de Montpellier Mozilla Firefox mi http ana biu montpellier fr ezpublishfindex phpifreflavout set dialog ezdhtnl insertobject 2596100 T l chargez un fichier local Emplacement techniques ingenierie Hom test telechargement Fichier WASID_BIUdoc_ser Parcourir OK permet de retrouver la fen tre initiale le nouveau fichier est maintenant visible il est de plus s lectionn cf bouton radio BIU Montpellier Service informatique 5 7 Cr le 18 03 2010 gestion image vi doc Insert object Portail de la BIU de Montpellier Mozilla Firefox jol x mi http Mana biu rrontpalli r fr ezpublishfindex phpifrelasout set dialog ezdhtmlfinsertobject 2896 01 Ve Choisissez partir des objets associ s ou t l chargez des fichiers locaux Objets associ s ages associ es o ce btn_delete_off C eded Contenu associ Hom Type T Bienvenue sur le site web de la Biblioth que interuniv
4. trombone du CMS qui est pr sente Deer JI i h nt l op er Biblioth que interuniversitaire de Montpellier Joel POLLI Accueil Se d connecter nez Ed ES Traduire de l EJ quel Editer Documentation page techniques_ingenierie Content in French France EU aires Title Obligatoire techniques ingenierie Body zl a Mmes lEn aana Four acc der aux sources S ldentifier puis naviguer dans le menu de gauche Les sources documentaires igue texte Wi thodologie de ma eutique texte teste W thodologie de texte texte olus texte texte BIU Montpellier Service informatique 717 Cr le 18 03 2010 gestion image vi doc
5. com en cliquant sur la vignette puis clic droit sur l image et Enregistrer l image sous Amazon fournit au format jpeg des images d environ 500 500 pixels 40 KB avec un nom barbare du genre 5111A4qhjdl SS500 jpg Vous noterez qu il y a un dans le nom de fichier cela perturbe les reconnaissances de format renommez le fichier Ici exemple couverture jpg 2 2 Ouverture avec picresize suppression des bordures blanches Sur http www picresize com chargez l image et cliquez sur Continue L image est charg e avec 4 fonctionnalit s de retouche La premi re tape permet de supprimer les bordures blanches en s lectionnant la zone conserver Il suffit de faire un clic gauche dans le coin sup rieur gauche de la zone conserver puis de d placer la souri vers le coin inf rieur droit un encart en pointill rouge suit la souri et faire un nouveau clic gauche Une fois la zone s lectionn e cliquez sur Crop selection la zone s lectionn e reste seule l cran BIU Montpellier Service informatique 1 7 Cr le 18 03 2010 gestion image vi doc Zone blanche T Select Ar SUpprimer How to Make selection Left Click on Upper Left corner of desired area on picture Then move your mouse to the Lower Right cer and you should see a dotted red box Finally Left Click again at the desired Lower Right corner to make the bos This preview does not reflect the actual image size and is u t
6. ersitaire de Montpellier Documentation page Mouseau t l chargement jouter un objet existant Propri t s Horn de la propri t aleur Alignment Centre Class xl ele Pl imaicitt Goteo Pour terminer l insertion c est la partie Propri t s de la fen tre qu il faut modifier Un seul param tre est utile dans notre cas l alignement En g n ral conserver l alignement par d faut Centre mais dans une case de tableau il peut tre utile d aligner une image droite et une gauche vignette nouvelles acquisitions des pages th matiques par exemple En cliquant sur ok l insertion est termin e BIU Montpellier Service informatique 6 7 Cr le 18 03 2010 gestion image vi doc Le DER DE EN LR E EU TRS STUNT RON SN RL MU Co OR LL i Joel FOLLE Se d connecter Accueil pez HB eS Traduire de E 3 E Editer Documentation page techniques_ingenierie Content in French France MX s Title Obligatoire techniques_ingenierie Body Norma Jel s z Z E Pour acc der aux sources S ldentifier puis naviguer dans le menu de gauche Les sources documentaires texte M thodologie de ma eutique teste terte M thodologie de texte texte plus texte terie texte texte Revues en ligne S lection de sites texte Ft Notez qu ici l image est effectivement affich e croix rouge Dans certains cas ou lors des ditions suivantes de la page c est simplement l ic ne
7. he Cropping feature only How to Remove a Selection Just Left Click anywhere on your picture to remove the box Crop Selection Button After you ve made a selection box click this button to instantly Crop your picture ne res Orthope dis Reeducation Original Button Rhumatologie Click this but SP 2 i mt la zone s lectionn e et conserv e par le Crop Crop Selection Orginal 2 3 Redimensionnement de l image Pour une insertion dans les pages th matiques la contrainte de taille porte sur la largeur de l image uniquement elle doit faire 75 pixels Dans la partie Choose new size s lectionnez custom size bouton radio et saisir 75 pixel pour width Ne rien mettre dans Height le redimensionnement respectera les proportions Le Up OCTO I LATIL Choose New Size Width Height Make my picture C 75 smaller C 50 smaller oR Custom Size width 75 Pixels Height Optional Percent 2 4 Format En bas de l cran choisir le format GIF et Resize Pic sans appliquer d effet particulier sp ce GIF Resize Pic Un cran donne le statut du traitement normalement success et permet une preview ou l acc s quelques outils suppl mentaires d dition Choisir directement Save to disk Le fichier obtenu le m me nom que le fichier initial suffix par rsz _ Vous pouvez v rifier les caract ristiques g n rales de l image obtenu avec
8. un clic droit sur l image dans l explorateur de document Windows L onglet R sum donne notamment la taille de la largeur et de la hauteur BIU Montpellier Service informatique 2 7 Cr le 18 03 2010 gestion image vi doc avail_visu doc erreur _cor 75 pixels 109 pixels Ci Largeur E Hauteur C R solution horizontale 96 ppp C R solution verticale d ppp C Profondeur de couleur amp CJ Hombre de trames 1 E T TI Cu tion de message jointe H HE EH 2 lt il E richterext gif rsz_35100 H HHA Appliquer Div Movies E BIU Montpellier Service informatique 3 7 Cr le 18 03 2010 gestion __image_v1 doc 3 Insertion d image dans les pages du CMS Principe g n ral pour les images ou d autres types de documents un objet est toujours d pos sur le CMS quelque part puis associ ins rer un emplacement au sein d une page 3 1 Fa on rapide directement partir d une page en dition En dition sur une page la barre d outils permet l insertion d objet ic ne trombone Title Obligatoire techniques ing nierie Body LE OO n BBEE IPS aa m1 Placez le curseur l endroit voulu dans nos syst mes de mise en page c est tr s souvent dans une case de tableau puis cliquez sur le trombone pour ins rer l objet voulu image dans ce cas On a alors le choix entre associer un objet pr existant ou ajouter un nouvel objet
Download Pdf Manuals
Related Search