|
|
Cursos de Creacion de Páginas Web en CD. Recíbalos contra reembolso en su domicilio Garantía: si no le gustan, le devolvemos el dinero. Tel.: 96 169 19 76 |
|
|
|
|
Una herramienta flexible para lograr la estética deseada en su sitio web es la hoja de estilos.
Su función es la de definir “estilos” o características propias en los elementos HTML utilizados en la web, con lo cual se puede dar uniformidad y lograr actualizar un sitio web con mucha agilidad.
Un recurso válido es utilizar un único archivo en todo el sitio, así una modificación abarcará todas las páginas web del mismo.
A cada etiqueta HTML (<BODY>, <TABLE>, <P>, etc.) se le puede otorgar características especiales: color, color de fondo, estilo de la fuente, etc.
Con lo cual podremos:
ü Definir de un mismo color los enlaces en una página.
ü Definir tantas variantes como se requieran de un mismo elemento.
ü Definir eventos con el fin de generar el efecto de cambio de color que se observa al pasar el puntero del ratón por encima de un enlace de texto en el navegador.
ü Definir el tipo, tamaño y color de fuente.
ü Combinado con JavaScript, se obtienen páginas dinámicas.
Un importante punto es que no todos los navegadores responden de igual manera a una hoja de estilos, como la interpretación de las coordenadas o ciertos eventos. Es importante verificar que en los navegadores más utilizados la página web se visualice correctamente.
Existen estándares con respecto a este tema ya definidos; se los puede consultar en http://www.w3.org/Style/CSS/
Existen dos formas diferentes de relacionar los estilos a una página web: con link externos o link internos.
Los link internos son válidos cuando sólo se utilizan en ese caso puntual. Las características del estilo se definen dentro de la misma página.
Debemos recordar que un objetivo importante es el óptimo mantenimiento de un site y éste será más sencillo implementando los estilos a través de un único archivo .css (Cascading Style Sheets) que se relacionará con todos los .htm mediante un link externo.
El Microsoft FrontPage tiene la posibilidad de generar hojas de estilos nuevas como así también utilizar algunas predefinidas.
Desde el menú principal seleccionaremos “Nueva Página” y allí la pestaña “Hojas de estilos”
En caso de desear utilizar una hoja de estilos predefinida, seleccionaremos una hoja como “Dulces” para comenzar a modificarla o bien para utilizarla así como está diseñada.
Se deberán insertar los diferentes estilos con los que trabajaremos en la hoja en blanco, para lo cual desde le menú principal seleccionaremos “Formato” y luego “Estilo”.
La primera etiqueta que modificaremos es <BODY>, para ello debemos seleccionar la etiqueta dentro de un amplio listado y luego presionaremos el botón “Modificar”.
Cuando presionamos sobre el botón “Formato” (remarcado con color bordó en al siguiente imagen) se desplegrá una lista en donde se detallan todos los aspectos a modificar: Fuente, Párrafo, Borde, Numeración, Ubicación; seleccionaremos cada punto a modificar y asignaremos así las características que se aplicarán en el formulario de reservas.
Nuestra primera modificación será el tipo de fuente que tomará la etiqueta BODY en los HTML que utilicen esta hoja de estilo.
Con cada modificación se puede observar el resultado que se obtiene en el recuadro de vista previa (remarcado en color naranja en la siguiente imagen, donde dice “Vista previa”).
En el área “Descripción” se verá la sintaxis css correspondiente a los cambios realizados; esta área está remarcada en rojo en la siguiente imagen.
Una vez realizados todos los cambios necesarios, presionaremos la tecla “Aceptar”, y se verán en la pantalla solo los estilos definidos por el usuario. En este caso sólo la etiqueta BODY.
Luego de presionar nuevamente “Aceptar” en la página css se verá la sintaxis generada:
body { font-family: Century Gothic; font-size: 12 pt; text-align: Justificar }
Ahora bien, habrá que tomar cada elemento que es utilizado en el formulario para que éste se vea con el aspecto deseado. Esto se logra relacionando la página web con la hoja de estilo.
Aplicar la hoja de estilo
Una vez que definimos todos los elementos, hay que grabar la hoja de estilo y pasaremos a trabajar con el archivo html o asp.
Una vez que tengamos el archivo, debemos ir a la opción formato del menú principal y seleccionar “Vínculos de hojas de estilos”:
Una vez seleccionado, debemos indicar donde está ubicada la hoja de estilos y presionar “Aceptar”.
Y así terminamos de aplicar el estilo creado anteriormente.
Curso de Frontpage 1997, 2000, 2002, XP. Curso de creación y diseño de páginas web con Frontpage
Curso de creación y diseño de páginas web con Dreamweaver
