Disseny de la capçalera

Anàlisi previ

Considereu les mides següents aproximades al lloc web original. Les mides que us proporcionem, sols tenen l'objectiu de facilitar-vos l'aprenentatge al llarg del curs.

Aquí teniu la capçalera del model separada de la resta d'elements de la pàgina.

Si feu una anàlisi detallada de la capçalera comprovareu el següent:

  • La mida de la capçalera és de 960 px d'amplada i 132 d'alçada.
  • La capçalera està dividit en tres petits blocs:
    • Logotip de la pàgina
    • Menú principal (Design | Inspiration | Personal | Tutorials)
    • Menú secundari (About | Login)
  • Cadascú dels tres elements ocupa una posició relativa com a bloc en relació a l'origen de l'eix coordenades, ubicat a la cantonada superior-esquerra del bloc capçalera. Veieu el següent gràfic:

  1. Bloc corresponent a la capçalera
  2. Sub-bloc corresponent al logotip
  3. Sub-bloc corresponent a la navegació principal
  4. Sub-bloc corresponent a la navegació secundària

Abans de dibuixar res, creeu les sub-capes de la capa capçalera tal com us mostra la següent imatge:

Recordeu crear aquestes capes com a sub-capes de l'actual, és a dir, de la capa capçalera

Què significa cadascuna d'aquestes capes?

  • navegacio_principal: conté la navegació principal.
  • navegació_secundaria: conté la navegació secundària.
  • logotip: conté el logotip.
  • acotacions: conté totes les possibles anotacions i acotacions relatives als elements de la capçalera.

Creació de la capçalera

Les mides que corresponen a la capçalera són:

  • Amplada: 960px (total d'amplada de la pàgina)
  • Alçada: 132px

Per tant, creeu una guia que defineixi el límit inferior de la capçalera:

L'Inkscape, a diferència dels navegadors, situa l'origen de l'eix de coordenades a la cantonada inferior esquerra. Els navegadors el situen a la cantonada superior esquerra. Per tant, el valor de l'eix vertical Y del límit inferior de la capçalera equival a 624px (756px - 132px = 624px).

Creació del bloc logotip

Seleccioneu la capa logotip com la capa activa abans de començar aquesta part de la pràctica.

Per fer aquesta pràctica treballareu amb un logotip diferent a l'original del lloc web. Aquest serà el logotip que fareu servir.

Descarregueu-lo al vostre ordinador. Aquest logotip té unes mides de 261px d'amplada i 59px d'alçada. Per ajudar-vos en la tasca de situar el logotip, creeu una subcapa de la capa logotip anomenada guia_logotip.

Manteniu activa la capa guia_logotip i creeu un rectangle de les següents mides:

  • Amplada: 261px (equival a l'amplada del logotip).
  • Alçada: 132px (equival a l'alçada de la capçalera).

Per considerar aquest rectangle com a suport i ajuda per a la ubicació del logotip, desactiveu l'emplenat de color,

activeu el contorn amb un valor de color vermell saturat #ff0000ff (per diferenciar-lo del color de les guies)

i doneu-li una amplada a l'estil del contorn de 0,5px.

Aquest rectangle-guia anirà alineat al lateral esquerra de la capçalera. Cliqueu F1 i desplaceu-lo fins a aquesta posició, tal com se us mostra en la següent captura de pantalla.

Posicionament del logotip

Creeu una segona subcapa anomenada imatge_logotip. Manteniu-la com a capa activa.

Importeu el logotip a través del menú Fitxer | Importa .

Efectueu, a continuació, els següents passos per alinear, finalment, el logotip en relació amb el rectangle-guia:

  1. Obriu la finestra d'alineació a través del menú Objecte | Alinea i distribueix.
  2. Seleccioneu el rectangle-guia (feu clic al botó esquerra del ratolí amb el cursor a sobre del rectangle), premeu i manteniu la tecla Shift i, seguidament, cliqueu amb el botó esquerra del ratolí a sobre del logotip. Ara teniu els dos elements seleccionats.
  3. A l'opció Relatiu a de la finestra Alinea i distribueix seleccioneu L'element més gran.
  4. Cliqueu els botons Centra en l'eix horitzontal i Alinea els costats esquerres.

El resultat que hauríeu d'obtenir és el següent:

Creació del bloc navegació principal

Seleccioneu la capa navegacio_principal com la capa activa abans de començar aquesta part de la pràctica.

La navegació principal té unes dimensions aproximades de 416px d'amplada i 32px d'alçada i està alineada a l'eix horitzontal del logotip. L'espai entre el límit del lateral dret del logotip i el lateral esquerra del menú principal és de, aproximadament, 65px.

Creeu una subcapa anomenada guia_navegacio_principal sota la capa navegacio_principal i feu-la activa.

Creeu un rectangle-guia de mides 416px d'amplada i 32px.

Alineeu el rectangle-guia de la capa navegacio_principal amb el rectangle-guia de la capa logotip en relació al seu eix horitzontal. Seleccioneu les següents opcions de la finestra Alinea i Distribueix:

Després de realitzar aquesta operació, hauríeu de veure en pantalla el següent:

Desplaceu (fent ús del cursor dreta del teclat) el rectangle-guia de la capa actual fins arribar a les coordenades X = 326px (261px + 65px), Y = 673,750px.

Creació del text

Quines característiques té el text del menú de navegació principal? Gràcies al complement del Mozilla Firefox Firebug podeu saber aquesta informació ràpidament. Veieu la següent captura que mostra la relació que hi ha entre l'estructura HTML i les propietats de l'estil del text del menú de navegació principal:

Llavors, gràcies a la informació proporcionada pel Firebug, el text presenta aquestes característiques:

  • color de la font: #6f6c61
  • mida de la font: 22px

A continuació creareu el text de la navegació principal amb l'Inkscape.

  1. Creareu una capa específica per al text. Aquesta capa ha de ser una subcapa de la capa navegacio_principal
  2. Cliqueu F8 per crear el text. El punter de l'Inkscape es transformarà i apareixerà una petita A .
  3. Cliqueu a qualsevol punt de l'àrea de la pàgina i escriviu Design.
  4. Premeu F1 per activar el mode de selecció i transformació i, seguidament, aneu a Objecte | Emplemenat i contorn. Assigneu el color original del text del lloc web
  5. Obriu la finestra de gestió del text (menú Text | Text i tipus de lletra) i seleccioneu la font Arial i la mida de 22px. Apliqueu els canvis i cliqueu el botó Fes-lo predeterminat.
  6. Desplaceu el text a sobre del rectangle-guia i alineeu-lo en relació al seu eix horitzontal
  7. Creeu la resta del text del menú de navegació principal seguint les passes anteriors.

Per aconseguir que la distància dels espais entre els enllaços sigui idèntica, seleccioneu primer els quatre enllaços; obriu la finestra Objecte | Alinea i distribueix i cliqueu, finalment, sobre l'opció Distribueix la distància horitzontal entre objectes de forma equitativa

Creació del bloc de la navegació secundària

La realització de l'últim bloc no cal una explicació exhaustiva. Convé, això sí, fer-vos les següents puntualitzacions abans de començar:

  • Seleccioneu la capa navegacio_secundaria com a capa actual i creeu una subcapa nova anomenada guia_navegacio_secundaria.
  • Creeu un rectangle-guia de les següents característiques:
    • Amplada: 105px
    • Alçada: 21px
  • Desplaceu el rectangle-guia fins a la cantonada superior dreta de la pàgina. Gràcies a la retícula no cal que feu ús de l'ajudant d'alineació d'elements.
  • Creeu una subcapa anomenada fons_navegacio_secundaria. En aquesta capa creu un rectangle d'idèntiques dimensions al rectangle-guia però, a diferència d'aquest, eŀlimineu el contorn i ompliu l'emplenat de color #8F8D86. Ubiqueu aquest rectangle a la mateixa posició del rectangle-guia.
  • Creeu una subcapa anomenada text_navegacio_secundaria.
  • Creeu les paraules About i Login, amb les següents característiques:
    • Color: #FFFFFF
    • Mida: 12px
    • Tipus: Arial

Heu d'obtenir un resultat semblant a la imatge que veieu a continuació:

Visualització

És el moment de veure el disseny de la capçalera sense els rectangles-guia, la retícula i la graella.

Per desactivar la visibilitat dels rectangles-guia feu clic a les icones en forma d'ull que acompanyen a cadascuna de les capes implicades.

Per desactivar la visibilitat de la retícula i de la graella premeu Alt Gr + 1 i Alt Gr + 3.