Secció actual:

Estils del web

Seccions:
Ets a: Portada > Estils del web

Al vostre web disposeu dels següents tipus de títols:

Aquest és un exemple de Encapçalament 2

Aquest és un exemple de Encapçalament 3

Aquest és un exemple de Encapçalament 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 pic decoratiu.

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.

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.

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.

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 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 i dues columnes

  • Exemple de llista amb fons de color i dues columnes
  • Exemple de llista amb fons de color i dues columnes
  • Exemple de llista amb fons de color i dues columnes
  • Exemple de llista amb fons de color i dues columnes

Llistat de text en bloc

Per realitzar aquest estil, creeu un títol amb l'Encapçalament 2 i tot seguit el text en un mateix paràgraf. Despr´se cliqueu a sobre del títol amb el botó dret i escolliu la classe "Llistat en bloc".

Títol del llistat - Encapçalament 2

Exemple
Exemple
Exemple

Taules

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 Columna  2 Columna 3
La millor forma Ja pots fer bici activitat física
activitat física Ipsum La millor forma
activitat física Ipsum La millor forma
La millor forma Ja pots fer bici activitat física

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

  Table heather Table heather
Fil·la 2 Ja pots fer bici activitat física
Fil·la 3 Ipsum La millor forma
Fil·la 4 Ipsum La millor forma

Tipus d'enllaços

És una convenció destacar el text que va acompanyat d'un vincle. Si marqueu amb un enllaç normal un text a l'editor visual, aquest apareix destacat d'aquesta manera.

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

Ajuntament de les Borges Blanques
Facebook Twitter

Ajuntament de les Borges Blanques

C/ del Carme, 21
25400 Les Borges Blanques

Tel: 973 14 28 50
Fax: 973 14 31 70