Isis

capa que contiene un gif de avance

/siguiente y

anterior). Estos son algunos div que encontrará en estas páginas Web con estilo CSS.

Estudiante: Isis del C. Reyes V. III año. Programación Web. Metodología para aplicar Css.

8

1.5. Elija un método para la posición de los bloques o capas. 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: -

contenedor: alineado en el centro de la página (margin:auto).

-

Cabecera: alineado parte superior de la página.

-

Menulineal: alineado horizontal, con fondo de color.

-

Menú: flotante a la izquierda.

-

Imagen derecha: flotante de la derecha.

-

Cuerpo: alineado en el centro de la página.

-

Pie de página: alineado horizontalmente.

1.6- Bloques resaltados El comportamiento de las capas puede cambiar a un cierto grado cuando el contenido verdadero se pone dentro de ellos. Sin embargo, este método de resaltar los bloques de color, permite que usted se ocupe de las ediciones de colocación básicas primero, después contenta ediciones una vez que se establezcan las capas.

Estudiante: Isis del C. Reyes V. III año. Programación Web. Metodología para aplicar Css.

9

cabecera

cabecera

menulineal Izquierda

menu contenedor

cuerpo

derecha

Contenedor1, 2 principal

imagen

pie

pie2, pie3

Maquetación: pagina principal

Maquetación: páginas de resúmenes los colores varían de acuerdo a los temas. Ejemplo: resumen de html.

1.7-Iniciar con el contenido. Una vez de probar el posicionamiento y haber pasado la prueba con los browser escogidos, se debe proseguir a introducir el contenido del mismo, estos deben ser analizados por los browser. 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; Estudiante: Isis del C. Reyes V. III año. Programación Web. Metodología para aplicar Css.

10

font-family : tahoma; font-size : 11px; font-weight : bold; line-height : 1.5em; } Generalmente, se utiliza una combinación de varias propiedades y como se mencionó anteriormente va depender del diseño que se quiere lograr.

1.8- Estilo dentro de los bloques o capas. Una vez establecido la posición correcta y el contenido justo en lo deseado, es importante establecer las clases e identificaciones donde cada capa se le aplicará a cada estilo, la cual estará regido por valores y atributos respectivos a clases. Cada

sección de la página puede trabajarse individualmente y

cómodamente en cada uno de ellos. Ejemplo de clases aplicados a las páginas XHTML: <span class="ejemplos">Ejemplo visualizar: Esta clase tiene el estilo CSS siguiente: .ejemplos{ color:#FF0000; el color del texto es rojo. } Estilo CSS: //la imagen flota a la derecha, con margen, alto y ancho establecido. .imagen_bloque{ float:right; margin:50px; Estudiante: Isis del C. Reyes V. III año. Programación Web. Metodología para aplicar Css.

11

width:110px; height:110px; }

Estudiante: Isis del C. Reyes V. III año. Programación Web. Metodología para aplicar Css.

12

1.9- Tomar en cuenta el CSS externo Luego de haber probado la página nuevamente con los browser y tener una buena disposición CSS y es necesario colocar el documento CSS y ponerlo en una hoja externa del sitio. Esto se logra a través de 2 métodos o propiedades: -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. estilo css para paginas: principal, referencias y objetivo. estilo css para

páginas de temas:XHML, HTML y CSS, la cual tiene

estilos para visualizar en Mozilla-Firefox. 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.

Estudiante: Isis del C. Reyes V. III año. Programación Web. Metodología para aplicar Css.

13

1.10- Ocultar reglamentos de browser antiguos. El método que usted utiliza ligarse para los archivos externos del CSS dependerá de su nivel deseado de la ayuda del browser. Si usted desea no hacer caso de más viejos browsers, usted podría las hojas ligadas uso simple del estilo. Más viejos browsers rendirían muchas reglas mal y pueden hacerlo difícil para que los usuarios tengan acceso a algo del contenido. Para ignorar estos reglamentos se utiliza dos estilos: -

el primero con es estilo CSS externa;

-

el segundo con el estilo @import)

Es importante seguir unos pasos tales como: Método de encubrimiento: 1- Verificar su diseño en browser antiguos y se observa los elementos que no presenten resultados deseados a un archivo asociado al @import css. 2- Variación aceptable: se puede presentar algunas variaciones pero éstas no deben ser trascendentales, ya que siempre y cuando el usuario pueda acceder al contenido. En las páginas XHTML no se utiliza el estilo @import css, sino, un código proporcinado por la webtaller.com. Creamos tres hojas de estilo: isisIE.css: Declaración del layout para una visualización óptima en el Internet Explorer. isisW3C.css: Declaración del layout para una visualización óptima en los Estudiante: Isis del C. Reyes V. III año. Programación Web. Metodología para aplicar Css.

14

browser que siguen los estándares definidos por World Wide Web Consortium. En la sección HEAD de la página web añadir el siguiente código: 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.

1.11-Imprimir CSS Para imprimir el esquema de la página es necesario preparar el mismo para el proceso, la cual se deben cambiar algunos valores del archivo CSS, y presentar al usuario una mejor visión de la información, se debe guardar una copia del archivo con otro nombre en un lugar de la PC, luego se prosigue a quitar los titulo de los menús, gráficos y menús laterales, además colores y subrayados de enlace. Luego, se añade un nuevo enlace al documento XHTML. De esta manera: De esta forma podrá imprimir la información de su página Web.

Estudiante: Isis del C. Reyes V. III año. Programación Web. Metodología para aplicar Css.

15

II- COMENTARIOS 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. ¿Cómo ayudó la metodología en la realización del trabajo???

Todavía falta mucho para seguir aprendiendo, pero ahí vamos sobre la marcha. Es importante revisar la sintaxis y la semántica. ¿Dónde publicó su trabajo?? Licenciatura en......debió quedar en el pie En CSS dice................ esta clase se puede anudar.error de dedo que debe revisarse. En general el trabajo está bueno con deficiencias en la cantidad de temas cubiertos. Sigue la metodología propuesta y demuestra paso a paso cómo la usó que es lo que se esperaba. Estudiante: Isis del C. Reyes V. III año. Programación Web. Metodología para aplicar Css.

16

Estudiante: Isis del C. Reyes V. III año. Programación Web. Metodología para aplicar Css.

17