Disseny de la columna central

La columna central conté, si seguiu el model del lloc web que hem escollit a la pràctica 2, els articles del bloc. Analitzeu seguidament el bloc article:

  1. Un bloc general d'amplada 640px i 410px d'alçada. Aquest bloc està dividit en dos sub-blocs. El primer sub-bloc correspon a la imatge, capçalera de l'article i contingut de l'article; té un fons de color blanc (#ffffff) i les seves mides són de 640px d'amplada i 365px d'alçada. El segon sub-bloc conté els descriptors de l'article i l'enllaç a la totalitat de l'article. Aquest sub-bloc té unes mides de 640px d'amplada i 45px d'alçada. El color de fons és #efefef i presenta un contorn a la vorera superior de 1px de color #dfdfdf.
  2. La imatge de l'article té sempre les mateixes dimensions: 590px d'amplada i 200px d'alçada. Està alineada amb l'eix vertical i a una distància de 25px del marge superior del primer sub-bloc.
  3. La capçalera de l'article té una mida de 34px, el tipus de font és Times New Roman d'estil itàlica i de color #00abef. El text de l'article és de 11px de mida, de color #333333 i la font és Arial.
  4. El segon sub-bloc té a l'esquerra el conjunt de descriptors i, a la dreta, l'enllaç a l'article. El conjunt de descriptors són enllaços de color #ffffff sobre fons #00abef de mida 11px i tipus de font Arial. L'enllaç a l'article és del mateix color i mida del text de l'article.
  5. La caixa de la data de publicació de l'article és d'amplada 50px i 55px d'alçada. El color de fons és de #00abef. El dia té una mida de la font de 34px i el mes de 12px. El tipus de font és Arial.

Creació del bloc general

Cal que seleccioneu la capa central com a capa activa abans de realitzar qualsevol operació. És recomanable també que bloquegeu la capa capçalera.

El procediment de treball és el mateix que heu realitzat a la pràctica 4. Considereu els següents punts clau:

  1. Creeu quatre subcapes:
    • primer_bloc: En aquest bloc tractareu gràficament la imatge i el text introductori de l'article.
    • segon_bloc: En aquest bloc tractareu gràficament la caixa que conté els descriptors i l'enllaç al text complet de l'article.
    • data_publicacio: En aquest bloc tractareu gràficament la caixa que conté la data de publicació de l'article.
    • guia_central: Conté només el rectangle-guia que us ajudi a posicionar els tres blocs anteriors.

Seleccioneu la capa guia central i creeu un rectangle-guia de mides 640px per 410px. Desplaceu-lo fins que quedi alineat amb el lateral esquerra de la pàgina i el lateral inferior de la capçalera (recordeu la guia que vau crear a la pràctica 4).

Creació del primer bloc

Seleccioneu la capa primer_bloc i creeu les següents subcapes:

  • fons_primer_bloc: subcapa que conté el fons blanc de l'article.
  • imatge_primer_bloc: subcapa que conté la imatge de l'article.
  • text_primer_bloc: subcapa que conté el text de l'article.

Seleccioneu la subcapa fons_primer_bloc i dibuixeu el rectangle de color de fons #ffffff, mides de 640px d'amplada per 340px d'alçada. Ajudeu-vos del rectangle-guia de la capa guia_central per posicionar-lo correctament.

Seguidament, seleccioneu la capa imatge_primer_bloc com a capa activa. Descarregueu la següent imatge que us servirà de model per al disseny que esteu realitzant:

Aquesta imatge està sota llicència Creative Commons. L'autor us permet qualsevol ús sempre i quan reconeixeu l'autoria.

Per posicionar la imatge feu ús de l'ajudant Objecte | Alinea i distribueix. Situeu la imatge en relació a l'eix vertical i límit superior del rectangle de fons blanc per, finalment, desplaçar la imatge 25px cap avall.

Seleccioneu ara la subcapa text_primer_bloc i creeu la capçalera de l'article en base a les següents característiques de la font:

  • Mida: 34px
  • Tipus: Times New Roman
  • Estil: itàlica
  • Color #00abef

Alineu el text en relació al lateral esquerra i inferior de la imatge.

Finalment, desplaçeu el text (ajudeu-vos dels cursors per realitzar aquesta operació) 15px cap avall.

Inkscape disposa d'un efecte de text que us genera un nombre de paràgrafs i paraules determinat per vosaltres del text Lorem Ipsum. Aneu al menú Efectes | Text | Lorem Ipsum i proporcioneu aquests valors:

Abans de realitzar aquesta operació, prepareu el text del cos de l'article:

  1. Cliqueu el botó de text i, enlloc de fer només un clic a sobre de l'àrea de dibuix, traceu un rectangle. Veieu la captura següent:
  2. No escriviu res encara. Obriu la finestra de propietats del text (Text | Text i tipus de lletra) i seleccioneu aquestes característiques de la lletra:
    • Mida: 11px
    • Tipus: Arial
  3. Obriu la finestra de propietats de color (Objecte | Emplemenat i contorn) i seleccioneu el color #333333.
  4. Ja podeu generar el text Lorem Ipsum.

Si trobeu que hi ha poc espai entre les línies del text, proveu a modificar aquest valor a la finestra Text i tipus de lletra al camp Espaiat entre línees.

Alineu el text en relació al límit esquerra de la imatge. Veieu el resultat:

Creació del segon bloc

Seleccioneu la capa segon_bloc com a capa activa i creeu les següents subcapes:

  • fons_segon_bloc
  • descriptors_segon_bloc
  • enllaç_segon_bloc

Seleccioneu la subcapa fons_segon_bloc i dibuixeu un rectangle amb aquestes característiques:

  • Amplada: 640px
  • Alçada: 45px
  • Color de fons: #efefef
  • Línia de contorn del límit superior del rectangle de 1px d'amplada i de color #dfdfdf.

Alineu el nou rectangle amb el eix vertical i límit inferior del rectangle de fons blanc de la subcapa fons_primer_bloc.

Per dibuixar la línia de contorn, cliqueu Majúsc. + F6 i activareu la funció de dibuixar línies corbes i rectes. Cliqeu amb el botó esquerra del ratolí, en primer lloc, a la cantonada superior esquerra del rectangle; sense deixar de premer la tecla Ctrl (us permet traçar una recta horitzontal), desplaceu el cursor fins a la cantonada dreta del rectangle. Cliqueu amb el botó dret del ratolí per completar el traçat.

Alineu la línia horitzontal amb el límit superior del rectangle i, per acabar, obriu la finestra de propietats de Emplenat i contorn per assignar el color #dfdfdf (a la pestanya Pinta el contorn) i verificar que l'amplada de la línia és de 1px (a la pestanya Estil del contorn).

Seleccioneu la subcapa descriptors_segon_bloc. Seguiu el procediment que us expliquem a continuació per a la realització d'un descriptor.

  1. Creeu un rectangle de color #00abef d'unes mides aproximades de 70px d'amplada i 20px d'alçada.
  2. Creeu un text Lorem de color #ffffff, la font del tipus Arial i situeu-lo a sobre del rectangle anterior.
  3. Seleccioneu el rectangle blau i cliqueu F2 per activar l'opció Edita els camins pels nodes. Editeu els nodes del rectangle fins a ajustar a una mida proporcional al text.
  4. Traceu la línia blanca a sota del descriptor.
  5. Agrupeu els tres objectes (rectangle, text i línia) en un únic objecte. Seleccioneu els tres objectes i cliqueu Ctrl + G.
  6. Alineu el primer descriptor amb el límit esqierradel text de l'article.
  7. Repetiu aquesta operació per crear 2 o 3 descriptors més.

Finalment, seleccioneu la subcapa enllaç_segon_bloc i creeu el text Read full article amb les següents característiques:

  • Mida: 11px
  • Color: #333333
  • Tipus: Arial
  • Alineat al límit de la dreta de la imatge.

Creació del bloc de la data de publicació

Seleccioneu la capa data_publicació i creeu dos subcapes:

  • fons_data_publicació
  • text_data_publicació

Seleccioneu la capa fons_data_publicació i creeu un rectangle de:

  • Amplada: 50px
  • Alçada: 55px
  • Color: #00abef

Alineu el nou rectangle en relació a:

  • límit superior de la imatge
  • límit esquerra del rectangle-guia

Per finalitzar, seleccioneu la capa text_data_publicació i creeu el text de la data de publicació amb les característiques següents:

  • el text del dia ha de ser d'una mida de 34px.
  • el text del mes ha de ser d'una mida de 12px.
  • els dos són de color #ffffff
  • els dos han d'estar alineats amb l'eix vertical del rectangle blau.

Veieu el resultat.

Visualització

Desactiveu la visibilitat de les retícules, graelles i qualsevol rectangle-guia i comproveu el resultat final.