Disseny gràfic de la composició del lloc web

Abans de continuar, hem considerat l'opció d'explicar-vos el procés de disseny del web partint d'un model. Si bé l'objectiu no es fer una còpia exacte (però sí que s'hi assembli el màxim possible), ens ajudarà a explicar-vos cadascuna de les pràctiques que resten per finalitzar aquest mòdul. Veieu una captura de la pàgina-model:

El model de disseny el podeu veure si feu clic en aquest enllaç.

Vegeu què és un disseny adaptat per a un bloc. No és difícil diferenciar les parts o seccions generals:

  • capçalera: on trobeu el logotip, la navegació principal i els enllaços referents a l'autentificació i informació general sobre el lloc.
  • columna central: és la columna de més amplada (ocupa 640px) i conté els articles del bloc.
  • columna lateral: és la columna de menys amplada (ocupa 280px) i conté diferents blocs d'interès relacionats amb l'autor/a i un bloc de navegació de l'estil núvol d'etiquetes.
  • peu: és la secció final, a peu del disseny on trobareu informació relacionada amb l'autoria del disseny i del bloc.

Disseny amb Inkscape

Obriu la plantilla amb l'Inkscape.

Feu servir les tecles d'accés ràpid | (Alt Gr + 1) per conmutar la visibilitat de les guies i # (Alt Gr + 3) per conmutar la visibilitat de la graella

Organitzar la composició en capes

Abans de tot, creareu les cinc capes per a cada divisió del disseny. Per això anireu al menú Capa | Capes (o premeu la combinació de tecles d'accés ràpid Majús. + Ctrl + L).

Cliqueu al símbol + per crear una capa nova. A cada capa la nomenareu en relació a cadascun dels blocs de la web.

Finalment, creeu tantes capes com es veu en la iŀlustració següent.

Per tal d'evitar un nombre elevat de capes que no permeti una gestió eficient dels diferents elements del disseny, feu ús de la funcionalitat com a subcapa de l'actual en el moment de crear una nova capa per a establir grups de subcapes. Per exemple, enlloc de crear dos capes independents per a la capçalera i una altre per al logotip, és més lògic crear la capa "logo" com a subcapa de la capa "capçalera". D'aquesta manera aconseguiu:

  1. Evitar la dispersió de les diferents capes que pertanyen a un mateix bloc
  2. Facilitar el bloqueig general d'un bloc i dels elements que pengen d'aquest. De l'altra manera hauríeu d'anar bloquejant una capa darrera l'altra.

Vegeu el següent exemple on es mostra la creació de la capa logotip com a subcapa de capçalera.

Finalment, obteniu la següent jerarquia de capes.

Fons de pantalla

Descarregueu l'arxiu gràfic pattern.gif a l'ordinador. Aquesta imatge petita només conté el patró que, repetida en les dues direccions, crearà el fons del disseny del lloc web.

Abans de continuar, seleccioneu el fons com la capa activa.

Importeu la imatge des de l'Inkscape (Fitxer | Importa). Us apareixerà la imatge seleccionada a l'àrea de dibuix.

Feu clic a Objecte | Patró | Objecte a patró. A partir d'aquest moment ja disposeu d'un patró nou basat en aquesta imatge per omplir qualsevol figura geomètrica.

Dibuixeu un rectangle d'unes dimensions superiors al rectangle base. Per exemple 1280*1024 píxels. Fixeu-vos que aquestes mides les podeu afegir numèricament. No és ara important que estigui alineat amb el límits de la pàgina base.

Premeu F1 per activar el mode cursor. Feu clic a Objecte | Emplenat i contorn. Us apareixerà la finestra que gestiona el color de l'emplenat, el color del contorn i, finalment, l'estil del contorn.

Feu clic a la icona de Patró. Accedireu a les opcions de patró.

Seleccioneu el patró (només aquell que comenci per l'expressió pattern). Acte seguit veureu que el rectangle està omplert pel patró que li acabeu d'assignar.

Inkscape assigna un número de pattern aleatori. No patiu si el número que l'Inkscape us ha assignat del pattern és diferent al que apareix a la captura de pantalla.

Ara cal que alineeu aquest rectangle en relació a la pàgina base. Feu clic a Objecte | Alinea i distribueix. Us apareixerà la següent finestra flotant

Seleccioneu l'opció Relatiu a: Pàgina i, seguidament, feu clic al botó Centra en l'eix vertical per alinear el rectangle en relació a l'eix central de la pàgina.

En acabat, feu clic al botó Alinea els superiors per alinear el rectangle en relació a l'eix superior de la pàgina.

El resultat ha de ser el següent:

Descarregueu el fitxer en aquesta fase del procés:960-2.zip