Maquetado de CSS
Transcript of Maquetado de CSS
-
7/24/2019 Maquetado de CSS
1/17
Semana 6: Utilizacin de lenguajes de marcas en entornos web
-1-
Maquetando con hojas de estilo (CSS)
Introduccin
Hoy en da se prefiere realizar el maquetado con hojas de estilo para mantener el
objetivo de conseguir la apariencia sin usar el HTML para ello. Tambin es preferible
usar CSS cuando hay que modificar la posicin de una capa. Si maquetamos con tablas
es ms difcil realizar modificaciones.
Vamos a mostrar cmo realizar el maquetado a una, dos y tres columnas a travs de
un sencillo procedimiento probado en las ltimas versiones de los navegadores. Si
usted quiere que funcionen en Internet Explorer 5 y 6 y en las viejas versiones de
Netscape o quiere diseos complejos debe visitarhttp://www.cssplay.co.uk/layouts/o
http://www.csseasy.com/layouts/y obtendr visiones ms completas del asunto.
Diseando a una sola columnaQueremos maquetar a una columna, tal y como se observa en la figura siguiente
A continuacin presentamos una solucin sencilla:
body {
width:750px;margin:0 auto;margin-top:30px;}
/* ----- CABECERA ----- */
#cabecera {width:750px;height:150px;background-color:#333333;}
http://www.cssplay.co.uk/layouts/http://www.cssplay.co.uk/layouts/http://www.cssplay.co.uk/layouts/http://www.csseasy.com/layouts/http://www.csseasy.com/layouts/http://www.csseasy.com/layouts/http://www.cssplay.co.uk/layouts/ -
7/24/2019 Maquetado de CSS
2/17
Semana 6: Utilizacin de lenguajes de marcas en entornos web
-2-
/* ----- MEN ----- */
#menu {width:750px;height:40px;background-color: #C0C0C0;}
/* ----- CONTENIDOS ----- */
#contenidos {width:750px;min-height:450px; /* para navegadores modernos */height:auto !important; /* para navegadores modernos */height:450px; /* para IE5.x e IE6 */background-color: #FFFF66;
overflow:hidden;}
/* ----- PIE ----- */
#pie {width:750px;height:100px;background-color: #99FF66;overflow:hidden;}
En este caso estamos diseando para un ancho fijo. El diseo fluido que ocupa todo elancho disponible lo veremos despus.
Observe como usamos height:auto !important; para navegadores modernos puesto
que los antiguos no reconocen important y por tanto ignoran la propuesta, asimismo
ocurre con min-height que es sustituido por una altura fija en IE5.x e IE6
overflow:hidden es una tcnica muy utilizada para evitar efectos colaterales en el
diseo CSS. En ocasiones puede usarse tambin overflow:auto que genera barras de
scroll en caso necesario.
El cuerpo del documento ser el que vemos debajo
Cabecera
opcion 1
contenidos
pie
-
7/24/2019 Maquetado de CSS
3/17
Semana 6: Utilizacin de lenguajes de marcas en entornos web
-3-
Diseando a dos columnas
En este caso el aspecto es el siguiente
La propuesta la podemos ver a continuacin con los mens a la izquierda
Maquetado a dos columnasbody {width:750px;margin:0 auto;margin-top:30px;
}
-
7/24/2019 Maquetado de CSS
4/17
Semana 6: Utilizacin de lenguajes de marcas en entornos web
-4-
/* ----- CABECERA ----- */
#cabecera {width:750px;height:150px;background-color:#333333;}
/* ----- MEN ----- */
#menu {width: 200px;min-height: 500px; /* para navegadores modernos */;height: auto !important; /* para navegadores modernos */;height: 500px; /* para IE5.x e IE6 */;background-color: #C0C0C0;float: left;
}/* ----- CONTENIDOS ----- */
#contenidos {width: 550px;min-height: 500px; /* para navegadores modernos */;height: auto !important; /* para navegadores modernos */;height: 500px; /* para IE5.x e IE6 */;background-color: #FFFF66;overflow:hidden;
}
/* ----- PIE ----- */
#pie {width: 750px;height: 100px;background-color: #99FF66;overflow:hidden;
}
Cabecera
opcion 1
Contenidos
pie de pgina
-
7/24/2019 Maquetado de CSS
5/17
Semana 6: Utilizacin de lenguajes de marcas en entornos web
-5-
En este caso flotamos la capa #menu a la izquierda combinndola con overflow:hidden
en la capa de #contenidos. Cuando usamos esta tcnica debe sealarse un valor para
width si queremos que todo funcione correctamente.
Diseando a tres columnasEl aspecto de un diseo a tres columnas lo podemos apreciar abajo
La propuesta es una extensin de la anterior con dos columnas flotando a la izquierda
Maquetado a tres columnas
body {width:750px;
margin:0 auto;margin-top:30px;
-
7/24/2019 Maquetado de CSS
6/17
Semana 6: Utilizacin de lenguajes de marcas en entornos web
-6-
}
/* ----- CABECERA ----- */
#cabecera {width:750px;height:150px;background-color:#333333;}
/* ----- MEN ----- */
#menu {width: 200px;min-height: 500px; /* para navegadores modernos */;height: auto !important; /* para navegadores modernos */;height: 500px; /* para IE5.x e IE6 */;
background-color: #C0C0C0;float: left;}
/* ----- CONTENIDOS ----- */
#contenidos1 {width: 350px;min-height: 500px; /* para navegadores modernos */;height: auto !important; /* para navegadores modernos */;height: 500px; /* para IE5.x e IE6 */;background-color: #FFFF66;
float:left;}
#contenidos2 {width: 200px;min-height: 500px; /* para navegadores modernos */;height: auto !important; /* para navegadores modernos */;height: 500px; /* para IE5.x e IE6 */;background-color: #FF99FF;overflow:hidden;
}
/* ----- PIE ----- */
#pie {width: 750px;height: 100px;background-color: #99FF66;overflow:hidden;
}
-
7/24/2019 Maquetado de CSS
7/17
Semana 6: Utilizacin de lenguajes de marcas en entornos web
-7-
Cabecera
opcion 1
Contenidos 1
Contenidos 2
pie de pgina
Diseos fluidosComo ya hemos dicho estos diseos ocupan todo el ancho que tienen a su disposicin.
En el primer caso (a una columna) observamos que la diferencia estriba en permitir un
ancho libre
Maquetado a una columna fluida
body {margin:0;padding:0px;}
/* ----- CABECERA ----- */
#cabecera {height:150px;background-color:#333333;
}/* ----- MEN ----- */
#menu {height:40px;background-color: #C0C0C0;}
/* ----- CONTENIDOS ----- */
#contenidos {
min-height:450px; /* para navegadores modernos */height:auto !important; /* para navegadores modernos */
-
7/24/2019 Maquetado de CSS
8/17
Semana 6: Utilizacin de lenguajes de marcas en entornos web
-8-
height:450px; /* para IE5.x e IE6 */background-color: #FFFF66;overflow:hidden;}
/* ----- PIE ----- */
#pie {height:100px;background-color: #99FF66;overflow:hidden;}
Cabecera
opcion 1
contenidos
pie
A dos columnas dejamos libre el ancho de la capa #contenidos
Maquetado a dos columnas fluidas
body {margin:0;margin-top:30px;padding:0;
}
/* ----- CABECERA ----- */
#cabecera {height:150px;background-color:#333333;}
/* ----- MEN ----- */
#menu {width: 200px;min-height: 500px; /* para navegadores modernos */;
-
7/24/2019 Maquetado de CSS
9/17
Semana 6: Utilizacin de lenguajes de marcas en entornos web
-9-
height: auto !important; /* para navegadores modernos */;height: 500px; /* para IE5.x e IE6 */;background-color: #C0C0C0;float: left;
}
/* ----- CONTENIDOS ----- */
#contenidos {min-height: 500px; /* para navegadores modernos */;height: auto !important; /* para navegadores modernos */;height: 500px; /* para IE5.x e IE6 */;background-color: #FFFF66;overflow:hidden;
}
/* ----- PIE ----- */
#pie {height: 100px;background-color: #99FF66;overflow:hidden;
}
Cabecera
opcion 1
Contenidos
pie de pgina
Finalmente a 3 columnas vamos a estudiar el caso en el que es la columna central(#contenidos1) la que ocupa todo el espacio restante
Maquetado a tres columnas fluidas
body {margin:0;
margin-top:30px;padding:0;}
-
7/24/2019 Maquetado de CSS
10/17
Semana 6: Utilizacin de lenguajes de marcas en entornos web
-10-
/* ----- CABECERA ----- */
#cabecera {height:150px;background-color:#333333;}
/* ----- MEN ----- */
#menu {width: 200px;min-height: 500px; /* para navegadores modernos */;height: auto !important; /* para navegadores modernos */;height: 500px; /* para IE5.x e IE6 */;background-color: #C0C0C0;float: left;
}/* ----- CONTENIDOS ----- */
#contenidos1 {min-height: 500px; /* para navegadores modernos */;height: auto !important; /* para navegadores modernos */;height: 500px; /* para IE5.x e IE6 */;background-color: #FFFF66;overflow:hidden;
}
#contenidos2 {width:200px;min-height: 500px; /* para navegadores modernos */;height: auto !important; /* para navegadores modernos */;height: 500px; /* para IE5.x e IE6 */;background-color: #FF99FF;float:right;
}
/* ----- PIE ----- */
#pie {
height: 100px;background-color: #99FF66;overflow:hidden;
}
Cabecera
opcion 1
-
7/24/2019 Maquetado de CSS
11/17
Semana 6: Utilizacin de lenguajes de marcas en entornos web
-11-
Contenidos 2
Contenidos 1
pie de pgina
Ahora ponemos a flotar a izquierda y derecha las reas laterales y es la central la que
ocupa el espacio restante
Ejemplo de maquetado
Para practicar los diseos anteriores vamos a realizar un ejemplo cuya estructura
bsica vemos a continuacin
Hemos usado el ejemplo de 3 columnas fluidas realizando los siguientes cambios:
/* ----- CABECERA ----- */
#cabecera {height: 150px;background-color: #8B9CC7;background-image: url('Imagenes/fondo.jpg');
}
-
7/24/2019 Maquetado de CSS
12/17
Semana 6: Utilizacin de lenguajes de marcas en entornos web
-12-
En la zona de cabecera colocamos una altura de 150 pxeles que es la altura de las
imgenes de cabecera y colocamos de fondo la imagen de un degradado denominado
fondo.jpg. No obstante ponemos un color de fondo parecido, al efecto de que rellene
el espacio mientras se cargan las imgenes.
El men y el rea de la derecha #contenidos2 toman un color de fondo similar al colorfinal del degradado para permitir continuidad. Ambas se disean con un ancho de 200
pxeles.
/* ----- MEN ----- */
#menu {width: 200px;min-height: 642px; /* para navegadores modernos */;height: auto !important; /* para navegadores modernos */;height: 642px; /* para IE5.x e IE6 */;
background-color: #B6BAC5;float: left;}
/* ----- CONTENIDOS ----- */
#contenidos1 {min-height: 642px; /* para navegadores modernos */;height: 642px; /* para IE5.x e IE6 */;background-color: #FFFFFF;overflow: auto;background-image: url('Imagenes/lorem_ipsum.jpg');
color: #800000;}
#contenidos2 {width: 200px;min-height: 642px; /* para navegadores modernos */;height: auto !important; /* para navegadores modernos */;height: 642px; /* para IE5.x e IE6 */;float: right;background-color: #B6BAC5;
}
Como altura se ha considerado la de 642 pxeles que es la necesaria para las imgenesdel rea derecha
En la cabecera colocamos las imgenes que la completan incluso la parte inferior del
logo que va en la zona de mens
-
7/24/2019 Maquetado de CSS
13/17
Semana 6: Utilizacin de lenguajes de marcas en entornos web
-13-
...
A la imagen de la derecha se le obliga a flotar en dicha posicin
#logoGobierno{float: right;
}
Podemos observar que en el rea central #contenidos1 se ha fijado la altura y se ha
puesto el overflow a auto con el fin de que aparezcan barras de desbordamiento
cuando sea necesario. Esto suele hacerse cuando se quiere limitar la altura de la
pgina con objeto de que se visualice fcilmente el pi de pgina.
El pi de pgina tiene las siguientes caractersticas
/* ----- PIE ----- */
#pie {height: 30px;background-color: #333333;overflow: hidden;color: #FFFFFF;font-weight: bold;font-family: verdana;font-size: 8pt;
text-align: center;vertical-align: middle;}
Observe un fondo oscuro, un color claro y una alineacin vertical y horizontal centrada
Los contenidos del #pie
Gobierno de Canarias
-
7/24/2019 Maquetado de CSS
14/17
Semana 6: Utilizacin de lenguajes de marcas en entornos web
-14-
Comenzamos por decorar el men con una zona de bsquedas que incorpora una
edicin de texto y un botn
#busqueda {width: 200px;text-align: center;
}
#inputBusqueda {font-family: verdana;font-size: 8pt;width: 170px;
margin-top: 30px;}
#buttonBusqueda {color: #FFFFFF;border: 2px solid #FFFFFF;background-color: transparent;font-family: verdana;font-size: 8pt;font-weight: bold;width: 180px;margin-bottom: 30px;
margin-top: 10px;}
Completamos el rea con unos botones que incorporan un efecto rollover hecho en
javascript
-
7/24/2019 Maquetado de CSS
15/17
Semana 6: Utilizacin de lenguajes de marcas en entornos web
-15-
style="border-width:0px;" />
Se elimina el borde para evitar que aparezcan los colores tpicos de los hiperenlaces
En el rea derecha vamos a colocar
imgenes centradas horizontal y
verticalmente en sendos div. Como hemos
estudiado en el curso el centrado vertical de
una imagen se consigue convirtiendo el rea
en una celda y aplicando vertical-
align:middle
Adems la imagen debe tomar display:block
.imagen {display:table-cell;width: 200px;height: 150px;
border: 2px solid #000000;vertical-align:middle;
-
7/24/2019 Maquetado de CSS
16/17
Semana 6: Utilizacin de lenguajes de marcas en entornos web
-16-
background-color:white;}
.img {display:block;margin: auto auto;
}
.contenedor{margin-top: 5px;margin-bottom: 5px;
}
Puede observarse que el centrado horizontal se hace con margin: auto auto y que se
usa un div #contenedor para situar los mgenes entre imgenes
Completamos el diseo aadiendo relleno a la parte de los contenidos principales a fin
de observar las barras de scroll
-
7/24/2019 Maquetado de CSS
17/17
Semana 6: Utilizacin de lenguajes de marcas en entornos web
-17-
En los recursos que puedes encontrar en la moodle estn las imgenes necesarias para
recrear el ejercicio