Estilos de la web

Tipo de títulos

En su web dispone de los siguientes tipos de títulos:

Este es un ejemplo de Título 2

Este es un ejemplo de Título 3

Este es un ejemplo de Título 4

Es muy importante que use los títulos en orden jerárquico, a medida que necesita introducir subapartados, para mantener unos mínimos criterios de estilo entre todos los usuarios que mantenemos esta web.


Tipo de párrafos

Esto que estáis leyendo es un ejemplo de párrafo con cuerpo de texto normal, que es el tipo de texto usado en toda la web cuando no se aplica ningún formato.

Párrafo de texto destacado. Para resaltar un texto de manera especial.

Para resaltar ciertos textos los estilos le permiten seleccionar un párrafo y dar la clase de párrafo texto destacado, lo que en su web produce el efecto que está leyendo.

Este es un ejemplo de párrafo con imagen a la izquierda. Cuando desee introducir una imagen en medio del texto, coloque en primer lugar el ratón en el primer carácter del párrafo. Entonces haga clic en el icono de insertar imagen del editor visual. Houdini muestra una nueva pantalla de selección de imagen. Haga clic en la opción de ver servidor y navega por el explorador para encontrar la imagen deseada. En caso de que tenga que subir vosotros la imagen, vaya a la opción de Utilidades en el menú superior de Houdini y después selecciona la herramienta de gestión de archivos.

A veces, cuando ha utilizado una foto en el párrafo os daréis cuenta que el texto no queda bien alineado. Puede que la imagen sea demasiado larga, o bien que la línea quede demasiado cerca de la foto. En estos casos puede formatear el texto inferior como párrafo continuación de imagen izquierda. Este formato alinia el texto con el párrafo superior y corrige este defecto que ha provocado la inclusión de la imagen.

Este es un ejemplo de párrafo con imagen a la derecha. Cuando desee introducir una imagen en medio del texto, coloque en primer lugar el ratón en el primer carácter del párrafo. Entonces haga clic en el icono de insertar imagen del editor visual. Houdini muestra una nueva pantalla de selección de imagen. Haga clic en la opción de ver servidor y navega por el explorador para encontrar la imagen deseada. En caso de que tenga que subir vosotros la imagen, vaya a la opción de Utilidades en el menú superior de Houdini y después selecciona la herramienta de gestión de archivos.

A veces, cuando ha utilizado una foto en el párrafo os daréis cuenta que el texto no queda bien alineado. Puede que la imagen sea demasiado larga, o bien que la línea quede demasiado cerca de la foto. En estos casos puede formatear el texto inferior como Párrafo de continuación de imagen derecha. Este formato alinia el texto con el párrafo superior y corrige este defecto que ha provocado la inclusión de la imagen.

Finalmente, para terminar un apartado, puede elegir dar al texto el formato de párrafo con separador inferior. Este formato introduce automáticamente una línea que hace la función de separador visual entre elementos.

Tipo de listas

El uso de listas enriquece formalmente y visualmente su web. Si no está usando ningún formato, las listas aparecen de la siguiente manera: (para tabular los diferentes puntos haga clic en la opción "Aumenta en sangrado" del editor visual)

  • Nivel 1: ejemplo de lista sin formato.
    • Nivel 2: ejemplo de lista sin formato.
      • Nivel 3: ejemplo de lista sin formato.
      • Nivel 3: ejemplo de lista sin formato.
      • Nivel 3: ejemplo de lista sin formato.
  • Nivel 1: ejemplo de lista sin formato.
    • Nivel 2: ejemplo de lista sin formato.
    • Nivel 2: ejemplo de lista sin formato.
    • Nivel 2: ejemplo de lista sin formato.
  • Nivel 1: ejemplo de lista sin formato.
    • Nivel 2: ejemplo de lista sin formato.
  • Nivel 1: ejemplo de lista sin formato.

Lista numerada

  1. Suspendisse potente.
  2. Curabitur quis METU sed odio rutrum sagitta.
  3. Sed adipiscing, justo velo Fringilla varices, Mauri élite tristique velita, velo aliquet siempre mauri non tórtola.
    1. Suspendisse porttitor erat.
    2. Traed adipiscing.
      1. Curabitur condimentum nisl in sepan.
      2. Donec ultricies urna nec dui.
  4. Fusce este. Mauri yd ante.

Lista de dos columnas

  • Suspendisse potente.
  • Curabitur quis METU sed odio rutrum sagitta.
  • Sed adipiscing, justo velo Fringilla varices, Mauri élite tristique velita, velo aliquet siempre mauri non tórtola.
  • Suspendisse porttitor erat.
  • Traed adipiscing.
  • Curabitur condimentum nisl in sepan.
  • Donec ultricies urna nec dui.
  • Fusce este. Mauri yd ante.

Lista opciones con fondo de color

  • Suspendisse potente.
  • Curabitur quis METU sed odio rutrum sagitta.
  • Sed adipiscing, justo velo Fringilla varices, Mauri élite tristique velita, velo aliquet siempre mauri non tórtola.
    • Suspendisse porttitor erat.
    • Traed adipiscing.
      • Curabitur condimentum nisl in sepan.
      • Donec ultricies urna nec dui.
  • Fusce este. Mauri yd ante.

El elemento subir

Cuando la página es muy larga es una buena convención colocar un pequeño indicador que permite acceder rápidamente a la parte superior, donde se encuentra habitualmente la navegación.

Cuando mantenga la web, puede elegir colocar este código o de no hacerlo, según sea la longitud. Si desea introducir, seleccione el botón de Houdini al editor visual y seleccione la opción de Subir. Con esta acción Houdini introduce automáticamente un código como el que veis a continuación:

Subir



SEFAP - Sociedad Española de Farmacéuticos de Atención Primaria

Contacto

C/ Villanueva 11, 7º
28001 Madrid
Teléfono: 91 431 25 60
Fax: 91 432 81 00

SEFAP

Web oficial de la Sociedad Española de Farmacéuticos de Atención Primaria.