Simbol Int Bonanova

Estils del web

Tipus d'Encaçalaments

Al vostre web disposeu dels següents tipus d'encapçalaments. Per aplicar-los, escriviu el text i sel·leccioneu del desplegable el "Format" que vulgueu:

Aquest és un exemple d'Encapçalament 2

Aquest és un exemple d'Encapçalament 3

Aquest és un exemple d'Encapçalament 4

Aquest és un exemple d'encapçalament 5

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

Aquest és un paràgraf amb pic decoratiu.

Aquest és un paràgraf amb icona pdf

Aquest és un paràgraf amb icona vídeo

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.

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.

Imatges inserides dins del text ocupant tota l'amplada de la pàgina

Podeu inserir imatges de 660px d'amplada i d'aquesta manera aconseguireu tenir una imatge que opupi tota l'amplada de la pàgina.

Tipus de llistes

L'ús de llistes enriqueix formalment i visualment el vostre web.

Per crear una llista utilitzeu el botó "Llista de pics" de la barra d'eines.

Per realitzar els nivells a les llistes utilitzeu el botó de "Augmenta el sagnat" de la barra d'eines.

Si no apliqueu cap propietat a la llista, aquesta apareix 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.

Llista ordenada

Per crear una llista ordenada, utilitzeu el botó "Numeració activada" de la barra d'eines.

  1. Llista ordenada
  2. Llista ordenada
  3. 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".

Exemple de Llista amb fons de color

Les llistes amb fons de color us poden servir per presentar continguts d'índex d'apartats, d'enllaços i de diversos altres elements:

Exemple de Llista amb separadors

Exemple de Llista opcions amb fons de color i separadors

Taules

Per resaltar la primera fil·la, cliqueu amb el botó dret damunt de la taula, entreu a "Propietats de la taula" i escolliu l'opció "Table heather".

Amb la primera fil·la destacada
Text  Text Text Text Text
Text Text Text Text  Text

Per resaltar la primera col·lumna, cliqueu amb el botó dret damunt de la taula, entreu a "Propietats de la taula" i escolliu l'opció "First column".

Primera Text  Text Text Text
 col·lumna Text  Text Text  Text
destacada  Text  Text  Text  Text

Tipus d'enllaços

És una convenció destacar el text que va acompanyat d'un enllaç. Si marqueu amb un enllaç 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ó:

Pujar

Premi a la innovació

Erasmus

Facebook

Twitter

flickr

instgram

You Tube

Antics alumnes

Recomana'ns

ISO 9001