¿Contraseña olvidada?

Estils del vostre web

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

Aquest és un exemple de Encapçalament 3

Aquest és un exemple de Encapçalament 4

Aquest és un exemple de Encapçalament 5
Aquest és un exemple de Encapçalament  6

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

Paràgraf amb pic decoratiu.

Per ressaltar certs textos els estils us permeten seleccionar un paràgraf i donar la classe de paràgraf text destacat, 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 la classe de paràgraf destacat a l'esquerra, 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 la classe de paràgraf destacat a la dreta 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: (per tabular els diferents punts cliqueu a l'opció "Aumenta en sagnat" de l'editor visual)

  • 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

  1. Suspendisse potenti.
  2. Curabitur quis metus sed odio rutrum sagittis.
  3. Sed adipiscing, justo vel fringilla varius, mauris elit tristique velit, vel aliquet sem mauris non tortor.
  4. Suspendisse porttitor erat.
  5. Duis adipiscing.

Llista dues columnes

  • Suspendisse potenti.
  • Curabitur quis metus sed odio rutrum sagittis.
  • Sed adipiscing, justo vel fringilla varius, mauris elit tristique velit, vel aliquet sem mauris non tortor.
  • Suspendisse porttitor erat.
  • Duis adipiscing.
  • Curabitur condimentum nisl in sapien.
  • Donec ultricies urna nec dui.
  • Fusce est. Mauris id ante.

Llista opcions amb fons de color

  • Suspendisse potenti.
  • Curabitur quis metus sed odio rutrum sagittis.
  • Sed adipiscing, justo vel fringilla varius, mauris elit tristique velit, vel aliquet sem mauris non tortor.

Llista amb separadors

  • Suspendisse potenti.
  • Curabitur quis metus sed odio rutrum sagittis.
  • Sed adipiscing, justo vel fringilla varius, mauris elit tristique velit, vel aliquet sem mauris non tortor.
  • Suspendisse porttitor erat.

Imatges horitzontals

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.

Taules

Data Si voleu la 1ª fil·la destacada aneu a les "Propietats de la taula" i  marqueu l'opció "Table Header"
14/09/2010 Lorem ipsum dolor sit amet, consectetuer adipiscing elit dolor sit
14/09/2010 Lorem ipsum dolor sit amet, consectetuer adipiscing elit dolor sit
"Fist column" Si voleu la 1ª columna destacada aneu a les "Propietats de la taula" i marqueu "First column"
 Opció 1 Lorem ipsum dolor sit amet
 Opció 2 Lorem ipsum dolor sit amet

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ó:

Subir

  • Ministerio de Economía y Competitividad. Gobierno de España
  • Fondo Europeo de Desarrollo Regional
  • Instituto de Salud Carlos III
  • Fondo Europeo de Desarrollo Regional. Una manera de hacer Europa

Acción de Soporte a la Investigación y de Transferencia del CIBER en Epidemiología y Salud Pública (CIBERESP), dirigida y desarrollada por el Grupo de investigación en Servicios Sanitarios del IMIM-Hospital del Mar, con el apoyo de la Fundación IMIM.

© Todos los derechos reservados