You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
> **Note** The `pip install` step can take a couple of minutes. Patience, patience! But if it takes more than 5 minutes, something is wrong. Ask your coach.
Copy file name to clipboardExpand all lines: fr/css/README.md
+35-35Lines changed: 35 additions & 35 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,52 +1,52 @@
1
-
# CSS - Rendez votre site joli!
1
+
# CSS - Rendez votre site joli!
2
2
3
-
Soyons honnête: notre blog est plutôt moche, non ? Un peu de CSS devrait nous permettre d'arranger ça!
3
+
Soyons honnête: notre blog est plutôt moche, non ? Un peu de CSS devrait nous permettre d'arranger ça!
4
4
5
-
## Qu'est-ce que le CSS?
5
+
## Qu'est-ce que le CSS?
6
6
7
-
Les feuilles de style en cascade, ou Cascading Style Sheets (CSS), sont un langage informatique utilisé pour décrire l'apparence et le formatage d'un document écrit en langage markup (ex: HTML). Pour faire simple: des produits cosmétiques pour pages web ;).
7
+
Les feuilles de style en cascade, ou Cascading Style Sheets (CSS), sont un langage informatique utilisé pour décrire l'apparence et le formatage d'un document écrit en langage markup (ex: HTML). Pour faire simple: des produits cosmétiques pour pages web ;).
8
8
9
9
Je suppose que vous n'avez pas envie de partir de rien et de tout construire vous-même. Pour éviter cela, nous allons une nouvelle fois utiliser différentes ressources créées et mises à disposition gratuitement sur Internet par d'autres développeur·se·s. Réinventer à chaque fois la roue n'est pas fun en plus d'être absolument inutile.
10
10
11
-
## Utilisons Bootstrap!
11
+
## Utilisons Bootstrap!
12
12
13
-
Bootsrap est l'un des frameworks HTML et CSS les plus populaires. Il est utilisé pour créer de très beaux sites web: http://getbootstrap.com/
13
+
Bootsrap est l'un des frameworks HTML et CSS les plus populaires. Il est utilisé pour créer de très beaux sites web: http://getbootstrap.com/
14
14
15
15
Il fut codé par d'anciens programmeurs de chez Twitter et est maintenant développé par des bénévoles aux quatre coins du monde.
16
16
17
17
## Installer Bootstrap
18
18
19
-
Pour installer Bootstrap, vous avez besoin d'ajouter ceci dans le `<head>` de votre fichier `.html` (`blog/templates/blog/post_list.html`):
19
+
Pour installer Bootstrap, vous avez besoin d'ajouter ceci dans le `<head>` de votre fichier `.html` (`blog/templates/blog/post_list.html`):
En faisant ceci, vous n'ajoutez aucun nouveau fichier à votre projet: vous reliez simplement des fichiers hébergés sur Internet à votre projet. Essayez maintenant de rafraichir votre page. Et voilà!
26
+
En faisant ceci, vous n'ajoutez aucun nouveau fichier à votre projet: vous reliez simplement des fichiers hébergés sur Internet à votre projet. Essayez maintenant de rafraichir votre page. Et voilà!
27
27
28
28
![Figure 14.1][1]
29
29
30
30
[1]: images/bootstrap1.png
31
31
32
-
C'est déjà un peu mieux, n'est-ce pas?
32
+
C'est déjà un peu mieux, n'est-ce pas?
33
33
34
34
## Les fichiers statiques dans Django
35
35
36
36
Les **fichiers statiques** (static files) font eux aussi partie des nouvelles choses que vous allez apprendre aujourd'hui. Votre CSS ainsi que vos images font partie des fichiers statiques. Ces fichiers ne sont pas dynamiques, ce qui signifie qu'ils ne dépendent pas du contexte de la requête et seront donc identiques pour chaque utilisateur.
37
37
38
-
Comme la CSS est un fichier statique, nous devons tout d'abord configurer les fichiers statiques dans Django. Vous n'avez besoin de faire cette étape qu'une seule fois. Commençons:
38
+
Comme la CSS est un fichier statique, nous devons tout d'abord configurer les fichiers statiques dans Django. Vous n'avez besoin de faire cette étape qu'une seule fois. Commençons:
39
39
40
40
### Configurer les fichiers statiques dans Django
41
41
42
-
Tout d'abord, nous devons créer un dossier pour y ranger nos fichiers statiques. Allez-y: créez un dossier appelé `static` à l'intérieur de votre dossier `djangogirls`.
42
+
Tout d'abord, nous devons créer un dossier pour y ranger nos fichiers statiques. Allez-y: créez un dossier appelé `static` à l'intérieur de votre dossier `djangogirls`.
43
43
44
44
djangogirls
45
45
├─── static
46
46
└─── manage.py
47
47
48
48
49
-
Ouvrez le fichier `mysite/settings.py` et allez à la fin de celui-ci pour ajouter les lignes suivantes:
49
+
Ouvrez le fichier `mysite/settings.py` et allez à la fin de celui-ci pour ajouter les lignes suivantes:
50
50
51
51
STATICFILES_DIRS = (
52
52
os.path.join(BASE_DIR, "static"),
@@ -55,7 +55,7 @@ Ouvrez le fichier `mysite/settings.py` et allez à la fin de celui-ci pour ajout
55
55
56
56
Maintenant, Django sait où se trouvent vos fichiers statiques.
57
57
58
-
## Votre première CSS!
58
+
## Votre première CSS!
59
59
60
60
Nous allons créer un fichier CSS afin de personnaliser notre page web. Créez un nouveau dossier appelé `css` à l'intérieur de votre dossier `static`. Ensuite, créez un nouveau fichier appelé `blog.css` à l'intérieur du dossier `css`. Vous êtes prêt·e·s ?
61
61
@@ -64,26 +64,26 @@ Nous allons créer un fichier CSS afin de personnaliser notre page web. Créez u
64
64
blog.css
65
65
66
66
67
-
Maintenant, écrivons un peu de CSS: ouvrez le fichier `static/css/blog.css` dans votre éditeur de texte.
67
+
Maintenant, écrivons un peu de CSS: ouvrez le fichier `static/css/blog.css` dans votre éditeur de texte.
68
68
69
-
Vous n'avez peut-être pas envie de passer le reste de la journée à personnaliser vos pages web et à apprendre le CSS. De toute manière, ce n'est pas l'objectif de cet atelier! Nous vous invitons donc, une fois rentré·e chez vous, à vous plonger dans d'autres tutoriels de CSS. Vous verrez, c'est assez simple à comprendre. Vous pouvez consulter le cours [Codeacademy HTML & CSS course][2] qui est une excellente ressource qui vous permettra d'en apprendre plus sur la personnalisation de site web à l'aide de CSS.
69
+
Vous n'avez peut-être pas envie de passer le reste de la journée à personnaliser vos pages web et à apprendre le CSS. De toute manière, ce n'est pas l'objectif de cet atelier! Nous vous invitons donc, une fois rentré·e chez vous, à vous plonger dans d'autres tutoriels de CSS. Vous verrez, c'est assez simple à comprendre. Vous pouvez consulter le cours [Codeacademy HTML & CSS course][2] qui est une excellente ressource qui vous permettra d'en apprendre plus sur la personnalisation de site web à l'aide de CSS.
70
70
71
71
[2]: http://www.codecademy.com/tracks/web
72
72
73
73
Que pourrions-nous faire rapidement ? Je sais : changer la couleur de notre entête ! Pour indiquer la couleur que nous souhaitons utiliser, nous devons utiliser un code particulier. Ces codes commencent par `#` et sont suivis de 6 lettres (A-F) et chiffres (0-9). Afin de trouver le code associé à la couleur de votre choix, vous pouvez consulter le site http://www.colorpicker.com/. Vous pouvez aussi utiliser des [couleurs prédéfinies][3], comme le `rouge` et le `vert`.
Ajoutez ceci dans votre fichier `static/css/blog.css`:
77
+
Ajoutez ceci dans votre fichier `static/css/blog.css`:
78
78
79
79
h1 a {
80
80
color: #FCA205;
81
81
}
82
82
83
83
84
-
`h1 a` est un sélecteur CSS. Cela signifie que nous appliquons ce style pour chaque élément `a` présent à l'intérieur d'un élément `h1` (ce qui est le cas de `<h1><a href="">link</a></h1>`). Dans notre exemple précédent, nous indiquions notre souhait de changer la couleur du texte en `#FCA205`, c'est à dire en orange. Bien évidemment, vous êtes libre de choisir n'importe quelle couleur!
84
+
`h1 a` est un sélecteur CSS. Cela signifie que nous appliquons ce style pour chaque élément `a` présent à l'intérieur d'un élément `h1` (ce qui est le cas de `<h1><a href="">link</a></h1>`). Dans notre exemple précédent, nous indiquions notre souhait de changer la couleur du texte en `#FCA205`, c'est à dire en orange. Bien évidemment, vous êtes libre de choisir n'importe quelle couleur!
85
85
86
-
Un fichier CSS permet de déterminer le style des éléments présents dans un fichier HTML. Les différents éléments sont identifiés par leur nom (`a`, `h1`, `body`), l’attribut `class` ou l’attribut `id`. Class et id sont des noms que vous choisissez vous-même. Les classes définissent des groupes d'éléments tandis que les ids désignent des éléments précis. Par exemple, l'élément suivant peut être identifié par CSS à la fois par son nom `a`, sa classe `external_link`, ou son identifiant `link_to_wiki_page`:
86
+
Un fichier CSS permet de déterminer le style des éléments présents dans un fichier HTML. Les différents éléments sont identifiés par leur nom (`a`, `h1`, `body`), l’attribut `class` ou l’attribut `id`. Class et id sont des noms que vous choisissez vous-même. Les classes définissent des groupes d'éléments tandis que les ids désignent des éléments précis. Par exemple, l'élément suivant peut être identifié par CSS à la fois par son nom `a`, sa classe `external_link`, ou son identifiant `link_to_wiki_page`:
Afin que nos modifications fonctionnent, nous devons aussi signaler à notre template HTML que nous utilisons des CSS. Ouvrez le fichier `blog/templates/blog/post_list.html` et ajoutez cette ligne au tout début de celui-ci:
95
+
Afin que nos modifications fonctionnent, nous devons aussi signaler à notre template HTML que nous utilisons des CSS. Ouvrez le fichier `blog/templates/blog/post_list.html` et ajoutez cette ligne au tout début de celui-ci:
96
96
97
97
```html
98
98
{% load staticfiles %}
99
99
```
100
100
101
101
102
-
Hop, nous chargeons les fichiers statiques:). Pour l'ajout de code suivant, gardez en tête que le navigateur lit vos fichiers dans l'ordre dans lequel ils lui sont donnés: en le plaçant à l'endroit que nous vous indiquons, vous allez pouvoir remplacer du code provenant des fichiers Boostrap par le vôtre. Donc, entre le `<head>` et le `</head>` et après les liens vers les fichiers CSS de Boostrap, ajoutez ceci:
102
+
Hop, nous chargeons les fichiers statiques:). Pour l'ajout de code suivant, gardez en tête que le navigateur lit vos fichiers dans l'ordre dans lequel ils lui sont donnés: en le plaçant à l'endroit que nous vous indiquons, vous allez pouvoir remplacer du code provenant des fichiers Boostrap par le vôtre. Donc, entre le `<head>` et le `</head>` et après les liens vers les fichiers CSS de Boostrap, ajoutez ceci:
Nous venons simplement de dire à notre template où nous avons rangé notre fichier CSS.
109
109
110
-
Maintenant, votre fichier doit ressembler à ceci:
110
+
Maintenant, votre fichier doit ressembler à ceci:
111
111
112
112
```html
113
113
{% load staticfiles %}
@@ -136,33 +136,33 @@ Maintenant, votre fichier doit ressembler à ceci :
136
136
```
137
137
138
138
139
-
Ok, on sauvegarde et on rafraîchit la page!
139
+
Ok, on sauvegarde et on rafraîchit la page!
140
140
141
141
![Figure 14.2][5]
142
142
143
143
[5]: images/color2.png
144
144
145
-
Bravo! Peut-être que nous pourrions un peu aérer notre page web en augmentant la marge du côté gauche? Essayons pour voir!
145
+
Bravo! Peut-être que nous pourrions un peu aérer notre page web en augmentant la marge du côté gauche? Essayons pour voir!
146
146
147
147
body {
148
148
padding-left: 15px;
149
149
}
150
150
151
151
152
-
Ajoutez ceci à votre fichier CSS, sauvegardez-le et voyons le résultat!
152
+
Ajoutez ceci à votre fichier CSS, sauvegardez-le et voyons le résultat!
153
153
154
154
![Figure 14.3][6]
155
155
156
156
[6]: images/margin2.png
157
157
158
-
Et si nous changions aussi la police de caractères de notre entête ? Collez ceci dans la partie `<head>` de votre fichier `blog/templates/blog/post_list.html`:
158
+
Et si nous changions aussi la police de caractères de notre entête ? Collez ceci dans la partie `<head>` de votre fichier `blog/templates/blog/post_list.html`:
Cette ligne nous permet d'importer la police de caractères *Lobster* depuis Google Fonts (https://www.google.com/fonts).
164
164
165
-
Maintenant, ajouter la ligne `font-family: 'Lobster';` dans votre fichier CSS `static/css/blog.css`. Attention à bien la placer à l'intérieur du block déclaratif `h1 a` (c'est à dire entre les accolades `{` et `}`). Ensuite, rechargez la page. Votre code doit ressembler à ceci:
165
+
Maintenant, ajouter la ligne `font-family: 'Lobster';` dans votre fichier CSS `static/css/blog.css`. Attention à bien la placer à l'intérieur du block déclaratif `h1 a` (c'est à dire entre les accolades `{` et `}`). Ensuite, rechargez la page. Votre code doit ressembler à ceci:
166
166
167
167
h1 a {
168
168
color: #FCA205;
@@ -174,11 +174,11 @@ Maintenant, ajouter la ligne `font-family: 'Lobster';` dans votre fichier CSS `s
174
174
175
175
[7]: images/font.png
176
176
177
-
Super!
177
+
Super!
178
178
179
179
Comme nous l'avions mentionné précédemment, il existe une notion de classe dans CSS. En gros, cela vous permet de donner un nom à un morceau de code HTML auquel vous souhaitez appliquer un style particulier sans que cela ne concerne le reste du code. C'est particulièrement pratique lorsque vous avez deux divs qui font quelque chose de différent (par exemple, votre entête et votre post) et que vous ne voulez pas qu'ils soient identiques.
180
180
181
-
Allons donner des noms à certaines parties de notre code html. Ajouter la classe `page-header` à votre `div` qui contient votre entête. Votre fichier doit ressembler maintenant à ceci:
181
+
Allons donner des noms à certaines parties de notre code html. Ajouter la classe `page-header` à votre `div` qui contient votre entête. Votre fichier doit ressembler maintenant à ceci:
182
182
183
183
<div class="page-header">
184
184
<h1><a href="/">Django Girls Blog</a></h1>
@@ -194,7 +194,7 @@ Maintenant, ajouter la classe `post` à votre `div` contenant votre blog post.
194
194
</div>
195
195
196
196
197
-
Nous allons maintenant ajouter des blocs déclaratifs à différents sélecteurs. Les sélecteurs qui commencent par `.` sont reliés aux classes. Le net regorge de bons tutoriels sur CSS qui vous permettront de comprendre le code que nous allons maintenant rajouter à notre fichier. Comme nous n'avons malheureusement pas le temps d'entrer dans les détails, copiez le code suivant dans votre fichier `mysite/static/css/blog.css`:
197
+
Nous allons maintenant ajouter des blocs déclaratifs à différents sélecteurs. Les sélecteurs qui commencent par `.` sont reliés aux classes. Le net regorge de bons tutoriels sur CSS qui vous permettront de comprendre le code que nous allons maintenant rajouter à notre fichier. Comme nous n'avons malheureusement pas le temps d'entrer dans les détails, copiez le code suivant dans votre fichier `mysite/static/css/blog.css`:
198
198
199
199
.page-header {
200
200
background-color: #ff9400;
@@ -245,7 +245,7 @@ Nous allons maintenant ajouter des blocs déclaratifs à différents sélecteurs
245
245
}
246
246
247
247
248
-
Nous allons maintenant nous intéresser au code concernant les posts. Remplacer le code suivant:
248
+
Nous allons maintenant nous intéresser au code concernant les posts. Remplacer le code suivant:
249
249
250
250
```html
251
251
{% for post in posts %}
@@ -257,7 +257,7 @@ Nous allons maintenant nous intéresser au code concernant les posts. Remplacer
257
257
{% endfor %}
258
258
```
259
259
260
-
Ce code se trouve dans le fichier `blog/templates/blog/post_list.html` et doit être remplacé par celui-ci:
260
+
Ce code se trouve dans le fichier `blog/templates/blog/post_list.html` et doit être remplacé par celui-ci:
261
261
262
262
```html
263
263
<divclass="content container">
@@ -284,10 +284,10 @@ Sauvegardez les fichiers modifiés et rafraîchissez votre site web.
284
284
285
285
[8]: images/final.png
286
286
287
-
Woohoo! C'est pas mal, non? Le code que nous avons collé n'est pas bien compliqué à comprendre et vous devriez pouvoir en comprendre l'essentiel rien qu'en le lisant (ce n'est pas grave si ce n'est pas le cas ! ).
287
+
Woohoo! C'est pas mal, non? Le code que nous avons collé n'est pas bien compliqué à comprendre et vous devriez pouvoir en comprendre l'essentiel rien qu'en le lisant (ce n'est pas grave si ce n'est pas le cas!).
288
288
289
-
N'ayez pas peur et jouez un peu avec la CSS: essayez par exemple d'en changer des morceaux. Vous avez cassé quelque chose? Pas de problème: vous pouvez toujours annuler vos modifications!
289
+
N'ayez pas peur et jouez un peu avec la CSS: essayez par exemple d'en changer des morceaux. Vous avez cassé quelque chose? Pas de problème: vous pouvez toujours annuler vos modifications!
290
290
291
-
Voilà pour la partie CSS. Nous vous encourageons vivement à suivre le tutoriel gratuit de [Code Academy][2]: considérez ce tutoriel comme un petit travail à faire une fois rentré⋅e chez vous. Vous connaîtrez ainsi tout ce qu'il y a savoir pour rendre son site bien plus joli!
291
+
Voilà pour la partie CSS. Nous vous encourageons vivement à suivre le tutoriel gratuit de [Code Academy][2]: considérez ce tutoriel comme un petit travail à faire une fois rentré⋅e chez vous. Vous connaîtrez ainsi tout ce qu'il y a savoir pour rendre son site bien plus joli!
0 commit comments