Capitulo 2 - HTML y CSS PDF

HTML y CSS
Objetivo: Al finalizar el captulo, el alumno
Aplica hojas de estilo.
Disea tablas de datos.
Disea formularios.
Genera plantillas Web.
Temas
1.
Generacin de bibliotecas de estilos
2.
Generacin de grillas de datos
3.
Generacin de formularios
4.
Plantillas Web
Programa Java Web Application Developer
HTML y CSS
1.
17
Generacin de bibliotecas de estilos
Las pginas de estilos (CSS) permiten dar un mejor acabado a nuestros documentos web, por
lo tanto, ser conveniente tener bibliotecas de estilos para incorporar en nuestros proyectos
segn los requerimientos de nuestros clientes.
Es usual que las bibliotecas de estilos se guarden en archivos de extensin css donde se
agrupan atributos en clases, por ejemplo podramos tener el archivo font.css y en l definir las
siguientes clases:
HTML y CSS
18
Como puede apreciar las clases inician con un punto (.) seguido de una etiqueta que identifica
a la clase.
El archivo font.css se puede llamar desde cualquier documento web con el siguiente tag link:
Para luego hacer uso de l, como en el siguiente fragmento de cdigo con su salida a la
derecha:
HTML y CSS
19
Tambin, podemos agrupar en una clase varios atributos de estilo, como por ejemplo:
Tal vez, puede ser usado como texto principal dentro de nuestros documentos o agregarlo al
tag body.
Es muy comn especificar a que tag afectar una clase mediante el formato tag.clase, como
ilustramos con la clase formal que solo se podr usar con el tag a.
HTML y CSS
20
Selectores ID
Los selectores ID trabajan en forma similar a las clases con un par de excepciones: en lugar
del carcter punto (.) se usa # y segundo en un documento web solo se podr usar una sola
vez, es decir son nicos. Por ejemplo, observe la siguiente clase:
Su uso podra ser el siguiente:
Y la salida sera la siguiente:
HTML y CSS
21
Generacin de mens
Es usual que en documento Web se tenga que hacer un men
de vnculos, donde las filas impares sean de diferente color que
las filas pares y adems, cuando el puntero del mouse pase por
cada elemento del men, este cambie de color tanto en fondo
como en texto.
Este documento, muestra el estilo para desarrollar dichos
mens, mediante la clase menu que se muestra en cdigo
fuente ms adelante.
Asimismo, los enlaces para mens no sern los nicos en un desarrollo
Web, pues se requieren de otros estilos para los enlaces normales, como
muestra la figura a la derecha, que se ha desarrollado mediante una
clase de nombre normal mostrado en cdigo fuente ms adelante.
Este sera el cdigo fuente de un documento HTML que hace usos de los estilos mencionados
anteriormente:
HTML y CSS
22
Como notar en la lnea 7 los estilos estn en el documento links.css de la carpeta css y su
cdigo es el siguiente:
HTML y CSS
2.
23
Generacin de grillas de datos
Muchas veces se presentan consultas en tablas dentro de los documentos Web y se desea que
las filas impares se muestren de un color diferente al de las filas pares (tabla cebra). Como
muestra, observe la siguiente figura:
Adems, se desea que cuando el mouse pase sobre alguna de estas filas de la tabla, esta
cambie de color.
HTML y CSS
24
Todo esto es posible gracias a las pginas de estilo con cdigo JavaScript. En este documento,
se muestra el estilo y las funciones para ello.
El siguiente fragmento de cdigo muestra la seccin HEAD del documento que hace uso de los
estilos y funciones para obtener el efecto en estudio:
En la lnea 7 del documento se carga a tablas.css de la carpeta css y en la lnea 8 a tablas.js

de la carpeta js. A continuacin se muestra la seccin BODY con los datos de la tabla:
HTML y CSS
25
Como notar en la lnea 12 la tabla usa la clase tablaQry.

Asimismo, las filas de su TBODY usan las clases f1 para las impares y f2 para las pares,
llamando adems a funciones ilumina() para onmouseover y restaura() para onmouseout.
La funcin ilumina() cambia el color de la fila cuando el mouse pasa sobre ella y la funcin
restaura() restablece el color que tena la fila.
A continuacin, se muestra el cdigo de tablas.css donde puede cambiar los colores para
personalizarlos a su estilo deseado:
HTML y CSS
26
En el siguiente cdigo tablas.js se puede cambiar los colores para personalizarlos a su estilo
deseado:
HTML y CSS
27
Laboratorio 2.1
Generacin de una biblioteca de estilos para tablas
Utilizando la teora de este tema, genere una biblioteca de estilos para una tabla con la
siguiente presentacin:
HTML y CSS
3.
28
Generacin de formularios
Es frecuente presentar formularios en nuestras aplicaciones web, por eso se debe tener
algunas plantillas que permitan rpidamente dar solucin a los requerimientos de presentacin
de nuestros clientes, por ejemplo con el siguiente formulario:
HTML y CSS
29
Adems, se desea que cuando el mouse pase sobre las cajas de texto, estas cambien su color
de fondo.
El siguiente fragmento de cdigo muestra la seccin HEAD del documento que hace uso de los
estilos y funciones para obtener el efecto en estudio:
En la lnea 10 del documento se carga a form.css de la carpeta css.

El cdigo de la seccin HEAD sera la siguiente:
HTML y CSS
30
HTML y CSS
La biblioteca de estilos contenida en el archivo form.css sera el siguiente:
31
HTML y CSS
32
Laboratorio N 2.2
Generacin de una biblioteca de estilos para formularios
Utilizando la teora de este tema, genere una biblioteca de estilos para formularios con la
siguiente presentacin:
HTML y CSS
4.
33
Plantillas Web
Para el diseo de un proyecto web, se deben considerar los siguientes aspectos:
Objetivos
Conociendo cuales son los objetivos que persigue el cliente al realizar un sitio web, se
podr identificar los requerimientos del proyecto y sus posibles lectores.
Contenidos
Definidos los objetivos y los posibles lectores, se debe considerar el contenido que se
incorporar al sitio. Luego se proceder a filtrarlo y agruparlo de manera consistente
para presentarlo al usuario.
Estructura de la web
La estructura de la web es la diagramacin del men y el formato que tendrn las
pginas web. Se define as el esqueleto de la web utilizando mdulos para dividir cada
seccin y ordenarlas en base a su importancia. Podemos partir desde cero o utilizar una
plantilla web.
Navegacin
El sistema de navegacin o men es el que permite al usuario acceder a las diferentes
pginas del sitio web. Es necesario lograr un diseo web claro y una navegacin sencilla
que gue al usuario por el sitio y que sea una gua de lo que va a encontrar.
HTML y CSS
34
Diseo visual
El diseo web visual comprende la parte esttica de la pgina web. Se realiza tomando
en cuenta la identidad corporativa de la empresa, sus colores, logotipos, etc. En esta
etapa, se presenta uno o varios bocetos del diseo web que mostrarn al cliente una
versin cercana a la final.
En este sentido, se define una plantilla web (layout) que permita en forma gil y sencilla
resolver los aspectos considerados.
Para ello, se debe basar en un esqueleto que se podr ir llenando conforme se avance con el
proyecto. Este esqueleto de presentacin de informacin ordenada y coherente est basado en
los layouts que bsicamente podran tener las siguientes presentaciones entre otras:
HTML y CSS
35
HTML y CSS
Por ejemplo, al querer mostrar la siguiente documentacin web bsica:
Se tendra que considerar lo siguiente:
Un espacio para el banner (parte superior)

Un espacio vertical izquierdo para el men
Un espacio a la derecha para los contenidos
Un espacio de pie de pgina para cerrar
Entonces, se debe crear una plantilla (layout) para tal presentacin.
36
HTML y CSS
El archivo CSS sera el siguiente:
37
HTML y CSS
El contenido del JSP que use este archivo CSS sera el siguiente:
38
HTML y CSS
Y cuando ejecute el JSP, la presentacin sera la siguiente:
A esto, le puede agregar una imagen de su gusto para el banner.
39
HTML y CSS
40
Laboratorio N 2.3
Diseo y Generacin de una plantilla Web.
Utilizando la teora de este tema, genere una plantilla web con la siguiente presentacin:
Cortesa de http://www.ti-viable.com/ (propietario de esta pgina web)

Capitulo 2 - HTML y CSS PDF

Cargado por

Copyright:

Formatos disponibles

Capitulo 2 - HTML y CSS PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Capitulo 2 - HTML y CSS PDF

Cargado por

Copyright:

Formatos disponibles

HTML y CSS

Objetivo: Al finalizar el captulo, el alumno

Aplica hojas de estilo.

Disea tablas de datos.

Genera plantillas Web.

Generacin de bibliotecas de estilos

Generacin de grillas de datos

Programa Java Web Application Developer

Generacin de bibliotecas de estilos

Su uso podra ser el siguiente:

Y la salida sera la siguiente:

Generacin de grillas de datos

En la lnea 7 del documento se carga a tablas.css de la carpeta css y en la lnea 8 a tablas.js

Como notar en la lnea 12 la tabla usa la clase tablaQry.

Generacin de una biblioteca de estilos para tablas

En la lnea 10 del documento se carga a form.css de la carpeta css.

La biblioteca de estilos contenida en el archivo form.css sera el siguiente:

Generacin de una biblioteca de estilos para formularios

Para el diseo de un proyecto web, se deben considerar los siguientes aspectos:

Por ejemplo, al querer mostrar la siguiente documentacin web bsica:

Se tendra que considerar lo siguiente:

Un espacio para el banner (parte superior)

Entonces, se debe crear una plantilla (layout) para tal presentacin.

El archivo CSS sera el siguiente:

Y cuando ejecute el JSP, la presentacin sera la siguiente:

A esto, le puede agregar una imagen de su gusto para el banner.

Diseo y Generacin de una plantilla Web.

Cortesa de http://www.ti-viable.com/ (propietario de esta pgina web)

También podría gustarte