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.
Paràgraf amb imatge a la dreta orem 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 endrerit, voluptate velit est. Sit amet, consectetuer adipiscing elit, sed diam nonummi. Euismod tincidunt ut laroeet dolore magna aliquam erat voluptat. Ut wisi enin ad minim. Quis nostrud ad
Paràgraf de continuació d'imatge dreta orem 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 endrerit, voluptate velit est. Sit amet, consectetuer adipiscing elit, sed diam nonummi. Euismod tincidunt ut laroeet dolore magna aliquam erat voluptat. Ut wisi enin ad minim. Quis nostrud ad
Paràgraf amb imatge a l'esquerra orem 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 endrerit, voluptate velit est. Sit amet, consectetuer adipiscing elit, sed diam nonummi. Euismod tincidunt ut laroeet dolore magna aliquam erat voluptat. Ut wisi enin ad minim. Quis nostrud ad
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 2: 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ó:
- lkjlkjgkldsjflkjdaslkgjdsagjkdlsag
- jkdashkjghasdjkghk
- klfdasjkghkjasg