Scribd Logo
Importer

Bienvenue sur Scribd !

  • TP 1 Ter PHP

    Transféré par

    Babacar Sakho
    25 vues7 pages

    Titre original

    tp1terPHP

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    25 vues7 pages

    TP 1 Ter PHP

    Transféré par

    Babacar Sakho

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 7

    Un peu de CSS3

    Il est possible dutiliser certaines proprits CSS3 ds aujourdhui 1 . CSS3 permet entre autre de ee e grer certains eets interactifs ` la place de technologies plus lourdes telles que Flash et JavaScript. e a Dans cette tude, nous ciblerons en particulier les proprits suivantes qui peuvent savrer tre tr`s e ee e e e utiles : border-radius : arrondit les coins dun lment selon un rayon spci ; ee e e text-shadow : ajoute une ombre ` du texte ; a box-shadow : ajoute une ombre ` un lment ; a ee Images darri`re-plan multiples avec background ; e opacity : dnit lopacit dun lment ; 1 pour compl`tement opaque et 0 pour compl`tement e e ee e e transparent ; rgba : nouveau mod`le de couleur permettant de spcier un niveau dopacit ; e e e transition : permet au changement dune proprit CSS de se produire progressivement sur ee une dure spcie ; e e e transform : permet de modier certaines caractristiques des lments avec scale, rotate, e ee skew et translate. La plupart de ces proprits seront reconnues par : ee 3.2+ 3+ 3.6+ 10.5+ 9+ Pour en savoir plus sur ces proprits et leurs arguments, voir par exemple http://www.w3schools. ee com/css3/default.asp Nous allons exprimenter avec une page web telle que celle ache sur la page suivante, et struce e ture comme indique par le code source HTML qui suit. e e
    1. Le sujet de ce TP est bas sur les lments du livre CSS3 pour les Web designers par Dan Cederholm chez e ee Eyrolles (12 euros).


    <? xml v e r s i o n= 1 . 0 e n c o d i n g=UTF8 ?> < !D C Y E html PUBLIC //W3C//DTD XHTML 1 . 0 S t r i c t //EN h t t p : / /www. w3 . o r g /TR/ O T P xhtml1 /DTD/ xhtml1 s t r i c t . dtd > <html xmlns= h t t p : / /www. w3 . o r g /1999/ xhtml xml : lang= f r lang= f r > <head> <t i t l e>Shadoks</ t i t l e> <meta httpe q u i v= c o n t e n t type content= t e x t / html ; c h a r s e t=u t f 8 /> <l i n k type= t e x t / c s s r e l= s t y l e s h e e t href= shadoks . c s s /> </head> <body> <div id= h e a d e r > <img src=img/ shadoks . png width= 320 a l t= l o g o Shadoks /> <img src=img/ d e v i s e S h a d o k s . png a l t= d e v i s e Shadoks /> <ul id= nav > < l i><a href=#>S e c r e t s</a></ l i> < l i><a href=#>Formules</a></ l i> < l i><a href=#>D e v i s e s</a></ l i> < l i><a href=#>I n v e n t i o n s</a></ l i> < l i><a href=#>P r o j e t s</a></ l i>

    </ ul> </ div> <p> C t a i t i l y a t r ` s , t r ` s , t r ` s longtemps . En c e tempsl ` , i l y a v a i t . . . l e e e e e a c i e l . A d r o i t e du c i e l , i l y a v a i t l a p l a n ` t e GIBI ; e l l e t a i t e e compl` tement p l a t e , e t e l l e p e n c h a i t , s o i t d un c o t , s o i t de l a u t r e . A e e gauche du c i e l , i l y a v a i t l a p l a n ` t e SHADOK; e l l e n a v a i t pas de forme e s p c i a l e . . . ou p l u t o t . . . e l l e c h a n g e a i t de forme . Au m i l i e u du c i e l , i l y e a v a i t l a TERRE, q u i t a i t ronde e t q u i b o u g e a i t . Sur l a Terre , i l n y e a v a i t apparemment r i e n . Les Shadoks e t l e s G i b i s en e u r e n t donc a s s e z , au bout d un c e r t a i n temps , de v i v r e s u r d e s p l a n ` t e s q u i ne m a r c h a i e n t pas e b i e n . A l o r s i l s d c i d` r e n t , l e s uns e t l e s a u t r e s , d a l l e r s u r l a T e r r e e e q u i a v a i t l a i r de mieux marcher . Pour a l l e r s u r l a Terre , l e s G i b i s ont c o n s t r u i t une f u s e . E l l e f o n c t i o n n e g r a c e a un c o m b u s t i b l e super p u i s s a n t e ` , l e COSMOGOL 9 9 9 . </p> <p> En f a i t , l e u r f u s e n t a i t pas t r ` s , t r ` s au p o i n t , mais i l s a v a i e n t c a l c u l e e e e e qu e l l e a v a i t quand mme UNE CHANCE SUR 1 MILLION DE MARCHER. Et i l s s e e d e p c h a i e n t de b i e n r a t e r l e s 999 999 p r e m i e r s e s s a i s pour t r e s u r s que e e l e m i l l i o n i ` m e marche . Les e s s a i s de f u s e shadok c o m p o r t a i e n t p l u s i e u r s e e p h a s e s . D abord , l e s t e c h n i c i e n s shadoks e n t o n n e n t l e compte a r e b o u r s s u r ` un v i e i l a i r d a c c o r d o n . P u i s l e s Shadoks l e s p l u s dou s pour l e s e e math matiques e n f o u r c h e n t l e u r o r d i n a t e u r a p d a l e s pour c a l c u l e r l a e ` e t r a j e c t o i r e . C t a i e n t eux q u i a v a i e n t l e p l u s de mal c a r l e s Shadoks e a v a i e n t entendu d i r e que p l u s un o r d i n a t e u r va v i t e , p l u s i l donne de bons r s u l t a t s . Et c e s t c e l u i q u i a v a i t gagn q u i a v a i t t r o u v l a bonne e e e t r a j e c t o i r e . On p r o c d a i t a l o r s a l a mise ` f e u . Ca r a t a i t . Et a u s s i t t e ` a o a p r` s , on recommen ait . Car t e l t a i t l e p r e m i e r p r i n c i p e de b a s e de l a e c e l o g i q u e shadok : En e s s a y a n t c o n t i n u e l l e m e n t , on f i n i t par r u s s i r . Donc : e p l u s c a r a t e , p l u s on a de chance que c a marche . </p> <form action= / method= p o s t id= idForm > <f i e l d s e t> <legend>Devenez un Shadok</ legend> <l a b e l f o r=idNom>Votre Nom</ l a b e l> <input type= t e x t id=idNom /> <l a b e l f o r= i d E m a i l >Votre Email</ l a b e l> <input type= t e x t id= i d E m a i l /> <br /> <br /> <input type= submit value= S o u s c r i v e z /> </ f i e l d s e t> </form> <div id= f o o t e r > <p> Shadok s s i t e . C o p y r ig h t 2 0 1 1 .</p> <ul> < l i><a href=#><img src=img/ l o g o sb . png a l t= l o g o sb /></a></ l i> < l i><a href=#><img src=img/ l o g o f e e d . png a l t= l o g o f e e d /></a></ l i> < l i><a href=#><img src=img/ l o g o bitman . png a l t= l o g o bitMan /></a></ l i> </ ul> </ div> < ! / f o o t e r > </body> </html>

    Exercice
    1. Crer le chier menu.html avec le contenu donn ci-dessus. e e 2. Crer le chier menu.css avec 3 r`gles telles que : e e

    pour le slecteur body, on xe la largeur ` 900px, la marge ` 0 auto, la couleur de fond ` e a a a gris. pour le slecteur #nav, on xe le padding ` 25px et lalignement du texte ` centr e a a e pour le slecteur #nav li, on change le mode dachage ` inline et la marge avec des valeurs e a satisfaisantes 3. Ajouter les r`gles e #nav li a { padding: 5px 10px; font-weight: bold; color: rgba(255,255,255,0.7); } #nav li a:hover { background: rgba(255,255,255,0.15); } Essayer direntes valeurs pour lopacit (quatri`me param`tre compris entre 0 et 1) Et si le e e e e navigateur ne supporte pas rgba, que doit-on prvoir ? e 4. Ajouter au slecteur #nav li a e text-shadow: 1px 1px 1px black; Essayer direntes valeurs. e 5. Ajouter au slecteur #nav li a e -webkit-border-radius : 14px; -moz-border-radius : 14px; -o-border-radius : 14px; border-radius : 14px; Essayer direntes valeurs. e 6. Ajouter au slecteur #nav li a e -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; Essayer direntes valeurs. e 7. Pourquoi y-a-t-il plusieurs proprits de transition ? Que signie all ? Y-a-t-il moyen de remee placer all par quelque chose dautre ici ? 8. Ajouter au chier menu.css 2 r`gles telles que : e pour le slecteur #footer, on xe le padding ` 25px, lalignement du texte ` centr et la e a a e couleur ` blanche. a pour le slecteur #footer li, on change le mode dachage ` inline et la marge avec des e a valeurs satisfaisantes 9. Ajouter le slecteur e #footer a img { opacity:0.25; } Essayer direntes valeurs. e 10. Ajouter la r`gle : e

    #footer a:hover img { opacity:0.75; } Tester et noter lintrt de la proprit : nous navons besoin que dun seul jeu dimages ee ee 11. Pour avoir un fondu, ajouter ce qui suit au slecteur #footer a img e -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; 12. Maintenant, essayons de jouer avec les ombres en ajoutant au slecteur #footer a:hover img e ce qui suit : -webkit-box-shadow:4px 4px 10px black; -moz-box-shadow:4px 4px 10px black); -o-box-shadow:4px 4px 10px black; box-shadow:4px 4px 10px black; 13. Et maintenant ajouter au slecteur #footer a:hover img ce qui suit : e -webkit-transform:scale(1.5); -moz-transform:scale(1.5); -o-transform:scale(1.5); transform:scale(1.5); Tester. Le changement dchelle est judicieux si la qualit de limage ache ne sen ressent pas. e e e Avez-vous not lintrt ici : un seul jeu dimages est ncessaire. e ee e 14. Modier le code prcdent an ajoutant une instruction de rotation comme par exemple : e e -webkit-transform:scale(1.5) rotate(-10deg) ; -moz-transform:scale(1.5) rotate(-10deg) ; -o-transform:scale(1.5) rotate(-10deg); transform:scale(1.5) rotate(-10deg); Tester. Essayer galement de jouer avec skew et translate e 15. Maintenant, essayer dajouter au slecteur body ceci : e background: url(img/stars-1.png) repeat fixed -130\% 0, url(img/stars-2.png) repeat-x fixed 40\% 0, url(img/space-bg.png) repeat-x fixed -80\% 0, url(img/clouds.png) repeat-x fixed 100\% 0; Il sagit ici de 4 images (PNG semi-transparentes) qui vont se superposer. La premi`re image e est celle la plus proche de lutilisateur. Essayer direntes combinaisons dimages en arri`re-plan e e (par exemple, en nutilisant que les deux premi`res ci-dessus). e 16. On ajoute les 3 r`gles suivantes par rapport au formulaire : e #idForm { width: 300px; margin: 0 auto; } #idForm input { margin: 0 0 10px 0; } #idForm label { 5

    display: block; font-weight: bold; line-height: 1.4; color: #666; color: rgba(0,0,0,.6); text-shadow: 0 1px 1px #fff; } 17. On ne souhaite pas cette marge de 10px apr`s le dernier lment input. Aussi ajoute-t-on ceci e ee en utilisant ` la nouvelle pseudo-classe :last-child a #idForm input:last-child { margin: 0px; } 18. Ajouter la r`gle suivante et dterminez le rle de chaque proprit. e e o ee #idForm input[type="text"] { width: 215px; padding: 5px 8px; font-family: Helvetica, sans-serif; font-size: 1.2em; color: #666; border: none; background-color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } 19. Pour jouer avec des dgrads, ajouter ` la derni`re r`gle : e e a e e background-image: -webkit-gradient(linear, 0% 0%, 0% 12%, from(#999), to(#fff)); background-image: -moz-linear-gradient(0% 12% 90deg, #fff, #999); 20. Pour aner le rendu du bouton, on ajoute la r`gle suivante : e #idForm input[type="submit"] { padding: 8px 15px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; line-height: 1; color: #444; border: none; background-color: #fff; -webkit-border-radius: 23px; -moz-border-radius: 23px; -o-border-radius: 23px; border-radius: 23px; text-shadow: 0 1px 1px rgba(255,255,255,.85); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb)); background-image: -moz-linear-gradient(0% 100% 90deg, #bbb, #fff); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5); -o-box-shadow: 0 1px 2px rgba(0,0,0,.5); 6

    box-shadow: 0 1px 2px rgba(0,0,0,.5); } Dterminer le rle de chaque proprit. e o ee 21. Pour nir, un petit eet lorsque quun lment prend le focus : ee #idForm input[type="text"]:focus { -webkit-box-shadow: 0 0 12px rgba(51,204,255,0.5); -moz-box-shadow: 0 0 12px rgba(51,204,255,0.5); -o-box-shadow: 0 0 12px rgba(51,204,255,0.5); box-shadow: 0 0 12px rgba(51,204,255,0.5); }

    Vous aimerez peut-être aussi