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

L'estructuració d'una pàgina de contingut llest per dissenyar, utilitzant CSS, és una habilitat molt important per dominar, pel que en aquesta avaluació es provarà la vostra capacitat de pensar sobre com una pàgina podria acabar veient-se, i triar la semàntica estructural apropiada per construir un disseny damunt.

Requisits previs: Abans de procedir a aquesta avaluació heu hagut de treballar la resta del curs, amb un èmfasi particular en Documents i estructura del lloc web.
Objectiu: Posar a prova el coneixement de les estructures de pàgines web, i com representar un esquema de diseny possible en el marcat.

Punt de partida

Per obtenir aquesta avaluació inicial, cal anar i agafar l'arxiu zip que conté tots els recursos per començar. L'arxiu zip conté:

  • L'HTML que es necessita per afegir el marcat estructural
  • CSS per l'estil del marcat.
  • Les imatges que s'utilitzen en la pàgina.

Crear l'exemple en el vostre equip local, o bé, utilitzar un lloc com JSBin or Thimble per fer la vostra avaluació.

Resum del projecte

Per a aquest projecte, la tasca és prendre el contingut de la pàgina principal d'un lloc web d'observació d'aus i afegir elements estructurals a la mateixa, pel que pot tenir un disseny de pàgina que se li aplica. S'ha de tenir:

  • Una capçalera que abasta l'ample complet del lloc que conté el títol principal de la pàgina, el logotip del lloc, i el menú de navegació. El títol i el logotip apareixen un al costat de l'altre una vegada que s'aplica l'estil, i la navegació apareix sota d'aquests dos elements.
  • Una àrea de contingut principal que conté dues columnes - un bloc principal per contenir el text de benvinguda, i una barra lateral que conté imatges en miniatura.
  • Un peu de pàgina que conté informació dels drets d'autor i crèdits.

Cal afegir un embolcall adequat per a:

  • La capçalera
  • El menú de navegació
  • El contingut principal
  • El text de benvinguda
  • La barra lateral de la imatge
  • El peu de pàgina

També s'ha de:

  • Aplicar el CSS, proporcionat,a la pàgina mitjançant l'addició d'una altra element <link> just a sota de l'existent proporcionada a l'inici.

Consells i suggeriments

  • Utilitzar el validador HTML de W3C per validar el codi HTML; s'obtenen punts de bonificació si es valida tant com sigui possible (la línia "googleapis" és una línia que s'utilitza per importar fonts personalitzades en la pàgina de Google Fonts service; no valida, pel que no ens hem de preocupar per això.)
  • No es necessita saber res de CSS per fer aquesta avaluació; només s'ha de posar el CSS proporcionat a l'interior d'un element HTML.
  • El CSS proporcionat està dissenyat de manera que quan s'afegeixen els elements estructurals correctes per al marcatge, apareixeran en verd a la pàgina representada.
  • Si us quedeu encallats i no es pot preveure a on posar els elements, sovint, ajuda dibuixar un diagrama de blocs simples del disseny de pàgina, i escriure sobre els elements que cregueu que haurien d'embolicar cada bloc.

Exemple

La següent captura de pantalla mostra un exemple del que la pàgina podria ser després del seu marcatge.

The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message

Avaluació

Si esteu seguint aquesta avaluació com a part d'un curs organitzat, heu de ser capaços de donar al vostre treball al vostre professor/tutor per qualificar-ho. Si sou d'auto-aprenentatge, llavors podeu obtenir la guia de qualificació amb molta facilitat preguntan fil del discurs de l'àrea d'aprenentatge o al canal d'IRC #mdn en Mozilla IRC. Prova el primer exercici - no hi ha res a guanyar amb trampa!

Document Tags and Contributors

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