Diseño web - taller 6

8/2/2019 Diseo web - taller 6

1/7

INSTITUCION EDUCATIVA TECNICO SUPERIOR INDUSTRIAL

Barrancabermeja

AREA: Tecnologa e Informtica Grado 11

TEMA: Diseo Web VI - Maquetacin web

6.1 Introduccin

La maquetacin es la distribucin de los elementos en nuestra pgina, como columnas, mens laterales, etc.

Actualmente, la maquetacin se realiza

utilizando capas (), tambin llamadas

divisiones o contenedores. La colocacin de las

capas en la pgina se realiza a travs de CSS. Esto

permite, por ejemplo, que podamos pasar de un

diseo con un men lateral a otro con el men

en la parte superior, slo cambiando la hoja de

estilos.

Las capas pueden estar anidadas unas dentro de otra. Bsicamente, lo que haremos ser definir cmo se posiciona

en la pgina, su colocacin y su tamao.

6.2 Tamao

La maquetacin se realiza sobre elementos en bloque. Por defecto los elementos de bloque ocupan todo el ancho

del elemento que lo contiene, y su alto se ajusta al contenido.

Cualquier elemento HTML de bloque, tiene dos atributos que pueden definir su tamao: ancho (width) y alto

(height).

Los valores para estas medidas, pueden ser expresados en las medidas habituales: Tamaos absolutos, utilizando px, cm, etc... Tamaos relativos al elemento que lo contiene, utilizando porcentajes (%). Tamaos relativos a la fuente, utilizando em. El valor autoes el valor por defecto.Si le damos un nuevo tamao quedar a la izquierda:

Podemos centrarlo con respecto a su contenedor, con la propiedadmargin: auto;

Con slo esto, podramos maquetar una pgina web que contenga una columna central, con un ancho fijo o relativo. En el

siguiente ejemplo, hemos contenido todo el texto en una capa, a la que le hemos asignado el id="contenido", y en la hoja de

estilo le hemos asignado un ancho fijo y la hemos centrado. Copia el cdigo en un nuevo archivo usando el Bloc de notas.

Ejemplo 1: Maquetado con una columna centrada

Una columna body {

background-color:#C2C5E7;margin: 0;}

div#contenido {width: 800px;margin: auto;border-left: #6699FF 2px solid;border-right: #6699FF 2px solid;background-color: #EDEEF8;


2/7

padding: 5px;}Misin

Formar ciudadanos en permanente construccin de su ser, en todas sus dimensiones;

capacesde reconocer y aceptar al otro en su diferencia; de responder por si mismo y actuar comosujeto emprendedor, tico, social, productivo, tcnico, tecnolgico, poltico, cultural y

sostenible.
Visin
La Institucin Educativa Tcnico Superior Industrial de Barrancabermeja, se proyecta

parael 2018, como una comunidad que facilite procesos de aprendizaje en convivencia, liderazgoacadmico, tecnolgico y sostenible en beneficio del mejoramiento de la calidad de vida

parala poblacin, con egresados involucrados en los procesos de desarrollo productivo, social,poltico y educativo de la ciudad.

Al terminar, gurdelo en el escritorio como maquetado1.html y visualzalo con un navegador web.

6.3 Desbordamiento

Al utilizar un elemento de bloque, como una capa, un prrafo, el body, etc... el tamao depende del contenido. Pero al definir

un tamao fijo nos puede surgir un problema: qu pasa si el contenido del elemento (texto, imgenes, etc...) no cabe?

Entonces se produce un desbordamiento, que podemos controlar desde el estilo con la propiedad overflow. Podemos

darle estos valores:

visible. Es la opcin por omisin. El contenido sale de elemento, y puede que se solape con los elementos que haya acontinuacin.

hidden. Lo que no quepa en el elemento, queda oculto. auto. Muestra las barras de desplazamiento en el elemento cuando sea necesario. scroll. Siempre muestra las barras de desplazamiento.

6.4 Posicionamiento

El posicionamiento es el lugar donde el navegador coloca un elemento HTML para visualizarlo. Por defecto, los elementos se

posicionan uno a continuacin de otro. Si se trata de elementos de bloque, como capas, prrafos, listas, etc, se irn colocando

uno debajo del otro. A este posicionamiento se le denomina esttico.

Utilizando CSS, con la propiedad position podemos cambiar el tipo de posicionamiento de los elementos. Existen cuatro

tipos de posicionamiento:

static. Es el normal. relative. El posicionamiento relativo coloca el elemento en su posicin normal. A partir de ah, podemos desplazar el

elemento, permaneciendo el hueco de su posicin original.

absolute. Con el posicionamiento absoluto, especificamos la posicin del elemento con respecto al elemento que locontiene.

fixed. Se establece la posicin del elemento de forma parecida al absoluto, pero el elemento queda fijo en la pantalla,aunque utilicemos barras de desplazamiento.

Al cambiar el desplazamiento de un elemento, es fcil que se solape sobre otro. Esto produce que

un elemento quede oculto. Para controlar esto, disponemos de la propiedad CSS z-index, a la

que podemos asignar un valor numrico. Un elemento con un z-index mayor se ver por

encima de otro con un z-index menor.


3/7

6.5 Posicionamiento relativo

El posicionamiento relativo coloca el elemento en su posicin normal, y a partir de ah lo desplaza la distancia que le

indiquemos. Al desplazarlo deja un "hueco" donde estara su posicin normal.

Para aplicarlo, lo primero es declararlo en el estilo, utilizandoposition: relative;

Para indicar el desplazamiento horizontal, utilizamos left para desplazarlo a la izquierda y

right para hacerlo a la derecha. Utilizar valores negativos, produce el efecto opuesto. Por

ejemplo, para desplazar un elemento 40px a la derecha, podramos poner right: 40px; oleft: -40px;

Del mismo modo, podemos desplazarlo verticalmente utilizando top para desplazarlo hacia arriba

obottompara hacerlo hacia abajo.

Si no establecemos valores de desplazamiento el elemento no cambia su posicin, por eso es muy comn asignar el

posicionamiento relativo a elementos para poder utilizar una propiedad que requiere posicionamiento, como puede ser z-

index.

6.6 Posicionamiento absolutoAl utilizar el posicionamiento absoluto indicamos de forma precisa la posicin del elemento en la pgina.

Al contrario que con el posicionamiento relativo, el elemento al que le hemos asignado un posicionamiento absoluto no deja

un hueco en la pgina. Podemos decir que el resto de elementos lo ignoran, y se colocan como si no existiese.

Para aplicarlo, lo primero es declararlo en el estilo, utilizandoposition: absolute;.

La posicin y tamao del elemento se indica siempre en relacin a otro elemento que lo contiene. El elemento contenedor

ser el ms cercano que haya con posicionamiento no esttico. Si no hay ninguno, se utilizar el body.

Para definir la posicin utilizamos top para referirnos a la distancia entre el borde superior del elemento posicionado y el

borde superior del elemento contenedor. Por lo tanto left ser la distancia entre los lados izquierdos, right entre los

lados derechos ybottomentre los lados inferiores.

Para posicionar un elemento del que conocemos sus dimensiones, basta con indicar un punto en vertical (top obottom) y

un punto en horizontal (right o lef). En la siguiente grfica, todas las cajas tienen position:absolute;

witdth:60px; height:60px y un borde. Para cada una hemos cambiado la posicin. Adems, a la caja que contiene a

todas, le hemos dadoposition:relative; para que las cajas de dentro tomen su posicin a partir de ella.

Utilizando este posicionamiento, obtenemos gran flexibilidad para maquetar nuestra pgina. Por ejemplo, podemos dividir la

pgina en dos (o ms) columnas. Utilizaremos dos capas, con un alto al 100%, y que la suma de sus anchos sea el total de la

pgina. Por ejemplo:

div#columna_izquierda {position: absolute;left: 0;top: 0;

height: 100%;width: 50%;}

div#columna_derecha {position: absolute;right: 0;top: 0;height: 100%;width: 50%;}


4/7

Esto originara dos columnas, cada una con un ancho de la mitad del de la pgina (o del elemento que las contenga).

Si queremos obtener dos columnas, una con un ancho fijo y la otra con lo que sobre, lo haremos de otra forma. Por ejemplo,

si la columna de la izquierda la queremos con un ancho fijo, por ejemplo de 200px, lo que haremos ser asignar a la columna

de la derecha una distancia con el lado izquierdo de esos 200px, y con el lado derecho de 0, en vez de indicar el ancho.

div#columna_izquierda {position: absolute;left: 0;

top: 0;height: 100%;width: 200px;}

div#columna_derecha {position: absolute;right: 0;left: 200px;top: 0;height: 100%;}

Podemos conseguir un efecto muy interesante controlando el desbordamiento de las columnas. Podemos dejar una columna

fija, por ejemplo con un men, y otra que muestre el contenido, a la que damos la propiedad overflow:auto;. Esto harque nos podamos desplazar por el contenido de la pgina manteniendo el men siempre visible. Como por defecto, Internet

Explorer siempre muestra la barra de desplazamiento en la etiqueta html, queda mejor si lo quitamos

html{overflow:hidden;} Todo esto lo veremos mejor con un ejemplo:

Ejemplo 2: Maquetado a dos columnas

Copie el cdigo en un nuevo archivo en el Bloc de notas.

Columna sin scroll a la izquierda

html {

overflow: hidden;

}

div#columna_izquierda {

position: absolute;

top: 0;

left: 0;

height: 100%;

width: 20%;

background-color: #ffe9d7;

}div#columna_derecha {

overflow: auto;

position: absolute;

top: 0;

right: 0;

height: 100%;

width: 80%;

background-color: #ddf2f9;

font-size: 18px;

line-height: 1.2em;

}

Da de la tierra

Da mundial del agua

Da mundial del medio ambiente

Celebraciones a nuestro planeta

Da de la tierra


5/7

En 1962, el senador y tambin activista ambiental Gaylord Nelson comenz a

hacer "lobby" poltico para que el tema medio ambiental formara parte de la

agenda gubernamental del presidente John F. Kennedy (USA). Despus de varios

aos de trabajo, aprovech el aumento de protestas civiles contra la guerra de

Vietnam y convoc, en 1969, a una manifestacin popular donde las personas de

todo el pas, incluyendo miles de establecimientos educativos, expresaran su

preocupacin por el manejo del tema medio ambiental a nivel nacional.

Tras

este acto, el 22 de

abril de 1970, se celebr por primera vez el Da de la Tierra. Ms de

20 millones de personas respondieron a la convocatoria, estableciendo en sus comunidades,universidades y colegios, una plataforma de difusin y discusin sobre el medio

ambiente y sus principales problemas. En la actualidad la celebracin se ha extendido a

cientos de pases que tambin se preocupan por generar un cambio y proteger el

Planeta.

El Da de la Tierra invita a las personas, pero sobre todo a los Gobiernos, a tomar

decisiones y crear leyes que fundamenten el cuidado del Planeta. Son muchos los gobernantes

que, desde 1970, han trabajado en Pro al medio ambiente, tratando as de disminuir los

graves efectos que los humanos hemos causado sobre el mismo.

Da mundial del agua

El Da Mundial del Agua se origina en la Conferencia de las Naciones Unidas para el

Medio Ambiente y el Desarrollo en Ro de Janeiro, Brasil del 3 al 14 Junio del

ao 1992, despus de la cual, La Asamblea General de las Naciones Unidas

adopt el 22 de diciembre de 1992 la resolucin por la que el 22 de marzo decada ao, fue declarado Da Mundial del Agua.

Se invit a las naciones a realizar actividades relacionadas con la

conservacin y el desarrollo de los recursos hdricos, apelando a la puesta en

prctica de las recomendaciones de la Conferencia de las Naciones Unidas sobre Medio

Ambiente y Desarrollo contenidas en el Captulo 18 (Recursos de Agua Dulce) de la

Agenda 21.

Hoy en da hay 7 000 millones de personas que alimentar en el planeta y se

prev que habr otros 2 000 millones para el ao 2050. Las

estadsticas indican que todas las personas beben de 2 a 4 litros de agua a diario, sin

embargo, la mayor parte del agua que 'bebemos' est incorporada en los alimentos que

consumimos: producir 1 kilo de carne de vacuno, por ejemplo, consume 15 000 litros de agua, y

1 kilo de trigo se 'bebe' 1 500 litros

Da mundial del medio ambiente

El Da Mundial del Ambiente fue establecido por la Asamblea General de Naciones

Unidas, en su Resolucin (XXVII) del 15 de diciembre de 1972 con la que se dio inicio a

la Conferencia de Estocolmo, Suecia, cuyo tema central fue el Ambiente. Se celebra el 5 de

junio desde 1973.

El da Mundial del Ambiente es un vnculo por medio del cual la

Organizacin de Naciones Unidas sensibiliza a la opinin mundial en

relacin a temas ambientales, intensificando la atencin y la accin

poltica. Los objetivos principales son darle un contexto humano, motivando a las

personas para que se conviertan en agentes activos del desarrollo sustentable y equitativo;

promover el papel fundamental de las comunidades en el cambio de actitud hacia temas

ambientales, y fomentar la cooperacin, pues sta garantizar que todas

las naciones y personas disfruten de un futuro ms prspero y seguro. ElDa Mundial del Ambiente es un evento en el que se realizan mltiples

actividades: concentraciones en calles, conciertos ecolgicos, ensayos y competencias

de afiches en escuelas y colegios, plantaciones de rboles, campaas de

reciclaje y de limpieza, entre otras.

Gurdelo en el escritorio como maquetado2.html. Visualcelo en el navegador web. Tome su tiempo para analizar el cdigo.

Recuerde que podemos anidar las capas. Por ejemplo, podramos subdividir una de las capas en otras dos dentro de ella,

utilizando el mismo sistema.

Otro elemento muy utilizado en la maquetacin, es el encabezado y el pie. Observa que en los ejemplos que hemos visto,

colocbamos las capas en la parte superior del todo (top: 0;). Si queremos utilizar un encabezado, en vez de comenzar

arriba del todo, debemos de dejar una separacin igual al alto del encabezado. Si el alto del encabezado lo indicamos en

porcentajes, el alto de las columnas deber de ser del 100% - el alto del encabezado. En vez de eso, resulta ms claro si en vez

del alto de las columnas, indicamos la parte superior (top) y la inferior (bottom). En este caso, nos dar igual la medida que

utilicemos. Como mejor lo veremos ser con un ejemplo:


6/7

Para practicar todo esto, realiza el siguiente ejercicio paso a paso.

Ejercicio 3: Maquetado con posicionamiento absoluto.

Objetivo:

Copia en el escritorio el archivo ej_maquetacion_absoluto.htm, que puedes encontrar en la carpeta d:\web, se nos pide que

maquetemos la pgina para que tenga el siguiente aspecto:

Habr un encabezado, con el ttulo (h1), que ocupar todo el ancho de la pgina, comenzando arriba del todo, y con unalto de 50px.

El resto de la pgina, estar limitado a un ancho fijo de 900px. En esos 900px, reservaremos una columna a la izquierda en la que ir la lista con los enlaces. El resto se mostrar en una columna a la derecha. Al final de la pgina habr un pie, con un alto de 40px y ancho que ocupe los 900px. Habr una nica barra de desplazamiento, que nos permita recorrer el texto. El encabezado, men y pie siempre

aparecer visible.

Para que se vea mejor la estructura de las capas, le daremos a cada una un color de fondo distinto.

Para este ejercicio, se recomienda que edites directamente el cdigo fuente de la pgina, ya que el texto ya est escrito.

Primero, vamos a identificar los distintos elementos, y crear las cajas que los contengan. A todas las cajas le daremos un id

distintivo.

1. El ttulo estar en una caja formando la cabecera. Por lo tanto, encierra la etiquetaen una caja, yasgnale el id cabecera

2. Como todo lo dems va a ir en una columna con ancho fijo, lo ms cmodo es crear una caja que contenga al restode elementos, a la que le daremos el ancho que queramos.

3.

Crea otra caja, que comience donde acababa la anterior, y vaya hasta el final delbody. Asgnale el id pagina.Vamos a subdividir el div pagina en las distintas columnas:

4. Como la lista formar otra columna, crea otra caja que la contenga. Asgnale el idmen.5. El texto va a aparecer en otra columna central. As que crea otra caja que contenga a todo el texto, desde el

hasta el cierre del penltimo prrafo (el ltimo es para el pie). Asgnale el id texto.

6. Encierra el ltimo prrafo en otra caja, y asgnale el idpie.La estructura general de la pgina te habr quedado:

... cierre de "cabecera"

... cierre de "menu".........

...
cierre de "texto"
...
cierre de "pie" cierre de "pagina"


7/7

Ahora, vamos a ir dndole estilos a los distintos elementos, en el head de la pgina, en la etiqueta . Te recomendamos que vayas visualizando en el navegador cada cambio que hagamos

(desde KompoZer, basta con pulsar F5).

1. Para poner el div cabecera al principio no es necesario posicionarlo, porque ya es el primer elemento. Lo nico ser darleel alto fijo, y el color de fondo que daremos a todos los divs. Aade el estilo div#cabecera {height: 50px;

background-color: #918CE3;}.

2. Prueba la pgina en el navegador. Observa que no queda arriba del todo. Esto se debe al margen que tiene elbody y elque tiene el h1. Qutalo aadiendo al selectorbody la propiedadmargin:0;, y aadiendo el estilo h1 {margin:

0;}.

Si lo hubisemos posicionado de forma absoluta, nos habran dado igual los mrgenes.

3. Para crear la columna central, div pagina, utilizaremos posicionamiento absoluto (position:absolute;). Arriba,dejaremos como separacin el alto del encabezado (top:50px;) y debe de llegar hasta abajo del todo (bottom: 0). El

ancho es fijo, de 900px (width:900px). Lo ms complicado es centrarlo, ya que la ventana no tiene un ancho fijo.

Vamos a utilizar un truco que consiste en desplazar el lado izquierdo hasta el centro de la caja (900px/2=450px) utilizando

un margen negativo (margin-left:-450px). Ahora, ya podemos dejar una distancia de la mitad de la ventana a ese

lado (left:50%).

Por lo tanto, aade el estilo div#pagina {position:absolute; top:50px; bottom:0; width:900px;margin-left:-450px; left:50%; background-color:#FFFFCC;}

4. Vamos a posicionar el div menu. Le vamos a dar un posicionamiento absoluto (position:absolute;), con respecto aldiv pagina. Como queremos que quede al principio, en la esquina superior izquierda, la distancia sera de 0 con la parte

de arriba (top:0;) y de 0 con la parte izquierda (left:0;). El alto no ser del 100%, porque tenemos que dejar abajo un

hueco para el pie, con su alto (bottom:40px;), y el ancho lo vamos a dejar en 140px (width:140px;).

Por lo tanto, aade el estilo div#menu {position:absolute; top:0; left:0; bottom:40px;

width:140px; background-color:#D2D1EF;}.

5. El div texto ser casi como el anterior. Slo que en vez de a la izquierda, a la derecha del todo (right:0;), y el anchoser lo que quede del men. Como estamos utilizando tamaos fijos, no tenemos ms que restar al ancho total el del div

men (900px-140px=760px) (width:760px;). Como puede desbordar, haremos que muestre la barra de

desplazamiento si hace falta (overflow:auto;). Aade el estilo div#texto {position:absolute; top:0;

right:0; width:760px; bottom:40px; overflow:auto; }.

6. El div pie, con respecto a su contenedor que es el div pgina, tambin absoluto (position:absolute;), est abajodel todo (bottom:0;), a la izquierda del todo, (left:0;), ocupa todo el ancho (width:100%;), y tiene un alto fijo de40px (height:40px;).

El estilo a aadir es div#pie { position:absolute; bottom:0; left:0; width:100%;

height:40px; background-color:#A9A8CF; }.

7. Por ltimo y por esttica, vamos a ocultar la barra de desplazamiento del html que muestra siempre Internet Explorer.Para acabar, aade html {overflow:hidden;}.

8. Gurdalo y mustrale al profesor.Compromiso:

Para la siguiente clase, traer en formato digital la maquetacin de su sitio web. Deben observarse los siguientes elementos:

Maquetado con las secciones (encabezado, men, contenido, pie) Las opciones del men que permitirn el acceso a los contenidos Pgina de inicio (index.html)

Recuerden que todo el contenido del sitio web debe estar almacenado en una carpeta general y los elementos tales como

imgenes, sonidos, videos, etc., deben estar organizados en subcarpetas dentro de la carpeta general.

Igualmente, se les recuerda que todos los talleres (incluyendo este), los pueden encontrar en el blog

http://itsitics.blogspot.com
http://itsitics.blogspot.com/http://itsitics.blogspot.com/http://itsitics.blogspot.com/

Diseño web - taller 6

Documents

Transcript of Diseño web - taller 6