Professional Documents
Culture Documents
CURSO
PROGRAMACIÓN WEB
ESTUDIANTE
ISIS REYES 2- 160-330
PROFESOR
DIEGO SANTIMATEO
III AÑO
I SEMESTRE
2007
INDICE
INTRODUCCIÓN..................................................................................... 3
I- METODOLOGÍA PARA APLICAR CSS. ............................................ 4
1.1-Escoger el browser adecuado. .......................................................... 4
1.2- Aplicar maquetación a la página..................................................... 4
1.3. Establecer nombre de los bloques o capas. ...................................... 6
1.4- Marcas encima de los bloques. ........................................................ 7
1.5. Elija un método para la posición de los bloques o capas.................. 8
1.6- Bloques resaltados........................................................................... 8
1.7-Iniciar con el contenido. ................................................................... 9
1.8- Estilo dentro de los bloques o capas. ..............................................10
1.9- Tomar en cuenta el CSS externo ...................................................11
1.10- Ocultar reglamentos de browser antiguos. ...................................11
1.11-Imprimir CSS................................................................................13
II- COMENTARIOS ................................................................................14
cual usted programe su página web, el mismo señala los pasos necesarios para
elaborar una página con estilo y fácil de manejar para quienes buscan
información.
Es necesario analizar cada uno éstos pasos, ya que garantizan que una
XHTL y CSS.
La metodología aplicada para el diseño de una página Web aplicando CSS, será detallada a
través de pasos para una mejor comprensión de cada una.
Este es el primer paso a seguir para construir una página Web con estilo CSS, la cual es decidir
que browser se va a utilizar para visualizar mi página Web.
Estos borwser se encuentran en 3 categorías: los viejos, los más recientes y nuevos. Es
importante cual de estas categorías se va visualizar mi página según los browser actuales que tiene
la Web.
Muestre lo que hizo!!!!!
En este caso la página que se realizó en lenguaje XHTML, la cual es necesario probar la
misma con varios browsers, ya que algunos no cumplen de manera apropiada con los estándares
que la W3C propone, y para que la página funcione correctamente de acuerdo a este lenguaje, se
escoge los browser de la categoría más recientes como: IE (Internet Explorer) y Mozilla-Firefox,
éstos browser brindan apoyo en la aplicación de hojas con estilos CSS, la cual se utiliza para dar
estilo a la página XHTML.
Se aplico dos estilos CSS, por la cual se realizo 2 bocetos diferentes, pero con bajo un
mismo concepto, no aburrir al visitante, con estilos monótonos, ya que se diseñaron varias páginas
para cada tema (html, css, xhtml, página principal) dentro de esta última se diseñaron dos páginas
con el mismo estilo (isis1s.css). y las tres primeras con el estilo (isisIE.css – isisW3C.css), hubieron
variaciones en cuanto colores, tamaño de letras, otras). Pero la maquetación mantiene una igual
estructura. En el siguiente paso 1.9 se explica, porque se utiliza estos dos estilos mencionados.
La maquetación establecida a las páginas:
Encabezado Encabezado
Menu de temas Contenedor
Contenedor Menú Titulo imagen
cuerpo
Menú2
cuerpo
imagen
Contenedor: es la capa principal, dentro de esta capa se colocan todos los elementos que va tener
la página. La cual se establece los alineamientos del texto, el ancho y alto, el color del fondo, entre
otras propiedades.
Cuerpo: es la capa que contiene la información principal, la cual contiene títulos, texto y otros
elementos que queremos situar.
Principal: al igual que el cuerpo es un nombre de la capa de las páginas de los temas, se colocan
los títulos, subtítulos, e imágenes ilustrativas.
Menú y menú lineal : la página Web consta de 2 menús de navegación, la primera es el menú de
enlace a los temas, y el segundo es el menú de enlaces a otras páginas relacionadas, esto en el
caso de las página principal. En el caso de las otras páginas están contienen un solo menú enlaces
al contenido de cada tema y retorno a la página principal.
Izquierda: es la capa que se coloca en el lado izquierdo de las páginas de los temas, esta contiene
una imagen relacionada a la misma.
Pie: es la capa que contiene el pie de página la cual es la dirección, nombre del autor de página.
Estos son algunos div que encontrará en estas páginas Web con estilo CSS.
En este paso se establece que posición debe llevar cada capa en una página web, para ello
hay varios propiedades que nos brindan estos diseños.
En la página diseñadas las propiedades aplicables para establecer la posición de cada página
están:
imagen
Hay que tomar en cuenta los tamaños de fuente, la cual es recomendable utilizar en algunos
casos las unidades relativas como: % y em, la cual son manejados por casi todos los browser.
En las páginas XHMTL se aplican estas unidades em y en otros casos los píxeles a las
fuentes de cada bloque o elementos dentro de las capas.
Código CSS aplicado a una capa de página principal (isis1.css)
#cuerpo p {
color : #1a3a53;
margin : 10px 15px;
text-align : justify;
font-family : tahoma;
font-size : 11px;
font-weight : bold;
line-height : 1.5em;
-hojas de estilo externa: la cual esta vinculada al documento XHMTL, la cual se convierte en una
hoja de estilo general que puede ser aplicada a otras páginas del diseño.
Se implementa en el codigo XHTML la siguiente sintaxis.
<link rel="stylesheet" href="isis1s.css" type="text/css" />
estilo css para paginas: principal, referencias y objetivo.
<link rel="stylesheet" href="isisW3C.css" type="text/css" />
estilo css para páginas de temas:XHML, HTML y CSS, la cual tiene estilos para visualizar en
Mozilla-Firefox.
<link rel="stylesheet" href="isisIE.css" type="text/css" />
estilo css para páginas de temas:XHML, HTML y CSS, la cual tiene estilos para visualizar en
Internet Explorer.
- hojas de estilo @import: es una hoja de estilo avanzada, la cual se utiliza para ocultar algunas
reglas del estilo CSS en browser antiguos.
Ejemplo: URL del @import(./stylesheet.css)
En la página XHTML se establece el estilo CSS externa, debido a la ventaja que presenta en
cuanto a la aplicación y aceptación de varias páginas Web.
Método de encubrimiento:
En las páginas XHTML no se utiliza el estilo @import css, sino, un código proporcinado por la
webtaller.com.
Método que se utilizó, ya que , lo que queda bien para Mozilla, queda descolocado en el IE y
viceversa. Es un problema. Sobre todo cuando proyectamos páginas con muchos bloques o capas.
De esta manera:
Luego de haber realizado este proyecto de metodología para CSS, puedo decir que he
aprendido mucho de las páginas web con estilos CSS, no cabe duda que al momento de
confeccionar una página y documentarme del mismo, me ayudado a ver las diferencias del
lenguaje HTML y XHTML y la importancia de aplicar estilos a ambos.
No es lo mismo confeccionar una página Web, a través de una plataforma como FrontPage
de Microsoft , que programándola y diseñándola. La experiencia fue grata, me gusto mucho,
porque descubrí que haciendo se puede lograr muchas cosas.
Son varios los puntos que fueron importantes al elaborar estas páginas en XHTML uno de
ellos es la valoración de códigos XHTML y CSS, la cual nos ayuda enormemente a detectar
algunos errores de acuerdo al estándar de lenguaje que se utilice y las reglas que tienen cada
browser para visualizar los elementos de estilos css.
Todavía falta mucho para seguir aprendiendo, pero ahí vamos sobre la marcha.