language
PARC DEL FÒRUM DE BARCELONA
Moll de la Vela, 2 08930 Sant Adrià del Besós
Telf. (+34) 93 356 09 31 •info(ELIMINAR)@apcc.cat
Full d'estils
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
Aquest és un exemple de 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.
Tipus de paràgrafs
Això que esteu llegint és un exemple de paràgraf amb cos de text normal, que és el tipus de text usat a tot el web quan no s'hi aplica cap format. Això que esteu llegint és un exemple de paràgraf amb cos de text normal, que és el tipus de text usat a tot el web quan no s'hi aplica cap format.
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.
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.
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.
- Llista ordenada
- Llista ordenada
- Llista ordenada
Exemple de Llista de 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 de 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 de caixa.
- Exemple de llista amb format de caixa
- Exemple de llista amb format de caixa
- Exemple de vincle en una Llista amb format de 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 amb fons de color
Exemple de Llista amb separadors
- Exemple de Llista amb separadors
- Exemple de Llista amb separadors
- Exemple vincle en una Llista amb separadors
Exemple de Llistat dos columnes i fons de color
- Exemple de llista amb dos columnes i fons de color
- Exemple de llista amb dos columnes i fons de color
- Exemple de llista amb dos columnes i fons de color
- Exemple de llista amb dos columnes i fons de color
Exemple de dos columnes i separadors
- Exemple de llista amb dos columnes i separadors
- Exemple de llista amb dos columnes i separadors
- Exemple de llista amb dos columnes i separadors
- Exemple de llista amb dos columnes i 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"
| Data | Concepte |
|---|---|
| 14/12/2009 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit |
| 14/12/2009 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit |
| 14/12/2009 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit |
| 14/12/2009 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit |
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 | Cel·la | Cel·la |
|---|---|---|
| First column | Cel·la | Cel·la |
| First column | Cel·la | Cel·la |
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.
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ó:
Amb el suport de:
