1

UNIVERSIDAD DE PANAMÁ CENTRO REGIONAL UNIVERSITARIO DE VERAGUAS FACULTAD DE INFORMÁTICA, ELECTRONICA Y COMUNICACIÓN INGENIERIA EN INFORMÁTICA

Metodología para aplicar CSS

PROFESOR DIEGO SANTIMATEO

ESTUDIANTE FÁTIMA DEL R. ÁLVAREZ 9-722-549 IV AÑO FECHA DE ENTREGA /5/2008

1

TABLA DE CONTENIDO

Pág.

OBJETIVOS GENERALES ........................................................................... 1 INTRODUCCIÓN ............................................................................................2 CAPÍTULO 1: METODOLOGÍA PARA APLICAR CSS ............................ 3 1.1 Decidir un nivel de soporte de navegador ....................................................4 1.2 Buscar los contenedores ............................................................................... 7 1.3 Nombre de los contenedores ....................................................................... 8 1.4 Marcar los contenedores ............................................................................ 10 1.5 Elegir un método de posición para los contenedores ................................ 11 1.6 Caja coloreadas ........................................................................................... 12 1.7 Colocando el contenido ............................................................................. 13 1.8 Aplicando caja en los contenedores .......................................................... 15 1.9 Sacando el CSS ............................................................................................ 16 1.10 Ocultando estilos de navegadores antiguos ............................................. 17 1.11 Imprimir el CSS ........................................................................................ 20 VALIDACIÓN DE LA PÁGINA WEB .......................................................22

2

CONCLUSIONES ..........................................................................................23

Fátima del R. Álvarez IV año -Ingeniería Informática

Metodología para aplicar CSS

1

1

OBJETIVOS GENERALES Describir cada pasó de la metodología presentada para aplicar CSS. Aplicar la metodología para dar estilo a un documento XHTML.

Fátima del R. Álvarez IV año -Ingeniería Informática

Metodología para aplicar CSS

2

INTRODUCCIÓN El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. Esto es así porque fue concebido para otros usos (científicos sobre todo), distinto a los actuales, mucho más amplios. Este proyecto tiene como objetivo presentar una metodología de aplicación CSS, ofreciendo una guía para iniciar la construcción de una página Web; ya que brinda los pasos que debes seguir para realizar un documento XHTML o HTML con estilo CSS. Es importante que cada paso sea analizado y desarrollado ya que así garantizaremos el buen desempeño y diseño de nuestra página Web, evitando la incompatibilidad con los navegadores y la desconfiguración de la misma. En este documento describo cada paso de la metodología para la aplicación de CSS, además explico cómo la utilice con el lenguaje XHTML para desarrollar mi pagina Web sobre “La Plataforma.NET”.

Fátima del R. Álvarez IV año -Ingeniería Informática

Metodología para aplicar CSS

3

CAPÍTULO 1: METODOLOGÍA PARA APLICAR CSS

Fátima del R. Álvarez IV año -Ingeniería Informática

Metodología para aplicar CSS

4

METODOLOGÍA PARA APLICAR CSS La metodología sugerida para la elaboración de una página Web aplicando estilo CSS, la detallare a continuación para una mayor comprensión:

1.1

Decidir el nivel de soporte de navegador

Antes de

construir un diseño CSS para una página Web se debe determinar

primero, los navegadores que me permitirán la visualización de la página Web.

Esta tecnología es bastante nueva, por lo que no todos los navegadores la soportan. En concreto, sólo los navegadores de Netscape versiones de la 4 en adelante y de Microsoft a partir de la versión 3 son capaces de comprender los estilos en sintaxis CSS. Además cabe destacar que no todos los navegadores implementan las mismas funciones de hojas de estilos, por ejemplo, Microsoft Internet Explorer 3 no soporta todo lo relativo a capas.

Esto quiere decir que debemos de usar esta tecnología con cuidado, ya que muchos usuarios no podrán ver los formatos que apliquemos a las páginas con CSS.

Fátima del R. Álvarez IV año -Ingeniería Informática

Metodología para aplicar CSS

5

En la actualidad existen 3 niveles básicos de navegadores compatibles con los estilos CSS:

Navegadores más antiguos Win/Netscape4.x, Win/InternetExplore4.x, Mac/Netscape4.x, Mac/InternetExplorer4.x, etc

Los navegadores recientes Win / InternetExplore 5, Win / InternetExplore 5,5, Win / Netscape 6, Win/Mozilla1.x, Win/Opera6, Mac/Netscape6, Mac/Mozilla1.x, etc Mac/Opera5

Los navegadores modernos Win / InternetExplore 6, Win / Netscape7, Win/Mozilla1.5, Win/Firebird0.7, Win/Opera7,

Mac/InternetExplore5.2,

Mac/Safari1,

Mac

/

Netscape7,

Mac/Mozilla1.5, etc Mac/Opera6.

Es importante resaltar que con CSS el navegador debería mostrar el diseño razonable o por lo menos general de nuestra página. Mi página la cree con el lenguaje XHTML y CSS, las prueba de las página las realice con

dos

navegadores muy comunes Win/Mozilla 2.5, Win /

InternetExplore 7 al principio si confronte problemas con el diseño CSS por que se desconfiguraba con el Mozilla, pero luego se solucionaron con algunos ajustes en la capas de la caja CSS.

Fátima del R. Álvarez IV año -Ingeniería Informática

Metodología para aplicar CSS

6

Vista de la página con el navegador Mozilla 2.5

Vista de la página con el navegador InternetExplore 7

Fátima del R. Álvarez IV año -Ingeniería Informática

Metodología para aplicar CSS

7

1.2

Buscar los contenedores

Antes de colocar la información y elementos a la página web se debe realizar un boceto o bosquejo de los contenedores, estos bocetos me permitirán establecer como quiero que sea la presentación de mi página, el lugar donde se quiere ubicar cada texto, imagen, menú, y otros detalles. El boceto puede ser un diseño en papel, digital o una página ya existente. Yo cree un boceto en papel y luego digital, de mis páginas “La Plataforma .NET”, en donde explico que es .NET y brindo enlaces y documentos que están relacionados con estas tecnologías y que profundizan sobre ella. La Maquetación de mi página principal:

Fátima del R. Álvarez IV año -Ingeniería Informática

Metodología para aplicar CSS

8

La Maquetación de mis otras 2 páginas componentes.NET y Documentación:

Estas páginas son similares a la página principal lo único que varia es la ubicación de las imágenes y el texto.

1.3

Nombre de los contenedores

Cada sección contiene información de la página web, esta información está dividida por capas y cada una de ellas se representa por un nombre de acuerdo al contenido que aloje. Estas son las capas más importantes de mi página Web: Contenedor (container): es la capa base o principal de la página, ella se encarga de alojar todos los componentes que formaran mi página. Su diseño se configurara de acuerdo a nuestro interés y necesidad, ejemplo fondo, Fátima del R. Álvarez IV año -Ingeniería Informática

Metodología para aplicar CSS

9

alineación, ancho, alto, bordes, tipo de contenedor (absoluto, relativo, fijo, etc). Cabecera (header): en esta capa colocamos el encabezado principal de nuestra página Web, en mi caso “La Plataforma .NET”, esta capa la decoraremos con un banner o una imagen, todo depende de la creatividad y gusto del diseñador. Contenido (contents): es la capa que contiene la información de la página, explicaciones de la plataforma .NET, imágenes y vínculos y demás detalles referentes a .NET. Menú horizontal y lineal: la página web consta de un menú vertical de referencias sobre .NET en ella podemos encontrar vínculos, artículos y documentos interesantes acordes a las tecnologías .NET. También hay un menú

horizontal

para

desplazarnos

a

las

páginas

(componentes,

documentación) que conforman toda mi página web. Mi Menú Horizontal

Fátima del R. Álvarez IV año -Ingeniería Informática

Menú Vertical

Metodología para aplicar CSS

10

Pie de página (footer): en esta capa colocaremos el nombre y dirección del autor de la página, en mi caso coloque mi nombre y mi correo electrónico para que puedan comunicarse conmigo si tiene algún interés de compartir experiencias en los temas abordados en la página.

1.4

Marcar los contenedores

Para representan cada capa de la página Web los elementos se identifican con un , si los contenedores son únicos para una página, se utiliza ids en vez de clases. Además que la etiqueta tiene un uso adicional que es el de crear divisiones en la página a las que podremos aplicar una cantidad adicional de atributos para modificar sus comportamientos. Ejemplo: con el atributo align de HTML podemos alinear la división al centro, izquierda, derecha o justificada. Pero su uso más destacado es el de convertir esa división en una capa. En mi página se especifican algunos atributos a las capas como este: Ir arriba Fátima del R. Álvarez IV año -Ingeniería Informática

Metodología para aplicar CSS

11

1.5

Elegir un método de posición para los contenedores

En este paso deberemos decir la posición y ubicación que debe llevar cada capa de nuestra página para esto existen varias propiedades y atributos. En las páginas diseñadas aplico las siguientes propiedades y atributos: Contenedor: la información general posición absoluta. Código CSS de mi contenedor: twoColHybLtHdr #container { width: 96%; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left;} Menú horizontal: alineado a la derecha, posición relativa, margen 0, altura 30px. Encabezado: alineado en la parte superior izquierda

de la página y

acompañado de una imagen. Ejemplo

align="left">