UNIVERSIDAD DON BOSCO

FACULTAD DE ESTUDIOS TECNOLOGICOS

ESCUELA DE COMPUTACION
CICLO 01-2016

GUIA DE LABORATORIO N 10
Nombre de la prctica: Maquetacin de pginas web
Lugar de ejecucin: Laboratorio de Informtica
Tiempo estimado: 2:30 horas
Materia: Lenguajes de Marcado y Estilos Web

I. OBJETIVOS
Que el estudiante:
1. Utilice las propiedades de CSS3 para crear diseos multi-columna.
2. Desarrolle pginas web con diseos fijos.
3. Desarrolle pginas web con diseos fluidos.
II. INTRODUCCION TEORICA
DISEOS MULTI-COLUMNA CON CSS3
Propiedad column-count
Una de las novedades de CSS3 es permitir disponer un bloque de texto en mltiples columnas con la nica
indicacin de la cantidad de columnas en que queremos que lo divida.
La propiedad column-count nos permite dividir el texto en varias columnas. El valor de esta propiedad es un
nmero, siendo este nmero el total de columnas a utilizar y automticamente el navegador se encargar de
agrupar el texto en las columnas indicadas.
selector {
column-count: cantidad de columnas;
}
Para utilizar esta propiedad es preciso usar los prefijos propietarios para garantizar la compatibilidad con todos
los navegadores y sus versiones.
Propiedad column-width
Con la propiedad column-width tambin generamos mltiples columnas. Tiene sentido emplearla cuando
nuestro diseo es flexible, es decir que si modificamos el tamao de la ventana del navegador su contenido se
relocaliza.
Con la propiedad column-width especificamos el ancho de la columna en pxeles, porcentaje, etc. y luego se
generan tantas columnas como entren en el contenedor.
La sintaxis es la siguiente:
Elemento {
column-width: ancho en pixeles o porcentajes;
}
1 / 25

Propiedad column-gap
La propiedad column-gap nos permite especificar la separacin entre las columnas.
Su sintaxis es:
Selector {
column-gap: valor;
}
Podemos utilizar cualquier unidad para indicar la separacin entre columnas (px, em, etc.)
Propiedad column-rule
La propiedad column-rule nos permite definir y configurar una lnea de separacin entre columnas.
Selector {
column-rule: grosor estilo color;
}

Ntese la similitud de la propiedad column-rule con la propiedad border (en su forma corta o shorthand) que
estudiamos en el tema modelo de caja.

DISEOS WEB FIJOS Y FLUIDOS

Diseos web fijos
Un diseo web fijo es aquel que permanece inalterable sea cual sea el dispositivo donde se visualiza el sitio
web. Es indiferente al tamao de la pantalla y a la anchura del navegador web que la visualiza.
Sean cuales sean las caractersticas del dispositivo, pantalla o navegador, siempre se visualiza el mismo tamao
preestablecido por el diseador web en pxeles.
Las caractersticas del diseo web fijo son las siguientes:

Tamaos fijos medidos en pixeles.

No reaccionan al tamao de la pantalla.
Orientado a resoluciones de escritorio.
No estn optimizados para dispositivos mviles.
Fciles de crear.
En resoluciones muy amplias el espacio no es aprovechado, mientras que en resoluciones pequeas
aparecer una barra de desplazamiento horizontal, lo cual afecta la usabilidad del sitio

Diseos web fluidos

Los diseos web fluidos (tambin conocidos como diseos liquidos ) fueron creados para no tener un tamao
definido, y permitir que los monitores pueden condicionar el tamao de salida.
Usando porcentajes (%) podremos definir el tamao de los elementos de nuestra pgina web para definir un
diseo fluido que se adapte a cualquier monitor.

Las caractersticas de los diseos web fluidos son las siguientes:

Diseos web adaptables al tamao del navegador o viewport.

Se construyen definiendo los anchos de los elementos con porcentajes.
Requiere ms planeacin y verificacin.
Efectos negativos en pantallas muy pequeas.
ALTURAS/ANCHURAS MXIMAS Y MNIMAS

Cuando se disea la estructura de una pgina web, se debe tomar la decisin de optar por un diseo de
anchura fija o un diseo cuya anchura se adapta a la anchura de la ventana del navegador.
Sin embargo, la mayora de las veces sera conveniente una solucin intermedia: que la anchura de la pgina
sea variable y se adapte a la anchura de la ventana del navegador, pero respetando ciertos lmites. En otras
palabras, que la anchura de la pgina no sea tan pequea como para que no se puedan mostrar correctamente
los contenidos y tampoco sea tan ancha como para que las lneas de texto no puedan leerse cmodamente.
CSS define cuatro propiedades que permiten limitar la anchura y altura mnima y mxima de cualquier
elemento de la pgina. Las propiedades son max-width, min-width, max-height y min-height.

Las propiedades que definen la altura y anchura mxima y mnima se pueden aplicar a cualquier elemento,
aunque solamente suelen utilizarse para estructurar la pgina. En general, las propiedades ms utilizadas son
max-width y min-width, ya que no es muy habitual definir alturas mximas y mnimas.
De esta forma, para conseguir un diseo de anchura variable pero controlada, se podran utilizar reglas CSS
como la siguiente:
#contenedor {
width: 80%;
min-width: 500px;
max-width: 900px;
margin: 0 auto;
}
Con esto estamos consiguiendo que el ancho del elemento con id contenedor sea del 80% pero que siempre
se mantenga entre los lmites de 900px y 500px.

III. MATERIALES Y EQUIPO

No.
1

2
3
4

Cantidad
Descripcin
1
PC con uno de los editores de pginas Web: Sublime Text, Brackets, Notepad ++,
BlueFish y HTML Kit y cualquiera de los navegadores siguiente: Internet Explorer 7
u 8, Firefox (ltima versin disponible), Google Chrome (ltima versin
disponible), Opera (ltima versin disponible), Safari (ltima versin disponible).
1
Gua de Laboratorio #10 de Lenguajes de Marcado y Estilo Web
1
Recursos para laboratorio prctico.
1
Memoria USB

IV. PROCEDIMIENTO
INDICACIONES GENERALES
1. Crear una carpeta en mis documentos y colocarle el nombre NCarnet_Guia10_LME, Nota: Cambiar
NCarnet por su nmero de carnet brindado por la Universidad.
2. Descargar los recursos de la gua (
https://dl.dropboxusercontent.com/u/61883835/Recursos%20guia%2010/Recursos.rar ),
descomprimirlos y colocar todas las carpetas y archivos dentro de su carpeta de trabajo.
Ejercicio 1. Construyendo un estilo multicolumna estilo Pinterest
1. Cree un archivo HTML llamado Multicolumna.html.
2. Guardar el archivo en su carpeta de trabajo.
3. Escribir la estructura bsica de un documento HTML en el archivo creado en el paso anterior.
4. Colocar como ttulo de la pgina el texto Mltiples columnas estilo Pinterest.
5. Digitar el siguiente cdigo HTML dentro del cuerpo (body) de la pgina web.

6. Dentro de los recursos de la gua encontrar un archivo denominado texto_ejemplo1.docx, ese

archivo contiene todo el texto que deber colocar dentro la pgina. Coloque el texto correspondiente
en cada uno de los prrafos de los artculos.
7. Cree una carpeta denominada css. Dentro de esa carpeta, cree una hoja de estilo llamada pinterest.css
y vinclela a su pgina web.
8. Digite las siguientes reglas de estilo dentro del archivo creado en el paso anterior.

Note que con la regla de estilo anterior estamos diciendo que el elemento con id contenedor va a tener un
ancho del 90% del viewport, pero siempre se mantendr entre los lmites de 1100px y 700px. Es decir, va a
fluir mientras se encuentre entre esos valores, pero nunca ser ms grande que 1100px ni ms pequeo que
700px.
9. A continuacin conseguiremos que todo el contenido dentro del div con id columnas se muestre en 4
columnas mediante la siguiente regla de estilo:

10. Agregue los prefijos propietarios en la regla de estilo anterior para garantizar la compatibilidad con los
distintos navegadores y sus versiones.
11. Visualice los resultados en su navegador y notar que el contenido se presenta en 4 columnas peroel
resultado no es an muy esttico.

12. Digite la siguiente regla de estilo:

13. Ahora conseguiremos que la imagen llene el ancho del div, para ello le daremos un ancho del 100%.
Adems haremos que la imagen se muestre con una opacidad del 70%.

14. Visualice los resultados en su navegador, debera obtener un resultado similar al siguiente:

15. Ahora conseguiremos que la opacidad de las imgenes sea del 100% cuando se pasa el cursor sobre
ellas.

16. Mediante una transicin de 0.5s consiga que el cambio de la opacidad de las imgenes de haga de
forma suave y progresiva.
17. Visualice los resultados en su navegador. Prueba cambiar el ancho del viewport de su navegador para
que vea como el diseo fluye pero se mantiene siempre entre 1100px y 700px.

Ejercicio 2. Construyendo un diseo fijo

1. Cree un archivo HTML llamado index.html.
2. Guardar el archivo en su carpeta de trabajo.
3. Escribir la estructura bsica de un documento HTML en el archivo creado en el paso anterior.
4. Colocar como ttulo de la pgina el texto Viajeros, agencia de viajes.
5. Digitar el siguiente cdigo HTML dentro del cuerpo (body) de la pgina web.

6. Coloque el siguiente cdigo HTML dentro del nav de la pgina.

<img src="img/turismo/logoViajeros.png" alt="Logo viajeros" width="200"
height="54" id="logo">
<ul>
<li><a href="index.html" id="inicio">Inicio</a></li>
<li><a href="planes.html" id="planes">Planes</a></li>
<li><a href="galeria.html" id="galeria">Galeria</a></li>
</ul>

7. Coloque el siguiente cdigo dentro del div con id imgDesc.

<img src="img/turismo/puerto_la_libertad.jpg" alt="Imagen principal" width="600"
height="360">
<div id="descripcion">
<p>Viajeros es la mejor agencia de viajes de El Salvador. Te ofrecemos
cobertura total a todos los lugares tursticos del pas. Tenemos planes tursticos
que se adaptan a tu bolsillo, tiempo y gustos. Deja de perder el tiempo, y confa
tu diversin a los expertos</p>
</div>

8. Coloque el siguiente cdigo dentro de la seccin con id contenido.

<div class="plan">
<img src="img/turismo/puerto_triunfo.jpg" alt="Plan naturaleza" width="260"
height="150">
<h1>Plan naturaleza</h1>
Si te gusta sentir un contacto ntimo con la naturaleza, este plan es para ti. El
plan incluye la visita a playas y montaas y caminatas en los lugares ms
paradisiacos del pas.
<p class="boton"><a href="planes.html#galeriaNaturaleza">Ms informacin</a></p>
10

</div>
<div class="plan">
<img src="img/turismo/santa_ana.jpg" alt="Plan historico" width="260"
height="150">
<h1>Plan histrico</h1>
Si lo tuyo es el turismo histrico, este plan te ofrece un recorrido por las
distintas ruinas del pas, as como una visita a los principales museos de guerra
de El Salvador.
<p class="boton"><a href="planes.html#galeriaHistorico">Ms informacin</a></p>
</div>
<div class="plan">
<img src="img/turismo/planRelax.jpg" alt="Plan relax" width="260" height="150">
<h1>Plan Relax</h1>
Si quieres recuperarte del estrs de la ciudad este plan podra interesarte.
Incluye una visita por los lugares ms paradisiacos y tranquilos del pas.
<p class="boton"><a href="planes.html#galeriaRelax">Ms informacin</a></p>
</div>

9. Crear una nueva hoja de estilo, y guardarla dentro de su carpeta css con el nombre fijo.css.
10. Vincular su pgina web con la hoja de estilo creada en el paso anterior.
Nuestro objetivo ser aplicar las distintas propiedades CSS estudiadas en el transcurso de la asignatura para
crear un layout como el siguiente:

11

11. Coloque las siguientes reglas de estilo iniciales dentro de su archivo fijo.css

12. A continuacin procedemos a estilizar toda la seccin con id superior.

12

13. Hasta el momento su encabezado debera lucir de la siguiente manera:

14. Ahora procederemos a darle estilo al men de navegacin, para ello crearemos dentro de la carpeta
css una hoja de estilo llamada men.css, la vincularemos con nuestra pgina web y escribiremos las
siguientes reglas de estilo:

13

15. Hasta el momento su encabezado debera lucir de la siguiente manera:

16. Ahora conseguiremos que los vnculos del men cambien de color y escala cuando el usuario pase el
cursor sobre ellos.

17. Mediante transiciones consiga que tanto el cambio de color como el cambio de escala se hagan de
forma suave y progresiva. La transicin del color debe durar 1 segundo y la transicin de la escala debe
durar 3 segundos.
18. Finalmente agregaremos unos iconos en cada uno de los tems del men para mejorar la presentacin
del mismo.

14

19. Si sigui los pasos al pie de la letra las indicaciones, su men debera lucir de la siguiente manera:

20. Con esto hemos finalizado el men de navegacin. Cierre el archivo men.css puesto que las
siguientes reglas de estilo deber colocarlas dentro del archivo fijo.css.
21. Ahora finalizaremos el estilo de la seccin con id superior. Consiga que la imagen que se encuentra
dentro del div con id imgDesc flote a la izquierda (estas reglas de estilo deben colocarse en el archivo
fijo.css)
El resultado obtenido debera ser similar al siguiente:

22. Note que la imagen est flotando a la izquierda, pero parece que se ha salido del contenedor. Este
problema tan habitual cuando se usa la propiedad float ya lo hemos estudiado y resuelto en guas
pasadas. La solucin consiste en aplicar la regla overflow:hidden sobre el contenedor del elemento
flotado (en este caso el contenedor seria el div con id imgDesc) para forzar que el contenedor
envuelva a los elemento flotantes. Resuelva el error y visualice los resultados en su navegador.
Debera obtener un resultado similar al siguiente:

15

23. Ahora procederemos a aplicar los estilos bsicos para la seccin con id principal y para el footer de la
pgina.

24. Con estos estilos ya tendramos lista la plantilla que vamos a ocupar en todas las pginas de nuestro
sitio web.

16

25. Ahora escribiremos los estilos particulares para la pgina index.html. En esta pgina tenemos algunos
div con la clase plan los cuales queremos que se muestren en tres columnas.

Visualice los resultados en su navegador y notar que aunque los anchos, mrgenes y rellenos estn colocados
tal cual est en el layout presentado al inicio del ejercicio, la tercera columna no cabe y se va hacia abajo.

El problema se debe a que el primer div tiene un margen a la izquierda el cual no debera estar. Lo mismo
sucede con el tercer div que tiene un margen innecesario a la derecha.

17

26. Elimine estos mrgenes innecesarios mediante las siguientes reglas de estilo:

El resultado obtenido debera ser similar al siguiente:

27. Ahora haremos que los enlaces que los enlaces que tienen la clase botn, tengan dicha apariencia. Para
ello, digite las siguientes reglas de estilo.

18

Pgina planes.html
Para construir las restantes pginas del sitio, la pagina index.html nos servir como plantilla.
28. Cree una copia de su archivo index.html y gurdela con el nombre planes.html.
29. Dentro del archivo planes.html elimine todo el contenido de la seccin con id contenido y
reemplcelo por el siguiente cdigo HTML.
<div class="planes" id="galeriaNaturaleza">
<h1>Plan naturaleza</h1>
<img src="img/turismo/galeriaNaturaleza.jpg" alt="Plan naturaleza"
width="900">
<p>Si te gusta sentir un contacto ntimo con la naturaleza, este plan
es para ti. El plan incluye la visita a playas y montaas y caminatas en los
lugares ms paradisiacos del pas.</p>
<p class="precio">5 dias y 4 noches por $1000</p>
</div>
<div class="planes" id="galeriaHistorico">
<h1>Plan histrico</h1>
<img src="img/turismo/galeriaHistorico.jpg" alt="Plan Historico"
width="900">
<p>Si lo tuyo es el turismo histrico, este plan te ofrece un
recorrido por las distintas ruinas del pas, as como una visita a los principales
museos de guerra de El Salvador.</p>
<p class="precio">5 das y 4 noches por $1000</p>
</div>
<div class="planes" id="galeriaRelax">
<h1>Plan Relax</h1>
<img src="img/turismo/galeriaRelax.jpg" alt="Plan relax" width="900">
<p>Si quieres recuperarte del estrs de la ciudad este plan podra
interesarte. Incluye una visita por los lugares ms paradisiacos y tranquilos del
pais.</p>
<p class="precio">5 dias y 4 noches por $1000</p>
</div>

19

30. Aada las siguientes reglas de estilo dentro de su archivo fijo.css

El contenido de su pgina planes.html debera lucir de la siguiente manera:

20

Pgina galeria.html
31. Cree una copia de su archivo index.html y gurdela con el nombre galeria.html.
32. Dentro del archivo galeria.html elimine todo el contenido de la seccin con id contenido y
reemplcelo por el siguiente cdigo HTML:
<div id="galeria">
<div class="plan">
<img src="img/turismo/ahuachapan2.jpg" alt="Ahuachapan"
width="260" height="150">
<p>Iglesia de Ahuachapan</p>
</div>
<div class="plan">
<img src="img/turismo/antiguo_cuscatlan.jpg" alt="Antiguo
Cuscatlan" width="260" height="150">
<p>Iglesia de Antiguo Cuscatlan</p>
</div>
<div class="plan">
<img src="img/turismo/catedral.jpg" alt="Catedral de San Salvador"
width="260" height="150">
<p>Catedral de San Salvador</p>
</div>
<div class="plan">
<img src="img/turismo/decameron.jpg" alt="Hotel Decameron"
width="260" height="150">
<p>Hotel Decameron</p>
</div>
<div class="plan">
<img src="img/turismo/lago_ilopango.jpg" alt="Lago de Ilopango"
width="260" height="150">
<p>Lago de Ilopango</p>
</div>
<div class="plan">
<img src="img/turismo/los_ilustres.jpg" alt="Cementerio de los
Ilustres" width="260" height="150">
<p>Cementerio de los Ilustres</p>
</div>
<div class="plan">
<img src="img/turismo/puerto_la_libertad.jpg" alt="Puerto de la
Libertad" width="260" height="150">
<p>Puerto de la Libertad</p>
</div>
<div class="plan">
<img src="img/turismo/puerto_triunfo.jpg" alt="Puerto El Triunfo"
width="260" height="150">
<p>Puerto El Triunfo</p>
</div>
<div class="plan">
<img src="img/turismo/santa_ana.jpg" alt="Catedral de Santa Ana"
width="260" height="150">
<p>Catedral de Santa Ana</p>
</div>
</div>

21

33. Aada las siguientes reglas de estilo dentro de su archivo fijo.css

El contenido de su pgina galeria.html debera lucir de la siguiente manera:

22

V. ANALISIS DE RESULTADOS
Construyendo un diseo liquido
En este ejercicio, vamos a modificar las hojas de estilos ocupadas en el ejercicio anterior para que el sitio web
presente un diseo lquido, fluido o flexible, es decir, que se adapte a los cambios en el ancho del viewport.
El objetivo es que el diseo del sitio web se acople al siguiente layout:

1. Cree una copia de su hoja de estilo fijo.css y gurdela con el nombre flexible.css
2. Cree una copia de su hoja de estilo men.css y gurdela con el nombre men_flexible.css
3. Vincule las hojas de estilo flexible.css y men_flexible.css a sus pginas web (las paginas ya NO usaran
las hojas de estilo fijo.css y men.css).
4. Dentro de su hoja de estilo men_fijo.css cambie el ancho del nav para que ahora cubra el 100% del
ancho disponible. Su regla de estilo debera lucir de la siguiente manera:

23

5. En la siguiente tabla se muestran los cambios que deben hacerse en la hoja de estilo flexible.css para
conseguir un diseo lquido (Solamente debe modificar los propiedades que salen ac, las otras djelas
tal y como estn).
Selector
#superior
#encabezado

Valor original
padding: 30px 0px;
width: 960px;

Valor a modificar
padding: 2% 0px;
width: 80%;
min-width:
650px;/*
YA
NO
REACCIONARA SI LA CAJA ES MAS
PEQUEA DE 650px*/
max-width:
960px;/*YA
NO
REACCIONARA SI LA CAJA ES MAS
GRANDE QUE 960 px*/
#descripcion
width: 360px;
width: 37.5%; /* 360/960=0.375*/
height: 360px;
height: auto;
#descripcion p
margin: 20px;
margin: 5%; /* 20/360 =5% */
#superior
#encabezado ESTE SELECTOR NO ESTA, margin: 2% 0px; /*23/960=2%*/
#logo
DEBE AGREGARLO
width: 21%; /*200/960= 21%*/
#superior
#encabezado float: left;
float: left;
#imgDesc img
width: 62.5%; /* 600/960= 62.5% */
height: auto;
#contenido
width: 960px;
width: 80%;
margin: 0px auto;
min-width:
650px;/*
YA
NO
REACCIONARA SI LA CAJA ES MAS
PEQUEA DE 450px*/
max-width:
960px;/*YA
NO
REACCIONARA SI LA CAJA ES MAS
GRANDE QUE 960 px*/
.plan
width: 258px;
width: 26.7%; /* 258/960= 27%*/
padding: 20px;
padding: 2%; /* 20/960=2%*/
margin: 30px 15px;
margin: 30px 1.5%;
.plan img
ESTE SELECTOR NO ESTA, width: 100%;
DEBE AGREGARLO
height: auto;
.planes
width: 900px;
width: 94%;
padding: 10px 30px;
padding: 1% 3%;
.planes img
ESTE SELECTOR NO ESTA, width: 100%;
DEBE AGREGARLO
border-radius:15px;
#galeria .plan
margin-bottom: 10px;
margin: 30px 1.4% 10px;
display: inline-block;
float: none;
vertical-align: top;

6. Verifique que todo el contenido de la pgina fluya correctamente y corrija cualquier error detectado.

24

VI. EJERCICIOS COMPLEMENTARIOS

1. Consiga que la imagen que se muestra en la parte superior de su diseo fluido, se sustituya por un
slider de imgenes manual o automtico (las imgenes que debe mostrar en el slider son:
puerto_la_libertad.jpg, santa_ana.jpg y salvador_del_mundo.jpg. Estas imgenes estn dentro de
los recursos de la gua).

Fecha de entrega: Prxima semana.

25