Estils web La Llena

Títol 1

Títol 2

Títol 3

Títol 4

É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.

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.

Llistes

L'ús de llistes enriqueix formalment i visualment el vostre web. Si no useu cap format, les llistes apareixen de la manera següent:

• 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 1: exemple de llista sense format. 
  • Nivell 2: exemple de llista sense format.
  • Nivell 2: exemple de llista sense format. 
  • Nivell 2: exemple de llista sense format.
• Nivell 1: exemple de llista sense format.
• Nivell 2: exemple de llista sense format.
• Nivell 1: exemple de llista sense format.

Si useu els formats, les llistes us poden ajudar a maquetar diversos continguts del web de forma força atractiva:

Exemple de llista de dues columnes

Aquests llista disposa els elements en dues columnes principals.

• 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 en dues columnes
• 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 en dues columnes

Exemple de llista amb format caixa

Per aplicar el títol a la llista: primer creeu la llista. Després col·loqueu el ratolí a sobre de la frase que ha de ser el títol i cliqueu al botó dret i escolliu “Afegir Classe”/Títol format de caixa”

• Títol de llista amb format caixa
• Exemple de llista amb format caixa
• Exemple de llista amb format caixa
• Exemple de llista amb format caixa
• Exemple de vincle en una llista amb format caixa

Exemple de llista amb fons de color

Les llistes amb fons de color us poden servir per presentar continguts d’índex d’apartats, de vincles 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 vincle en una llista fons de color

Exemple de llista amb separadors

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 de llista amb fons de color en dues columnes

Les llistes amb fons de color us poden servir per presentar continguts d’índex d’apartats, de vincles 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 fons de color
• Exemple de llista amb fons de color
• Exemple de vincle en una llista fons de color

Exemple de llista amb format caixa en dues columnes

Per aplicar el títol a la llista: primer creeu la llista. Després col·loqueu el ratolí a sobre de la frase que ha de ser el títol i cliqueu al botó dret i escolliu “Afegir Classe”/Títol format de caixa”

• Títol de llista amb format caixa
• Exemple de llista amb format caixa
• Exemple de llista amb format caixa
• Exemple de llista amb format caixa
• Exemple de vincle en una llista amb format caixa

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 de llista amb separadors

Taules

Taula amb la primera fila destacada: aneu a "Propietats de la taula" (botó dret damunt de la taula) i trieu l'opció "Table heather"

	Concepte
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
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

Taula amb la primera columna destacada: aneu a "Propietats de la taula" (botó dret damunt de la taula) i trieu l’opció "First column"

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 de vincles

És una convenció destacar el text que va acompanyat d'un vincle. Si marqueu amb un vincle 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 vincle extern i que si hom el selecciona abandonarà el nostre web. Apareix aleshores una imatge a la vora del vincle que indica aquest fet. Això s'aconsegueix seleccionant la pestanya "Avançat" a la finestra de vincles que obre Houdini i introduint la instrucció "external" al camp "Rel".

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ó.

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ó:

Pujar

• lkjlkjgkldsjflkjdaslkgjdsagjkdlsag
• jkdashkjghasdjkghk
• klfdasjkghkjasg