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

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> (en-US), 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!