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

Learning the Web

Composició d'una pàgina d'inici de l'escola comunitaria

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

En aquesta avaluació, comprovarem la comprensió de totes les tècniques d'estil de text que hem cobert al llarg d'aquest mòdul, que us permetrà personalitzar el text de la pàgina d'inici d'una escola comunitària. Podríeu tindra una mica de diversió durant el camí.

Requisits previs: Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.
Objectiu: Provar la comprensió de les tècniques d'estil de text CSS.

Punt de partida

Per començar aquesta avaluació, heu de:

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 i utilitzar aquest URL per indicar la imatge de fons. Si l'editor en línia que esteu utilitzant no té cap panell CSS separat, no dubteu a posar-lo en un element <style> a la capçalera del document.

Resum del projecte

Us hem proporcionat un codi HTML sense format per a la pàgina d'inici d'una universitat comunitària imaginària, a més d'alguns estils CSS de la pàgina en un disseny de dues columnes, proporcionant un estil rudimentari. Heu d'escriure els vostres afegits CSS a sota del comentari a la part inferior del fitxer CSS, per assegurar-vos que sigui fàcil marcar les parts que heu realitzat. No us preocupeu si alguns dels selectors són repetitius; en aquest cas us deixarem.

Fonts:

  • Primer de tot, descarregueu un parell de fonts gratuïtes. Com que es tracta d'una escola, les fonts s'haurien d'escollir per donar a la pàgina un sensació bastant seriosa, formal i de confiança - una font serif per el lloc a tot el cos del text general, juntament amb una sans-serif o una serif recta per als encapçalaments, podria ser agradable.
  • Utilitzeu un servei adequat per generar un codi font @face-face blindat per a aquestes dues fonts.
  • Apliqueu la font del cos a la pàgina sencera i la font d'encapçalament a les capçaleres

Estil de text general :

  • Doneu a la pàgina un font-size de 10px a tot el lloc.
  • Doneu els encapçalaments i altres tipus d'elements les mides de font apropiades definides amb una unitat relativa adequada.
  • Doneu al text del cos una alçada de línia (line-height) adequada.
  • Centreu el encapçalament de nivell superior a la pàgina.
  • Doneu als encapçalaments una mica d'espaiat a les lletres (letter-spacing) perquè no estiguin massa atapeïdes, i deixeu que les lletres respiren una mica.
  • Doneu al text del cos una mica d'espaiat entre lletres (letter-spacing) i espaiat entre paraules (word-spacing) , segons correspong
  • Doneu el primer paràgraf després de cada encapçalament  en la <section> una mica de sagnat al text (text-indentation), diguem 20px.

Enllaços:

  • Doneu als estats de l'enllaç, visitad, enfocament i desplaçamen per damunt alguns colors que van amb el color de les barres horitzontals en la part superior i inferior de la pàgina.
  • Feu que els enllaços estiguin subratllats de manera predeterminada, però quan es passa el cursor per damunt o els enfoca, el subratllat desapareix.
  • Elimineu el contorn d'enfocament predeterminat de TOTS els enllaços de la pàgina.
  • Proporcioneu a l'estat actiu un estil notablement diferent, per la qual cosa es destaca molt bé, però cal que encaixi amb el disseny general de la pàgina.
  • Feu que els enllaços externs tinguin la icona de l'enllaç extern inserida al seu costat.

Llistes:

  • Assegureu-vos que l'espaiat de les vostres llistes i elements de llista funcionan bé amb l'estil de la pàgina general. Cada element de la llista hauria de tenir la mateixa alçada de línia (line-height) que una línia de paràgraf, i cada llista hauria de tenir el mateix espai en la part superior i inferior que hi ha entre els paràgrafs.
  • Doneu als elements de la llista una bonica vinyeta, apropiada per al disseny de la pàgina. Depenent de si trieu una imatge de vinyeta personalitzada o una altra cosa.

Menú de navegació

  • El estil del menú de navegació que tingui un aspecte adequat per a l'aparença de la pàgina.

Consells i suggeriments

  • No cal que editeu l'HTML de cap manera per a aquest exercici.
  • No necessàriament heu de fer que el menú de navegació es vegi com botons, però ha de ser una mica més alt per tal que no sembli una tonteria al costat de la pàgina; Recordeu, també, que heu de fer d'aquest un menú vertical de navegació.

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,