Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015)

Dimension: px

Commencer à balayer dès la page:

Download "Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015)"

Sylvie Savard
il y a 10 ans
Total affichages :

1 Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015) Conception de Sites Web Dynamiques : TD 2 HTML5 statique, feuille de style CSS, Mise en page, Framework Bootstrap Exercice 2.1 Document XHTML statique avec feuille de style CSS Dans cet exercice, vous allez établir un document XHTML qui utilise une feuille de style CSS. Si vous ne l avez pas encore fait, dans vos documents personnels, créer un dossier cswd. Dans ce dossier cswd, créer un sous-dossier td2. 1. Ouvrir Notepad++, créer un nouveau fichier dans votre dossier cswd/td2 s appelant index.html. Si vous avez réussi le dernier TD, reprenez vos 4 fichiers du dernier TD, et copiez-les dans le dossier cswd/td2. Faites les 30 changements suivants, dans chacune des 4 pages : Encapsulez le contenu qui ne se trouve ni dans la balise footer, ni dans la balise header, dans une balise section. Créer une balise div avec une propriété id qui a la valeur tout. Vérifiez que la balise nav se trouve bien après la balise header, et non pas dedans. L organisation de chacun de vos 4 fichiers sera donc : <!DOCTYPE html> <html lang="fr"> <head>... </head> <body> </html> <div id="tout"> </div> </body> <header>... </header> <nav>... </nav> <section>... </section> <aside>... </aside> <footer>... </footer>

Si vous ne l avez pas encore fait, dans vos documents personnels, créer un dossier cswd. Dans ce dossier cswd, créer un sous-dossier td2. 1.

2 Vous devriez donc avoir une solution similaire que la suivante : <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" /> <title> Page d accueil de Mika Pernot </title> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> </html> <div id="tout"> <header> <h1>site de Mika Pernot.</h1> <p>découvrez.</p> </header> <nav> <ul> <li><a href="index.html">accueil</a></li> <li><a href="cv.html">cv</a></li> <li><a href="favoris.html">favoris</a></li> </nav> <section> <p>bienvenu sur le site de (entrez un nom). Ici, vous allez trouver mon CV, mes favoris sur le web, et d autres informations. <a href="cv.html">vous pouvez également consu <ul> <li><em>30/01/2015</em> Je crée mon premier site Internet!</li> <li><em>06/01/2015</em> Avec mon équipe de volley, on a gagné le tournoi de St. Nicolas.</l <li><em>01/01/2014</em> J étudie désormais à l Université Bordeaux qui a été créé ce jour.< </section> <footer> <p>ce site a été créé par Mika Parnot dans le cadre du cours "Conception de sites webs dynamiqu </footer> </div> </body> 2. Ouvrir un navigateur, par exemple Firefox, et dans le Menu Fichier - Ouvrir un fichier, ouvrez votre fichier index.html du dossier cswd/td2 dans vos documents personnels. 3. Rajouter une nouvelle balise aside dans le corps de votre page, après votre section : 2

css" /> </head> <body> </html> <div id="tout"> <header> <h1>site de Mika Pernot.</h1> <p>découvrez.</p> </header> <nav> <ul> <li><a href="index.html">accueil</a></li> <li><a href="cv.

3 <aside> <p>mes loisirs :</p> <ul> <li>volley</li> <li>informatique</li> <li>voyages</li> </aside> 4. Rajouter les lignes suivantes dans un nouveau article de votre section : <h1>feuilles de styles</h1> <p>un paragraphe par defaut. </p> <p class="famille">un paragraphe de la classe famille. </p> <p class="famille">un autre paragraphe de la classe famille. </p> <p id="unique">un unique paragraphe</p> 5. Créer un nouveau dossier cswd/td2/css dans vos documents. 6. Avec Notepad++, créer votre première feuille de style style.css et sauvegarder le dans ce dossier cswd/td2/css. Taper le code suivant : /* A tous les éléments de la page */ /* s applique partout par défaut */ body font-family: verdana; color: black; /* A toutes les instances d un élément */ /* s applique à <h1>titre</h1> */ h1 color: #000000; text-align: center; background-color: #CCCCCC; /* A toutes les instances d un élément */ /* s applique à <p>paragraphe</p> */ p color: #CCCCCC; text-align: left; 3

</p> <p class="famille">un autre paragraphe de la classe famille. </p> <p id="unique">un unique paragraphe</p> 5. Créer un nouveau dossier cswd/td2/css dans vos documents. 6.

4 /* A certaines instances d un élément */ /* s applique à <p class="famille">ici</p> */ p.famille color: #008000; /* s applique à une instance unique d un élément */ /* s applique à <p id="unique">ici</p> */ p#unique color: #0080FF; text-align: center; 7. Pour utiliser la feuille de style, il faut rajouter la ligne suivante dans l en-tete de la page index.html (entre le <head> et </head>) <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> Exercice 2.2 Outils de développement Web Dans cette exercice, nous allons installer deux outils de développement Web qui sont disponible sous la forme des extensions pour votre navigateur Mozilla Firefox. 1. Installer l extension ColorZilla. Pour ce faire, utilisez le navigateur Mozilla Firefox, et rendez vous à la page suivante : Experimentez. 4

Pour utiliser la feuille de style, il faut rajouter la ligne suivante dans l en-tete de la page index.html (entre le <head> et </head>) <link href="css/style.

5 Exercice 2.3 Menu 1. Changez votre barre de navigation en : <nav> <ul class="menu"> <li class="menuitem"><a href="index.html">accueil</a></li> <li class="menuitem"><a href="cv.html">cv</a></li> <li class="menuitem"><a href="favoris.html">favoris</a></li> </nav> 2. Dans votre feuille de style, rajoutez le code suivant et visualisez le résultat : ul.menu list-style-type: none; margin: 10px; padding: 0px; 3. Vous pouvez aussi mettre le menu horizontale. Rajoutez le code suivant et visualisez le résultat : ul.menu li.menuitem display:inline; 4. Dans le sélecteur ul.menu li.menuitem, mettez une couleur de fond de votre choix, comme par exemple background-color: lightblue;. Afin de gérer au mieux les marges intérieurs, rajoutez padding-top: 10px; padding-bottom: 10px;. 5. Changez la couleur de votre lien, sans l avoir en italique : ul.menu li.menuitem a color: blue; padding: 10px; text-decoration: none; 6. Au survol de votre lien, rajouter le pseudo-sélecteurs :hover suivant : ul.menu li.menuitem a:hover padding: 10px; background-color: blue; color: white; 7. Changez la barre de navigation dans chacun de vos 4 fichiers, afin d avoir un aperçu cohérent. 5

menu list-style-type: none; margin: 10px; padding: 0px; 3. Vous pouvez aussi mettre le menu horizontale. Rajoutez le code suivant et visualisez le résultat : ul.menu li.menuitem display:inline; 4.

6 Exercice 2.4 CSS Reengineering Dans cette exercice, on veut reproduire les élements suivants : un titre <h1>, un sous-titre <h2>, et une table : 1. Faite la reproduction avec votre table dans le fichier cv.html (avec nom, prénom, etc.). 2. Vérifier votre fichier CSS avec le validateur CSS : Exercice 2.5 CSS Pseudo-classes 1. Rajouter un lien hypertexte dans un des paragraphes de votre document. 2. Utiliser le concept des CSS pseudo class a:link color: red /* lien non-visité */ a:visited color: blue /* lien visité */ a:hover color: yellow /* lien survolé */ a:active color: lime /* lien activé */ Exercice 2.6 Mise en page 1. Rajouter à votre fichier CSS style.css le code suivant. section border: 2px solid black; display: inline-block; vertical-align: top; width: 600px; aside border: 1px solid black; display: inline-block; vertical-align: top; 2. Expérimenter pour trouver une jolie mise en page. Afin de connaitre les possibilités avec les feuilles CSS, tester quelques exemples du site suivant : 6

5 CSS Pseudo-classes 1. Rajouter un lien hypertexte dans un des paragraphes de votre document. 2.

7 Exercice 2.7 Framework Bootstrap Bootstrap est un framework 1 CSS (et Javascript) dévéloppé par Twitter. Il vous permet facilement de créer des mise en forme qui ont un air proféssionel. De plus, vous pouvez créer des grilles de mise en forme permettant de créer des site web adaptatif (responsive web design) offrant au visiteur une expérience de consultation optimale facilitant la lecture et la navigation à travers une large gamme d appareils (écran standards, smartphones, tablettes, etc.). 1. Téléchargez la version compilé la plus récente sur Décompressez l archive dans votre dossier td2, et renommez le dossier dist en bootstrap. 2. Dans vos en-têtes de pages (entre le <head> et </head>), incluez la feuille de style de bootstrap bootstrap/css/bootstrap.css, avant l inclusion de votre propre feuille de style css/style.css. 3. Rendez vous sur Etudiez d abord les sections Tables/Buttons/Images, et expérimentez avec votre page web. 4. Rendez vous sur Essayez plusieurs mise en forme de votre barre de navigation! 5. Pour votre barre de navigation, déterminez le menu actif dans chacun de vos 3 fichiers. Vérifier tous vos fichiers HTML5 avec le validateur W3C( Vérifier tous vos fichiers CSS avec le validateur CSS ( 1 Selon Wikipedia, un framework est un ensemble cohérent de composants logiciels structurels, qui sert à créer les fondations ainsi que les grandes lignes de tout ou d une partie d un logiciel (architecture). 7

lecture et la navigation à travers une large gamme d appareils (écran standards, smartphones, tablettes, etc.). 1. Téléchargez la version compilé la plus récente sur http://getbootstrap.com/.

Documents pareils

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15 .. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles