1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
---
title: Creació d'una carta amb encapçalat de fantasia
slug: Learn/CSS/Caixes_estil/Creació_carta
tags:
- Assessment
- Background
- Beginner
- CSS
- CodingScripting
- border
- borderBoxes
- letter
- letterhead
- letterheaded
- paper
translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper
---
<div>{{LearnSidebar}}</div>
<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}</div>
<p class="summary">Si voleu fer una impressió correcta, escriviu una carta amb un bon paper i una capçalera agradable pot ser un començament realment bo. En aquesta avaluació, us desafiarem a crear una plantilla en línia per aconseguir-ho.</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Requisits previs:</th>
<td><span id="result_box" lang="ca"><span>Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul</span></span>.</td>
</tr>
<tr>
<th scope="row">Objectiu:</th>
<td>Provar la comprensió del model de caixa CSS i altres característiques relacionades amb la caixa, com ara la implementació de fons.</td>
</tr>
</tbody>
</table>
<h2 id="Punt_de_partida"><span id="result_box" lang="ca"><span>Punt de partida</span></span></h2>
<p><span id="result_box" lang="ca"><span>Per començar aquesta avaluació, heu de:</span></span></p>
<ul>
<li><span id="result_box" lang="ca"><span>Feu còpies locals del codi</span></span> <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/index.html">HTML</a> i <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/style.css">CSS</a> — <span id="result_box" lang="ca"><span>deseu-les com</span></span> <code>index.html</code> i <code>style.css</code> <span id="result_box" lang="ca"><span>en un directori nou</span></span>.</li>
<li><span id="result_box" lang="ca"><span>Deseu còpies locals de les imatges</span></span> <a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/top-image.png">top</a>, <a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/bottom-image.png">bottom</a> i <a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/logo.png">logo</a> <span id="result_box" lang="ca"><span>en el mateix directori que els fitxers de codi.</span></span></li>
</ul>
<div class="note">
<p><strong>Nota</strong>: Com a alternativa, podeu utilitzar un lloc com <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia. Si l'editor en línia que esteu utilitzant no té cap panell CSS independent, no dubteu a posar-lo en un element <<code>style</code>> al capdavant del document.</p>
</div>
<h2 id="Resum_del_projecte">Resum del projecte</h2>
<p>Se us ha donat els fitxers necessaris per crear una plantilla de paper amb capçalera. Només cal que col·loqueu els fitxers junts. Per arribar-hi, heu de:</p>
<h3 id="La_carta_principal">La carta principal</h3>
<ul>
<li>Apliqueu el CSS a l'HTML.</li>
<li>Afegiu una declaració de fons a la carta que:
<ul>
<li>Fixeu la imatge superior a la part superior de la carta</li>
<li>Fixeu la imatge inferior a la part inferior de la carta</li>
<li>Afegiu un gradient semitransparent a la part superior de tots dos fons anteriors que dóna una mica de textura a la lletra. Feu que sigui lleugerament fosc a la part superior i inferior, però que sigui completament transparent per a una gran part del centre.</li>
</ul>
</li>
<li>Afegiu una altra declaració de fons, que només afegeixi la imatge superior a la part superior de la carta, com a alternativa per a navegadors que no admetin la declaració anterior.</li>
<li>Afegiu un color de fons blanc a la carta.</li>
<li>Afegiu una vora sòlida superior i inferior de 1 mm a la carta, en un color que es mantngui amb la resta del esquema de color.</li>
</ul>
<h3 id="El_logotip"><span id="result_box" lang="ca"><span>El logotip</span></span></h3>
<ul>
<li>A {{htmlelement("h1")}}, afegiu el logotip com a imatge de fons.</li>
<li>Afegiu un filtre al logotip per donar-li una ombra subtil.</li>
<li>Ara comenteu el filtre i implementeu l'ombra en un mode diferent (una mica més compatible amb el navegador creuat), que encara segueix la forma de la imatge rodona.</li>
</ul>
<h2 id="Consells_i_suggeriments">Consells i suggeriments</h2>
<ul>
<li>Recordeu que pofeu crear una alternativa per als navegadors més antics, posant la versió alternativa com a primera declaració, seguida de la versió que funciona només en els navegadors més recents. Els navegadors més antics aplicaran la primera declaració i ignoraran la segona, mentre que els nous exploradors aplicaran la primera i després la reemplaçaran amb la segona</li>
<li>No dubteu a crear els vostres propis gràfics per a l'avaluació si ho voleu.</li>
</ul>
<h2 id="Exemple">Exemple</h2>
<p>La següent captura de pantalla mostra un exemple del que podria semblar el disseny final:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13144/letterhead.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
<p> </p>
<h2 id="Avaluació"><span id="result_box" lang="ca"><span>Avaluació</span></span></h2>
<p>Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema <a class="external external-icon" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">en el fil de conversa en l'àrea d'aprenentatge</a>, o en el canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a class="external external-icon" href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Intenteu primer l'exercici - no es guanya res fent trampes!</p>
<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}</p>
|
