La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Mars 2013 Grégory Petit

Présentations similaires


Présentation au sujet: "Mars 2013 Grégory Petit"— Transcription de la présentation:

1 mars 2013 Grégory Petit

2 Les feuilles de styles, ça sert à quoi?

3 Les feuilles de styles Elles permettent le formatage et la mise en page de la page Web. Le langage utilisé est le CSS : Cascading Style Sheets. Une feuille de style contient plusieurs règles CSS. Un règle peut sappliquer à une balise HTML et/ou un élément ayant un ID spécifique et/ou des éléments appartenant à la même classe.

4 Dans un site Web Plusieurs fichiers HTML Contenu du site Un ou deux fichiers CSS Format et mise en page du site

5 Trois emplacements différents Dans un fichier CSS à part. À lintérieur dun fichier HTML. Dans léléments HTML.

6 Les règles CSS

7 Une règle CSS permet dappliquer un formatage et une mise en page à plusieurs éléments Web du même type. Une règle CSS contient : Un ou plusieurs sélecteurs Un bloc CSS

8 Syntaxe selecteur(s) { bloc CSS } Exemple: h1 { margin: 10px px; padding: 0; font-size : 12px; }

9 Le sélecteur Cest ce qui permet de savoir à quels éléments sapplique la règle CSS. Exemple: h1 { Bloc CSS } Ici, la règle sapplique à tous les titres de premier niveau de la page Web. sélecteur

10 Le sélecteur Un sélecteur peut contenir une balise, une classe et un id Balise : a sapplique à tous les liens Classe :.externe sapplique à tous les éléments Web appartenant à la classe "externe" (class = "externe") Id : #pied-de-page sapplique à tous les éléments ayant un id "pied-de-page » (id="pied-de-page")

11 Le sélecteur Le sélecteur peut combiner les 3 facteurs de la diapo précédente en même temps. a#pied-de-page.externe sapplique à tous les liens ET ayant un attribut classe "externe" ET ayant un id "pied-de-page" a#pied-de-page / a.externe / #pied-de-page.externe

12 Le sélecteur Le sélecteur peut aussi inclure les éléments Web parents. #menu a sapplique à tous les liens qui sont à lintérieur dun élément Web ayant lid "menu". Accueil On sépare les éléments de parenté avec un espace dans le sélecteur.

13 Ordre de priorité des sélecteurs Certains sélecteurs vont avoir la priorité sur dautres Code HTML Accueil Un règle CSS ayant comme sélecteur #menu a lemportera sur une règle CSS ayant comme sélecteur a

14 Ordre de priorité des sélecteurs Si une règle contient plus déléments parents quune autre, elle est prioritaire. Si 2 règles ont le même nombre déléments parents, on regarde le dernier élément et lordre de priorité est le suivant: tag#id.class #id.class tag#id #id tag.class.class tag

15 Le bloc CSS Il contient les différents attributs CSS qui vont sappliquer aux éléments Web identifiés par le sélecteur. h1 { margin: 10px px; padding: 0; font-size : 12px; } Chacun de ses 3 attributs sapplique aux titres de niveau 1.

16 Le bloc CSS Syntaxe margin: 10px px; attribut valeur de lattribut

17 Pour résumer Dans un règle CSS, on utilise : Une balise si on veut appliquer la règle à tous les mêmes types déléments HTML Je veux que la taille de tous mes liens soit 12 px Un ID si on veut appliquer la règle un seul élément dans la page Je veux que la taille dun seul lien soit 24 px Une classe si on veut appliquer la règle à plusieurs objets du même type déléments HTML Je veux que la taille de plusieurs liens soit 14 px (comme par exemple les liens dun menu par rapport aux autres liens du site)

18 Gestion dans Dreamweaver

19 Le fichier CSS Dreamweaver demande où créer le fichier CSS lors de la création de la première règle. Comme pour les images, il est conseillé de mettre les fichiers CSS dans un répertoire à part sous larborescence principale du site.

20 Ajouter une règle CSS Sélectionnez lélément Web sur lequel vous voulez appliquer une règle

21 Ajouter une règle CSS

22 Type de sélecteur sélecteur simple sélecteur complexe

23 Sélecteur complexe

24

25 Nouveau fichier CSS

26 Fichier CSS existant Dans lentête du fichier HTML, la liaison se fait comme suit: Dans Dreamweaver, il faut penser à mettre la nouvelle règle dans le fichier existant.

27 Bloc CSS attributs

28 Boite doutils Styles CSS Double-cliquez sur un sélecteur pour le modifier.

29 Code CSS

30 Trois emplacements différents Dans un fichier CSS à part. À lintérieur dun fichier HTML. Dans léléments HTML.

31 CSS à lintérieur du fichier HTML (à éviter) Balise à lintérieur de lentête du fichier HTML …. h1 {color:red;} p {color:blue;} La même chose quon retrouve dans les fichiers CSS

32 CSS à lintérieur dun élément HTML (à éviter) Attribut "style" à lintérieur de la balise douverture de lélément HTML Ceci est un titre! La même chose quon retrouve dans le bloc CSS dune règle CSS

33 Attributs de formatage

34 Attributs CSS Vous pouvez les modifier directement dans la boite à outils Styles CSS. Ou alors en éditant le sélecteur en double- cliquant dessus

35 Catégorie Type

36 Catégorie Fond

37 Catégorie Bloc

38 Autres catégories Les autres catégories font parties de la mise en page. On va voir ça tantôt.

39 Pratique

40 Vous devez me faire un truc qui ressemble à ça mais avec seulement 5 règles CSS

41 Les éléments de mise en page

42 Que retrouve-t-on globalement dans les sites Web?

43 Type de contenu Des menus Des têtes de page Des pieds de page Des corps de page Des barres de recherche Des fils dAriane

44 Les menus Il y en a des fois partout! En haut À gauche À droite (à éviter!) Trop de menus tue le menu! Préférez une architecture simple avec un seul menu 2 menus grand max! Vous pouvez aussi utiliser des sous-menus!

45 Tête de page Cest toujours la même dans tous le site. Elle contient généralement : Un logo Le nom du site La chose/personne/entreprise présentée par le site Des infos basiques comme les moyens de contact Une barre de recherche …

46 Pied de page Il contient des fois un menu … à éviter! Sinon il contient généralement : Un lien vers les mentions légales du site Un lien vers la chartes confidentialité Le copyright Le nom de la personne/société ayant fait le site Des informations de contacts Dautres liens que personne ne lit jamais …

47 Corps de page Cest le contenu de la page en elle-même. Cest souvent la seule partie du site qui change en fonction de la page du site qui est affichée.

48 Barre de recherche Souvent en haut à droite Mais des fois autre part en haut Toujours à la même place, peu importe la page du site Peut contenir un lien "Recherche avancée"

49 Fil dAriane Permet de savoir où est rendu lusager dans le site. Ça ressemble à ça: Très utile dans les sites contenant de nombreux menus et sous-menus.

50 Les attributs CSS de mise en page

51 Rappel Vous pouvez appliquer un attribut CSS à nimporte quel élément Web. Attention à lattribut text-align qui ne sapplique quà du texte pour centrer une image, placer limage dans un paragraphe, tableau ou div et appliquer sur eux lattribut.

52 Taille des éléments Web

53 Marges des éléments Web

54 Position des éléments Web

55 Lattribut CSS float Si un élément Web possède un attribut CSS float, ses éléments frères et sœurs vont flotter autour de lui. Ici, on a une image avec un attribut float et un paragraphe. Si limage nétait pas flottante, le paragraphe se serait retrouvé directement en dessous de limage car cest un élément bloc.

56 Lattribut CSS float Lattribut float peut prendre comme valeur gauche ou droite. Pour quun élément frère ou sœur ne flotte pas autour dune élément ayant un attribut float, il faut lui mettre un attribut CSS clear.

57 Lattribut CSS float Il faut mettre les éléments avec lattribut float avant les éléments qui vont flotter autour. Ici, les fraises et les litchis ont été ajoutés avant le paragraphes.

58 Position des éléments Web

59 Lattribut CSS position Il peut prendre une de ses 4 valeurs : absolute : positionné relativement par rapport au prochain élément parent non statique fixed : positionné relativement par rapport à la fenêtre du navigateur relative : positionné relativement par rapport à lélément parent static : valeur par défaut – suit le flux normal daffichage

60 Les attributs CSS z-index et overflow z-index (valeur numérique): Pour les éléments frères et sœurs se superposant, un élément avec un z-index plus élevé sera devant les autres, Peut avoir une valeur négative. overflow : Décide du défilement de lélément, Pratique pour rajouter des barres de défilement à un élément,

61 Placement et clip Placement Permet tout simplement de positionner lélément lorsque lattribut position est non statique, Son comportement dépend donc de la valeur de position. Clip Permet de rogner un élément. Peu utilisé … on utilise plutôt les attributs de tailles pour jouer avec la dimension des éléments.

62 Bordure des éléments Web

63 Attributs fixes ou relatifs? Les attributs relatifs sadapteront par rapport à la taille de la fenêtre du fureteur et de la taille de lécran de lusager (pour les pourcentage), ou de la taille de police de caractère (pour les em). Les valeurs de hauteur en pourcentage ne fonctionnent pas vraiment pour la hauteur des cellules et la hauteur globale des tableaux. En fait, les pourcentages fonctionnent seulement si lélément parent à une taille fixe. Les attributs fixes (px, cm, pt, etc.) ne sadapteront pas à la taille de la fenêtre du fureteur ou la taille de lécran de lusager. Cest à vous de choisir quel type dattributs utiliser en fonction du contenu de votre site.

64 Lutilisation des tableaux

65 Ce que vous savez déjà Vous savez utiliser les tableaux pour faire afficher des données. Vous pouvez jouer sur la taille des lignes, colonnes et cellules. Il y a deux types de cellules : les données et les entêtes.

66 Tableaux pour la mise en page En fait, on peut mettre nimporte quel élément Web dans une cellule de tableau! On a déjà mis des images, des listes, des paragraphes, etc. Mais on peut mettre aussi des div, des formulaires, et même dautres tableaux! Dans un tableau de mise en page, on ne met pas dentête, on ne fusionne pas les cellules et on met généralement pas de bordure aux cellules.

67 Tableaux pour la mise en page Les cellules agissent un peu comme des div en fait. Il faut donc jouer sur la taille des cellules. Pour le positionnement, il faut suivre la logique des tableau. Par exemple, si on veux un pied de page, un corps de page et un pied de page, on peut créer un tableau de 3 lignes et 1 seule colonne.

68 Tableau pour la mise en page Cest bien beau tout ça, mais il faut généralement éviter de faire la mise en page en utilisant des tableaux…

69 Lutilisation des DIV

70 DIV pour la mise en page Pour la mise en page, le standard est dutiliser les divs plutôt que les tableaux. Néanmoins, les tableaux restent toujours beaucoup utilisés. Lutilisation des divs rend le code HTML généré plus clair. Pour mettre des divs à gauche ou à droite, on utilise lattribut CSS float. Attention, lattribut CSS vertical-align ne fonctionne pas pour les div!

71 Pratique

72 Ça doit ressembler à ça : (sans tableaux)

73 Canevas

74 99% des sites gardent la même mise en page et le même formatage sur la majorité de leur page. Plutôt que de refaire à chaque fois chaque page, vous pouvez créer un canevas à partir de la première page que vous venez de faire. Quand on modifie un canevas par la suite, les pages utilisant ce canevas vont automatiquement se mettre à jour.

75 Transformer une page en canevas

76 Définir les zones éditables Vous devez identifier les zones éditables de votre canevas. Ce sont les zones dont le contenu changera en fonction des pages de votre site. Vous ne pourrez pas éditer une section dune page utilisant un canevas si cette section na pas été définie comme une zone éditable dans le canevas.

77 Définir les zones éditables

78

79 Nouvelle page basée sur un canevas

80

81 Fluid grid layout (Mise en forme de grille fluide)

82 Fluid grid layout Cest un modèle de page HTML Web qui permet de créer un page qui sadapte à laffichage. Le modèle crée avec le même contenu des pages pour : Écran classique dordinateur Tablette Cellulaire

83 Fluid grid layout On en fera ensemble si on a du temps. Sinon, un tutoriel est disponible ici : cs6/using-fluid-grid-layouts/

84 Des questions??? Merci de votre attention!


Télécharger ppt "Mars 2013 Grégory Petit"

Présentations similaires


Annonces Google