Estils del web del CRAI
Plantilles
El vostre web disposa d'un seguit de plantilles que us permetran maquetar el contingut de les pàgines que vulgueu crear. Seleccioneu la plantilla que més s'adapti al vostre contingut, tenint en compte, per exemple, si la pàgina que voleu crear necessita disposar d'un menú que doni accés a altres pàgines o si a més necessita d'un espai a la dreta per a text. El vostre web disposa de les següents plantilles:
Encapçalaments
Al vostre web disposeu dels següents tipus d'encapçalaments. Per aplicar-los, escriviu el text i sel·leccioneu del desplegable el "Format" que vulgueu (més informació a la pàgina 25 del "Manual de l'Usuari"):
Aquest és un exemple d'Encapçalament 3
Aquest és un exemple d'Encapçalament 4
Aquest és un exemple d'Encapçalament 5
Aquest és un exemple d'Encapçalament 6
És molt importat que useu els títols en ordre jeràrquic, a mesura que necessiteu introduir subapartats, per tal de mantenir uns mínims criteris d’estil entre tots els usuaris que mantenim aquest web.
Paràgrafs
Que podeu fer amb els paràgrafs?
A Houdini un paràgraf pot canviar d'aspecte si se li aplica una classe. Per fer-ho, cliqueu a sobre del paràgraf amb el botó dret del ratolí, entreu a "Afegir classe" i escolliu una de les opcions següents (més informació a la pàgina 26 del "Manual de l'Usuari"):
Per ressaltar certs textos els estils us permeten seleccionar un paràgraf i donar el format de paràgraf amb separador inferior, la qual cosa en el vostre web produeix l’efecte que esteu llegint.
Per ressaltar certs textos els estils us permeten seleccionar un paràgraf i donar el format de paràgraf amb pic decoratiu, la qual cosa en el vostre web produeix l’efecte que esteu llegint.
Per ressaltar certs textos els estils us permeten seleccionar un paràgraf i donar el format de paràgraf de text destacat, la qual cosa en el vostre web produeix l’efecte que esteu llegint.
Per ressaltar textos d'avís els estils us permeten seleccionar un paràgraf i donar el format de paràgraf d'alerta, la qual cosa en el vostre web produeix l’efecte que esteu llegint.
Aquest és un exemple de paràgraf amb imatge a la dreta. Quan vulgueu introduir una imatge enmig del text, col•loqueu en primer lloc el ratolí al primer caracter del paràgraf. Aleshores feu clic a la icona d'inserir imatge de l'editor visual. Houdini mostra una nova pantalla de tria d'imatge. Feu clic a l'opció de veure servidor i navegueu per l'explorador per tal de trobar la imatge desitjada. En cas que hàgiu de pujar vosaltres la imatge, aneu a l'opció d'Utilitats al menú superior de Houdini i aleshores seleccioneu l'eina de "Gestió d'arxius".
De vegades, quan heu utilitzat una foto al paràgraf us adonareu que el text següent no queda ben aliniat. Pot ser que la imatge sigui massa llarga, o bé que la línia quedi massa a tocar de la foto. En aquests casos podeu formatejar el text inferior com a Paràgraf de continuació d'imatge dreta. Aquest format alinia el text amb el paràgraf superior i corregeix aquest defecte que ha provocat la inclusió de la imatge.
Aquest és un exemple de paràgraf amb imatge a l'esquerra. Quan vulgueu introduir una imatge enmig del text, col•loqueu en primer lloc el ratolí al primer caracter del paràgraf. Aleshores feu clic a la icona d'inserir imatge de l'editor visual. Houdini mostra una nova pantalla de tria d'imatge. Feu clic a l'opció de veure servidor i navegueu per l'explorador per tal de trobar la imatge desitjada. En cas que hàgiu de pujar vosaltres la imatge, aneu a l'opció d'Utilitats al menú superior de Houdini i aleshores seleccioneu l'eina de "Gestió d'arxius".
Tipus de llistes
Llista de pics
Per crear una llista utilitzeu el botó "Llista de pics" de la barra d'eines.
Per realitzar els nivells a les llistes utilitzeu el botó de "Augmenta el sagnat" de la barra d'eines.
- Nivell 1: exemple de llista sense format.
- Nivell 2: exemple de llista sense format.
- Nivell 3: exemple de llista sense format.
- Nivell 3: exemple de llista sense format.
- Nivell 3: exemple de llista sense format.
- Nivell 2: exemple de llista sense format.
- Nivell 1: exemple de llista sense format
Llista ordenada
Per crear una llista ordenada, utilitzeu el botó "Numeració activada" de la barra d'eines.
- Llista ordenada
- Llista ordenada
- Llista ordenada
Que podeu fer amb les llistes?
Les llistes us poden ajudar a maquetar diversos continguts del web de forma força atractiva, tot aplicant-hi un seguit de classes que faran que la llista es visualitzi de diferents maneres. Per aplicar una classe a una llista, primer creeu la llista, després cliqueu amb el botó dret del ratolí a sobre de la llista i entreu a "Propietats de la lista de pics". (més informació a la pàgina 28 del "Manual de l'Usuari"). Escolliu les diferents opcions tenint en compte que la seva visualització és la següent:
Exemple de llista de dues columnes
Aquests llista disposa els elements en dues columnes, mostrant el primer element a la columna esquerra, el segon a la columna dreta i així successivament.
- Exemple de llista en dues columnes
- Exemple de llista en dues columnes
- Exemple de llista en dues columnes
- Exemple de llista en dues columnes
Exemple de llista amb fons de color
Les llistes amb fons de color us poden servir per presentar continguts d’índex d’apartats, d'enllaç i de diversos altres elements.
- Exemple de llista amb fons de color
- Exemple de llista amb fons de color
- Exemple de llista amb fons de color
Exemple de llista amb separadors
- Exemple de llista amb separadors
- Exemple de llista amb separadors
- Exemple de llista amb separadors
- Exemple d'enllaç en una llista amb separadors
Exemple de llista amb fons de color en dues columnes
En aquest cas, s'han combinat dues classes: la "Llista amb fons de color" i la "Llistes de dues columnes".
- Exemple de llista amb fons de color
- Exemple de llista amb fons de color
- Exemple de llista amb fons de color
- Exemple de llista amb fons de color
- Exemple de llista amb fons de color
- Exemple d'enllaç en una llista fons de color
Exemple de llista amb separadors en dues columnes
Un altra manera de donar format als vostres llistats és introduir aquest tipus de llista amb separadors:
- Exemple de llista amb separadors
- Exemple de llista amb separadors
- Exemple de llista amb separadors
- Exemple de llista amb separadors
- Exemple d'enllaç en una llista amb separadors
Taules
Per resaltar la primera fil·la, cliqueu amb el botó dret damunt de la taula, entreu a "Propietats de la taula" i escolliu l'opció "Table heather". (més informació a la pàgina 41 del "Manual de l'Usuari").
| Concepte | Concepte | Concepte |
|---|---|---|
| Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet. Mimimum veniami ex ea con dolor nisi ut aliquip. Consequat Duis autem vel eum iruire dolor in endrer | Con minimim venami quis nostrud laboris nisi ut aliquip ex ea com dolor in reprehenderit in voluptate nonumi. |
| Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet. Con minimim venami quis nostrud laboris nisi ut aliquip ex ea com dolor in reprehenderit in voluptate nonumi. Mimimum veniami ex ea con dolor nisi ut aliquip. Consequat Duis autem vel eum iruire dolor in endrer | Con minimim venami quis nostrud laboris nisi ut aliquip ex ea com dolor in reprehenderit in voluptate nonumi. |
Per resaltar la primera col·lumna, cliqueu amb el botó dret damunt de la taula, entreu a "Propietats de la taula" i escolliu l'opció "First column". (més informació a la pàgina 41 del "Manual de l'Usuari").
| First column | Lorem ipsum dolor sit amet. Con minimim venami quis nostrud laboris nisi ut aliquip ex ea com dolor in reprehenderit in voluptate nonumi. Mimimum veniami ex ea con dolor nisi ut aliquip. Consequat Duis autem vel eum iruire dolor in endrer |
|---|---|
| First column | Lorem ipsum dolor sit amet. Con minimim venami quis nostrud laboris nisi ut aliquip ex ea com dolor in reprehenderit in voluptate nonumi. Mimimum veniami ex ea con dolor nisi ut aliquip. Consequat Duis autem vel eum iruire dolor in endrer |
| First column | Lorem ipsum dolor sit amet. Con minimim venami quis nostrud laboris nisi ut aliquip ex ea com dolor in reprehenderit in voluptate nonumi. Mimimum veniami ex ea con dolor nisi ut aliquip. Consequat Duis autem vel eum iruire dolor in endrer |
Tipus d'enllaços
És una convenció destacar el text que va acompanyat d'un enllaç. Si marqueu amb un enllaç normal un text a l'editor visual, aquest apareix destacat d'aquesta manera.
A més a més, és una bona pràctica indicar que es tracta d'un enllaç extern i que si hom el selecciona abandonarà el nostre web. Apareix aleshores una imatge a la vora de l'enllaç que indica aquest fet. Això s'aconsegueix seleccionant la pestanya "Avançat" a la finestra d'enllaç que obre Houdini i introduint la instrucció "external" al camp "Rel". (més informació a la pàgina 36 del "Manual de l'Usuari""):
L'element pujar
Quan la plana és molt llarga és una bona convenció col·locar un petit indicador que permet accedir ràpidament a la part superior, on s’hi troba habitualment la navegació. (més informació a la pàgina 40 del "Manual de l'Usuari""):
Quan manteniu el web, podeu triar de col·locar aquest codi o de no fer-ho, segons quina sigui la llargada. Si el voleu introduir, seleccioneu el botó de Houdini a l'editor visual i trieu l'opció de Pujar. Amb aquesta acció Houdini introdueix automàticament un codi com el que veieu a continuació:
