Tipus de títols
Al vostre web disposeu dels següents tipus de títols:
Aquest és un exemple de Títol 1
Aquest és un exemple de Títol 2
Aquest és un exemple de Títol 3
É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 ususaris que mantenim aquest web.
Tipus de paràgrafs
Exemple de paràgraf amb pic decoratiu. És un bon costum donar aquest format al primer paràgraf introductori de la plana per aconseguir un efecte ornamental que contribueix a la millora del aspecte general del nostre web.
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.
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.
La imatge hauria de tenir una amplada de 300px.
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 esquerra. 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 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.
Exemple de paràgraf grana.
El paràgraf PDF serveix per centrar el text i a l'enllaç afegir la icona de PDF.
Exemple de paràgraf PDF amb enllaç
Finalment, per acabar un apartat, podeu escollir donar al text el format de paràgraf amb separador inferior. Aquest format introdueix automàticament una línia que fa la funció de separador visual entre elements.
Tipus de 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 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:
- Títol 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 amb 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 vincle en una llista amb separadors
Exemple de llista caixa opcions
Per fer que el primer punt sigui el títol de la llista, s'ha d'afegir la classe "Títol caixa opcions"
- Títol de la llista caixa opcions
- Exemple de llista caixa opcions
- Exemple de llista caixa opcions
- Exemple de vincle en una llista caixa opcions
Taula
| Per destacar aquesta fila | aneu a "Propietats de la taula" | i trieu "Table Header" |
|---|---|---|
| Contingut | Contingut | Contingut |
| Contingut | Contingut | Contingut |
| Contingut | Contingut | Contingut |
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.