12.170 cursos gratis
8.781.800 alumnos
Facebook Twitter YouTube
Busca cursos gratis:

Diseño de páginas web con FrontPage

Autor: Fernando Mur
Curso:
9,01/10 (898 opiniones) |116556 alumnos|Fecha publicación: 18/09/2002

Capítulo 15:

 Las hojas de estilos

Una hoja de estilo es una colección de reglas que afectan a la apariencia de un documento, puede estar incrustada en la página o almacenada en un archivo independiente que luego se enlaza a una o más páginas de su sitio.

FrontPage facilita el trabajo con las declaraciones de estilos mediante el cuadro de diálogo Estilo, que aparece en muchos cuadros de diálogo de FrontPage. Actualmente la forma habitual de la tecnología de estilo es las Hojas de Estilo en Cascada (CSS).

Podemos seguir el funcionamiento de las Hojas de Estilo a través del siguiente Tutorial disponible en Internet, que nos explica el fundamento de la programación de las hojas de estilo en HTML.

FrontPage nos ofrece varias plantillas de hojas de estilo, que suponen trabajar con algo hecho y para utilizarlas seguimos los siguientes pasos:

1.Seleccionar Archivo, Nuevo, Página. Entonces aparece el cuadro de diálogo Nuevo en el que haremos clic en la pestaña Hoja de estilos hasta que aparezca la siguiente ventana:

Las hojas de estilos

2.Elegiremos el estilo que queramos, tras lo cual FrontPage abrirá la hoja de estilo en la que veremos reglas de estilo o conjuntos de reglas. Si queremos podemos hacer cualquier modificación a la hoja de estilo guardándola en el sitio web junto con las páginas. De esta forma ya tenemos una hoja de estilos externa, tras lo cual deberemos asociar la hoja a nuestras páginas.

Para añadir la hoja de estilos CSS a parte de la web habrá que enlazarla a cada archivo empleando la opción Vínculos de hoja de estilos del menú Formato, apareciendo el siguiente cuadro de diálogo:

Las hojas de estilos

3.Si queremos que la hoja se aplique a todas las páginas de nuestra web, seleccionamos Todas las páginas. En cambio, si sólo lo queremos aplicar a ciertas páginas, seleccionamos Páginas seleccionadas.Pulsamos en Agregar para encontrar y añadir el archivo de la hoja de estilos (con extensión CSS).

Pulsando Aceptar, FrontPage enlaza automáticamente la hoja de estilos a las páginas que se han elegido.

Para crear una hoja de estilo auténtica, seleccionaremos el menú Formato, Estilo, tras lo que FrontPage abre un cuadro de diálogo que contiene un conjunto de etiquetas, así como un método personalizado de modificación. Es preciso conocer el lenguaje HTML ya que lo que se van a modificar son las etiquetas de este lenguaje. FrontPage colocará las etiquetas de hojas de estilos (<STYLE> y </STYLE>) de forma automática.

EJEMPLO:

Suponemos que aplicamos una regla para que todos los párrafos estén alineados en el centro. Al seleccionar en la barra de menús Fomato, Estilo nos aparece la siguiente ventana:

Las hojas de estilos

Elegimos el selector que queremos modificar, en este caso <p> que es la etiqueta de párrafo. A continuación hacemos clic en Modificar para crear un estilo para esta etiqueta, seleccionando la opción de alineación en el centro.

Aparecerá el siguiente cuadro de diálogo

Las hojas de estilos

En esta ventana, haciendo clic en Formato podremos modificar las opciones en cuanto a fuente, alineación, etc. de todos los párrafos.

Una vez generado el estilo, el código HTML que se nos ha generado ha sido el siguiente, incluido dentro de la etiqueta HEAD del documento.

<style>

<!--

p { text-align: center }

-->

</style>

Así pues, las hojas de estilo nos permiten configurar la presentación de una página o sitio web de una forma muy sencilla, aunque requiere el conocimiento del lenguaje de programación HTML.

Ejemplo de estilos sobre los hipervínculos.- En muchas páginas hemos observado que los hipervínculos aparecen sin el subrayado habitual o cambian de color cuando situamos el puntero del ratón encima de ellos o el subrayado aparece sólo cuando lo hemos visitado. Estos efectos se hacen con hojas de estilos, modificando las características de la etiqueta <a> del código HTML. El hipervínculo lo podemos clasificar de cuatro formas:

a:active: define el estilo de un hipervínculo activo

a:hover: define el estilo del hipervínculo cuando situamos el ratón sobre él.

a:link: define el estilo del hipervínculo cuando entramos en la web y no actuamos sobre él.

a:visited: define cómo será la apariencia del hipervínculo cuando lo hemos visitado

La forma de modificar estos selectores es la que hemos visto anteriormente, seleccionando el menú Formato, Estilo y cuando elijamos las etiquetas que vamos a modificar, seleccionamos "a" y le añadimos las propiedades de los hipervínculos.

Una vez que hemos añadido hover (estilo del link cuando situamos el ratón encima) seleccionamos Formato y definimos la fuente, el color, y el relleno.

Capítulo siguiente - Los formularios - Usos

Nuestras novedades en tu e-mail

Escribe tu e-mail:



MailxMail tratará tus datos para realizar acciones promocionales (vía email y/o teléfono).
En la política de privacidad conocerás tu derechos y gestionarás la baja.

Cursos similares a Diseño de páginas web con FrontPage



  • Vídeo
  • Alumnos
  • Valoración
  • Cursos
1. Diseño páginas web. Insertar imágenes
¿Qué sería de nuestras páginas Web si, además de texto, no les insertásemos... [18/06/10]
825  
2. Diseño páginas web con editor HTML
Diseño páginas web con Editor HTML , cuantas veces al visitar una Web , nos hemos... [02/03/10]
3.716  
3. Colocar icono en nuestras páginas web
Conoce la manera más fácil de personalizar tu pagina, aplicando un icono... [14/11/11]
40  

¿Qué es mailxmail.com?|ISSN: 1699-4914|Ayuda
Publicidad|Condiciones legales de mailxmail