MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Learning the Web

Creació d'una carta amb encapçalat de fantasia

This translation is incomplete. Please help translate this article from English.

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.

Requisits previs: Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.
Objectiu: Provar la comprensió del model de caixa CSS i altres característiques relacionades amb la caixa, com ara la implementació de fons.

Punt de partida

Per començar aquesta avaluació, heu de:

  • Feu còpies locals del codi HTML i CSSdeseu-les com index.html i style.css en un directori nou.
  • Deseu còpies locals de les imatges top, bottom i logo en el mateix directori que els fitxers de codi.

Nota: Com a alternativa, podeu utilitzar un lloc com JSBin o Thimble 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 <style> al capdavant del document.

Resum del projecte

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:

La carta principal

  • Apliqueu el CSS a l'HTML.
  • Afegiu una declaració de fons a la carta que:
    • Fixeu la imatge superior a la part superior de la carta
    • Fixeu la imatge inferior a la part inferior de la carta
    • 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.
  • 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.
  • Afegiu un color de fons blanc a la carta.
  • 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.

El logotip

  • A <h1>, afegiu el logotip com a imatge de fons.
  • Afegiu un filtre al logotip per donar-li una ombra subtil.
  • 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.

Consells i suggeriments

  • 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
  • No dubteu a crear els vostres propis gràfics per a l'avaluació si ho voleu.

Exemple

La següent captura de pantalla mostra un exemple del que podria semblar el disseny final:

 

Avaluació

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 en el fil de conversa en l'àrea d'aprenentatge, o en el canal IRC #mdn en Mozilla IRC. Intenteu primer l'exercici - no es guanya res fent trampes!

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,