Passer au CSS et autres... (2) Pour nous encourager, on revois l'objectif à atteindre.

Présentation au sujet: "Passer au CSS et autres... (2) Pour nous encourager, on revois l'objectif à atteindre."— Transcription de la présentation:

1 Passer au CSS et autres... (2) Pour nous encourager, on revois l'objectif à atteindre.

2 Puis un morceau de code conditionnel Passer au CSS et autres... (2) Mais qu'est ce que c'est que le « pre » ? On voit au passage que cette balise redéfini la balise html. Il s'agit d'un préformatage que nous utiliserons plus tard. Comme indiqué, il ne sera utilisé que pour IE qui pose problème. Je l'ai fixé à 500px pour être sûr.

3 Passer au CSS et autres... (2) Nous allons nous intéresser à la balise tout en bas, juste après l'ouverture du body Elle apparaît sous la forme Tout d'abord la balise Cette balise indique une division à l'intérieur du corps du document. Les paramètres que nous allons lui appliquer pourront être différent. id : cela signifie identifiant id= « conteneur » Ici on donne a l'identifiant le nom « conteneur » La particularité d'un id c'est qu'il ne peut être utilisé qu'une seule fois. Cela paraît logique. Pour donner du concret, cet identifiant va définir l'enveloppe du contenu de la page. C'est toujours un peu abstrait, c'est normal. Nous allons voir cela en images.

4 Passer au CSS et autres... (2) Il faut que l'identifiant « conteneur » contienne des paramètres. Nous allons les écrire. Ces lignes vont se rajouter dans le On voit qu'il est écrit div#conteneur cela indique qu'il s'agit d'un identifiant. On va appliquer à ce conteneur une largeur de 770px On réaligne le texte à gauche On applique une bordure de 2px colorée en marron foncé On applique une couleur à ce conteneur : #fff ou #FFFFFF (blanc) On écrit le code ici J'avais promis du visuel : au prochain clic on va voir ce que cela donne !

5 Passer au CSS et autres... (2) Ici nous voyons l'ensemble de notre code correctement indenté pour une meilleur lecture Par les paramètres que nous avons transmis à l'id « conteneur » Voici ce que nous obtenons. Pas mal non ? Revoir animation

6 Passer au CSS et autres... (2) Aller on ajoute 4 lignes de code : On peut voir plus bas que comme pour l'ID « conteneur » nous faisons maintenant appel à l'ID « header » On peut voir que « header » redéfini la balise h1 Nous allons revenir sur ce point au prochain écran Ici la hauteur de 258px correspond à la hauteur de l'image que nous allons placer

7 Passer au CSS et autres... (2) Voyons de plus près cette imbrication de balises – Ici nous sommes au cœur du CSS Feuille de style en cascade Le terme cascade prends tout son sens <h1 Il s'agit ici du format de titre « Titre 1 » par défaut dans Dreamweaver header permet, puisqu'il est appliqué comme argument de h1 de modifier les paramètres de celui-ci. Et nous pourrions ajouter d'autres arguments... Il suffit de les séparer par un espace h1#header a (c'est le code à mettre dans la balise style) Indique que ces paramètre doivent s'appliquer uniquement à une balise de type h1 redéfini par les paramètres de « header » mais ne s'appliquant qu'a la balise « a » (celle-ci indique un lien). Justement c'est le cas de notre ligne de code : <a href= « index.html » indique un lien qui pointe vers la page index.html title= »Site ressources - Accueil »> indique qu'un indicateur s'affichera au passage de la souris. Site ressources : il s'agit ici du nom que porte le lien : on referme la balise lien </h1 : on referme la balise de format de titre Site ressources – Accueil Pour le moment nous n'avons pas encore vu quelle redéfinition appliquer dans le cas de cette balise a et uniquement dans ce cas

8 Passer au CSS et autres... (2) Mettons en place notre première image : Il s'agit de l'image de fond du header donc : background Le nom de l'image est : bandeau_ressources_css.jpg Le dossier qui la contient : illustrations Pour indiquer un chemin en css on ecrit : url(chemin_fichier) no-repeat : on affiche l'image qu'une seule fois. left top A gauche, en haut Il reste un espace au dessus de l'image : c'est donc une marge extérieure (margin)

9 Passer au CSS et autres... (2) Pour la suite voici les contraintes que nous fixons : 1 - Il faut que le lien « Site ressources » soit actif sur la zone encadrée de rouge. 3 - On ne doit plus voir le texte On va paramétrer un nouveau style : h1#header a Largeur : 190px Hauteur : 135px J'ai volontairement supprimé l'image pour mieux voir. A priori il ne se passe rien On rajoute la commande display: block La traduction est : Transformer en bloc Et on obtient ceci J'ai visualisé le cadre, en réalité la ligne rouge n'est pas visible. On voit que le lien est sur deux lignes

10 Passer au CSS et autres... (2) On vas maintenant déplacer notre « bloc » en le mettant à 380 pixels de la gauche et à 0 pixels du haut Pour lui donner une position relative à notre fond : position: relative ; Puis les valeurs : left: 380px ; top: 0px ; Le même avec l'image de fond, pour bien visualiser l'emplacement. La précision est au pixel près. Gros avantage par rapport au tableaux

11 Passer au CSS et autres... (2) Il nous reste maintenant à faire disparaître le texte mais sans l'effacer sinon le programme ne reconnaîtra plus un lien. On va donc décaler le lien hors de l'écran pour qu'il ne soit plus visible. Pour cela nous allons appliquer la commande « text-indent » On lui applique la valeur -5000px. Le texte de lien va être déplacé de 5000 pixel sur la gauche. On aurait pu aussi mettre une image de fond dans le bloc ainsi créé en rajoutant :