Diseño Web - Taller 6

INSTITUCION EDUCATIVA TECNICO SUPERIOR INDUSTRIAL Barrancabermeja AREA: TEMA: Tecnologa e Informtica Grado 11 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 (<div>), 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 auto es el valor por defecto. Si le damos un nuevo tamao quedar a la izquierda:
Podemos centrarlo con respecto a su contenedor, con la propiedad margin: 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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" /> <title> Una columna </title> <style type="text/css"> 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;
padding: 5px;} </style> </head> <body> <div id="contenido"> <h1>Misin</h1> <p> Formar ciudadanos en permanente construccin de su ser, en todas sus dimensiones; capaces de reconocer y aceptar al otro en su diferencia; de responder por si mismo y actuar como sujeto emprendedor, tico, social, productivo, tcnico, tecnolgico, poltico, cultural y sostenible. </p> <h2>Visin </h2> <p>La Institucin Educativa Tcnico Superior Industrial de Barrancabermeja, se proyecta para el 2018, como una comunidad que facilite procesos de aprendizaje en convivencia, liderazgo acadmico, tecnolgico y sostenible en beneficio del mejoramiento de la calidad de vida para la poblacin, con egresados involucrados en los procesos de desarrollo productivo, social, poltico y educativo de la ciudad. </p> </div> </body> </html>
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 a continuacin. 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 lo contiene. 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.
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, utilizando position: 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; o left: -40px; Del mismo modo, podemos desplazarlo verticalmente utilizando top para desplazarlo hacia arriba o bottom para 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 zindex.
6.6 Posicionamiento absoluto

Al 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, utilizando position: 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 y bottom entre los lados inferiores. Para posicionar un elemento del que conocemos sus dimensiones, basta con indicar un punto en vertical (top o bottom) 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 dado position: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%; }
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 har que 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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" /> <title>Columna sin scroll a la izquierda</title> <style type="text/css"> 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; } </style></head><body> <div id="columna_izquierda"> <ul> <li><a href="#sec1">Día de la tierra</a></li> <li><a href="#sec2">Día mundial del agua</a></li> <li><a href="#sec3">Día mundial del medio ambiente</a></li> </ul> </div> <div id="columna_derecha"> <h2> Celebraciones a nuestro planeta</h2> <h3 id="sec1"> Día de la tierra</h3>
<p>En 1962, el senador y también activista ambiental Gaylord Nelson comenzó a hacer <em>"lobby"</em> político para que el tema medio ambiental formara parte de la agenda gubernamental del presidente John F. Kennedy (USA). Después de varios años de trabajo, aprovechó el aumento de protestas civiles contra la guerra de Vietnam y convocó, en 1969, a una manifestación popular donde las personas de todo el país, incluyendo miles de establecimientos educativos, expresaran su preocupación por el manejo del tema medio ambiental a nivel nacional.<br /><br />Tras este acto, el 22 de abril de 1970, se celebró por primera vez el Día de la Tierra. Más de 20 millones de personas respondieron a la convocatoria, estableciendo en sus comunidades, universidades y colegios, una plataforma de difusión y discusión sobre el medio ambiente y sus principales problemas. En la actualidad la celebración se ha extendido a cientos de países que también se preocupan por generar un cambio y proteger el Planeta.</p> <p>El Día 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.</p> <h3 id="sec2">Día mundial del agua</h3> <p> El Día Mundial del Agua se origina en la Conferencia de las Naciones Unidas para el Medio Ambiente y el Desarrollo en Río de Janeiro, Brasil del 3 al 14 Junio del año 1992, después de la cual, La Asamblea General de las Naciones Unidas adoptó el 22 de diciembre de 1992 la resolución por la que el 22 de marzo de cada año, fue declarado Día Mundial del Agua.</p> <p> Se invitó a las naciones a realizar actividades relacionadas con la conservación y el desarrollo de los recursos hídricos, apelando a la puesta en práctica de las recomendaciones de la Conferencia de las Naciones Unidas sobre Medio Ambiente y Desarrollo contenidas en el Capítulo 18 (Recursos de Agua Dulce) de la Agenda 21.</p> <p>Hoy en día hay 7 000 millones de personas que alimentar en el planeta y se prevé que habrá otros 2 000 millones para el año 2050. Las estadísticas 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</p> <h3 id="sec3">Día mundial del medio ambiente</h3> <p>El Día Mundial del Ambiente fue establecido por la Asamblea General de Naciones Unidas, en su Resolución (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.</p> <p>El día Mundial del Ambiente es un vínculo por medio del cual la Organización de Naciones Unidas sensibiliza a la opinión mundial en relación a temas ambientales, intensificando la atención y la acción política. 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 cooperación, pues ésta garantizará que todas las naciones y personas disfruten de un futuro más próspero y seguro. El Día Mundial del Ambiente es un evento en el que se realizan múltiples actividades: concentraciones en calles, conciertos ecológicos, ensayos y competencias de afiches en escuelas y colegios, plantaciones de árboles, campañas de reciclaje y de limpieza, entre otras.</p> </div> </body> </html>
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:
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 un alto 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 etiqueta <h1></h1> en una caja, y asgnale el id cabecera <div 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 resto de 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 del body. 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 id men. 5. El texto va a aparecer en otra columna central. As que crea otra caja que contenga a todo el texto, desde el <h2> 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 id pie. La estructura general de la pgina te habr quedado:
<body> <div id="cabecera"> <h1>...</h1> </div> cierre de "cabecera" <div id="pagina"> <div id="menu"> <ul>...</ul> </div> cierre de "menu" <div id="texto"> <h2>...</h2> <h3>...</h3> ... <p>...</p> </div> cierre de "texto" <div id="pie"> <p>...</p> </div> cierre de "pie" </div> cierre de "pagina" </body>
Ahora, vamos a ir dndole estilos a los distintos elementos, en el head de la pgina, en la etiqueta <style type="text/css"></style>. 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 darle el alto fijo, y el color de fondo que daremos a todos los divs. Aade el estilo div#cabecera {height: 50px; background-color: #918CE3;}. Prueba la pgina en el navegador. Observa que no queda arriba del todo. Esto se debe al margen que tiene el body y el que tiene el h1. Qutalo aadiendo al selector body la propiedad margin:0;, y aadiendo el estilo h1 {margin: 0;}. Si lo hubisemos posicionado de forma absoluta, nos habran dado igual los mrgenes. 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;} Vamos a posicionar el div menu. Le vamos a dar un posicionamiento absoluto (position:absolute;), con respecto al div 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;}. 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 ancho ser 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; }. El div pie, con respecto a su contenedor que es el div pgina, tambin absoluto (position:absolute;), est abajo del todo (bottom:0;), a la izquierda del todo, (left:0;), ocupa todo el ancho (width:100%;), y tiene un alto fijo de 40px (height:40px;). El estilo a aadir es div#pie { position:absolute; bottom:0; left:0; width:100%; height:40px; background-color:#A9A8CF; }. 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;}. Gurdalo y mustrale al profesor.
2.
3.
4.
5.
6.
7. 8.
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

Diseño Web - Taller 6

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Diseño Web - Taller 6

Загружено:

Авторское право:

Доступные форматы

INSTITUCION EDUCATIVA TECNICO SUPERIOR INDUSTRIAL Barrancabermeja AREA: TEMA: Tecnologa e Informtica Grado 11 Diseo Web VI - Maquetacin web

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

Ejemplo 1: Maquetado con una columna centrada

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

6.5 Posicionamiento relativo

6.6 Posicionamiento absoluto

Ejemplo 2: Maquetado a dos columnas

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

Ejercicio 3: Maquetado con posicionamiento absoluto.

Вам также может понравиться