La "capçalera", o la part superior de la pàgina web, fa que el vostre lloc sigui únic, que pugui diferir dels altres i que reflecteixi els detalls del vostre projecte d'Internet. Amb l’ajut d’una capçalera original i ben feta, podeu decorar i perfeccionar qualsevol pàgina web i, per fer-la vosaltres, heu d’aprendre a dissenyar aquest element web.
Instruccions
Pas 1
Si voleu que el vostre lloc tingui dimensions estàtiques i constants, heu de crear una capçalera estàtica que no canviï en funció del canvi de l'amplada de la pantalla. Determineu l'amplada i l'alçada de la capçalera (per exemple, 996x230) i inseriu una imatge de fons al bloc superior mitjançant el següent codi CSS, on header-1.jpg
fons: # a6b7d3 url (img / header-1.jpg) sense repetir;
amplada: 996 px;
alçada: 230 px;
} El codi HTML d'una capçalera d'aquest tipus serà així:
Pas 2
Si el lloc està construït de manera que les seves dimensions s’ajusten a l’amplada de la pantalla, s’hauria de configurar la capçalera tenint en compte totes les resolucions principals del monitor. L'amplada màxima d'aquesta capçalera ha de ser de 1920 píxels. Per inserir aquesta capçalera, utilitzeu el codi CSS: #header {background: # a6b7d3 url (img / header-2.jpg) centre sense repetir; altura: 250 px;} El codi HTML en aquest cas és similar a l'anterior. El codi CSS s'ha canviat en alguns paràmetres; ara té un atribut per centrar la imatge de capçalera, que li permet ajustar el fons a qualsevol amplada de pantalla.
Pas 3
També podeu crear una capçalera més complexa, tallada en diversos blocs de fons, que canviarà la seva posició en funció de la mida de la finestra. El CSS per a aquesta capçalera és més complex i extens i consisteix a repetir diversos elements de fons d’acord amb les dimensions flotants de la finestra del navegador on es pot veure el vostre lloc.
