Modelos de Plantillas HTML para Maquetado Web-1 PDF

1
UNIVERSIDAD EAN
FACULTAD DE INGENIERÍA
PROGRAMA DE INGENIERÍA DE SISTEMAS
UNIDAD DE ESTUDIO: DESARROLLO WEB
MODELOS DE MAQUETADO HTML
Modelo Definición Vista Previa de la Plantilla
modelo 1 1 columna, elástico centrado
modelo 2 1 columna, elástico, centrado, con cabecera y pie de página

2
modelo 3 1 columna fijo centrado
modelo 4 1 columna, fijo, centrado, con cabecera y pie de página
modelo 5 1 columna, líquido centrado
modelo 6 1 columna, líquido centrado, con cabecera y pie de página

3
modelo 7 2 columnas, elástico y barra lateral a la izquierda
2 columnas, elástico, barra lateral a la izquierda, con cabecera y

modelo 8 pie de página
modelo 9 2 columnas elástico y con barra lateral a la derecha

4
2 columnas, elástico, barra lateral a la derecha, con cabecera y pie

modelo 10 de página
modelo 11 2 columnas fijo y con barra lateral a la izquierda
2 columnas fijo, con barra lateral a la izquierda con encabezado y

modelo 13 2 columnas fijo y con barra lateral a la derecha

5
2 columnas fijo, con barra lateral a la derecha con encabezado y

modelo 15 2 columnas, híbrido, con barra lateral a la izquierda
2 columnas, híbrido, con barra lateral a la izquierda y con

modelo 16 encabezado y pie de página
6
modelo 17 2 columnas, híbrido, con barra lateral a la derecha
2 columnas, híbrido, con barra lateral a la derecha y con

modelo 19 2 columnas, líquido, con barra lateral a la izquierda

7
2 columnas, líquido, con barra lateral a la izquierda, con

modelo 21 2 columnas, líquido, con barra lateral a la derecha
2 columnas, líquido, con barra lateral a la derecha, con encabezado

modelo 22 y pie de página
modelo 23 3 columnas, absolutamente posicionado

8
3 columnas, absolutamente posicionado, con encabezado y pie de

modelo 24 página
modelo 25 3 columnas elástico
modelo 26 3 columnas elástico, con encabezado y pie de página

9
modelo 27 3 columnas fijo
modelo 28 3 columnas fijo, con encabezado y pie de página
modelo 29 3 columnas híbrido

10
modelo 30 3 columnas híbrido con encabezado y pie de página
modelo 31 3 columnas líquido
modelo 32 3 columnas líquido con encabezado y pie de página

11
DEFINICIONES
Elástico: Unidad de medida en ems.

Fijo: Unidad de medida en pixeles.
Líquido: Unidad de medida en porcentaje
Híbrido: Medida de columnas en porcentajes y de barras laterales
en ems.
Unidades y Medidas
En ocasiones, como hemos mencionado, el valor de una propiedad se

puede expresar por unidades de longitud. Por ejemplo, los valores de
font-size y text-indent.
Las unidades de longitud consisten en un número seguido de una

unidad de medida (cm, em, in, pt, px). Hay dos tipos de unidades:
absolutas y relativas.
Unidades absolutas:
pulgadas (in). Una pulgada=2.54 cm.

centímetros (cm).
milímetros (mm)
puntos (pt). Un punto=1/72 de pulgada.
picas (pc). Una pica=12 puntos
Unidades relativas
em
ex
px
La unidad em es igual a la altura (font-size) de la letra del elemento

en el que se usa. Por ejemplo si para un párrafo especificamos un
indentado de 2em, el largo de la sangría será igual a dos veces el
tamaño de la letra de ese párrafo. Cuando empleamos la unidad de
medida 'em' para especificar el tamaño de la letra (font-size)
entonces el valor de 'em' viene dado por el tamaño de la fuente del
elemento padre.
p { font-size:11px;text-indent: 2em; }
12
Este ejemplo equivale a un indentado de 22 px para el párrafo

a que se aplica
div { font-size:15px;}
p { font-size:1.2em;}
En este ejemplo, si el párrafo está contenido en un elemento div, el

tamaño de la letra sería un 20% mayor que el especificado para dicho
div. O si no estuviera contenido en un div, un 20% mayor que el
tamaño de letra del elemento del que descienda (por ejemplo, body).
Recuerda que no hay que dejar espacios en el valor de longitud y la

unidad de medida
No es lo mismo expresar las medidas en una unidad u otra. Unidades

"absolutas" como pixels, centímetros, puntos, permiten un control
exacto de la apariencia de la página, siempre claro está, que esta se
visualice en el entorno preciso para el que fue diseñada. Por ejemplo,
la unidad 'pixel' tiene un valor diferente dependiendo de la resolución
de la pantalla y el tipo de ordenador del usuario. Así, normalmente un
sistema operativo Windows mantiene una equivalencia de 96px por
pulgada, y un Macintosh 72px por pulgada. Si en lugar de pixels se
utiliza la medida de puntos (pt) el tamaño del punto depende de la
resolución de la pantalla del usuario.
Esta es la razón por la que se recomienda el uso de unidades de

medida 'relativas', y dentro de estas, el uso de 'em'.
En origen la unidad 'em' era el equivalente a la altura (height) de la

´M´mayúscula. En la actualidad, sin embargo, la unidad 'em' alude
simplemente al tamaño de la fuente instalada.
Con este tipo de medidas el autor mantiene un control relativo ya

que, en relación con el tamaño de fuente por defecto del usuario,
puede especificar cuanto mas grande o mas pequeña se ha de
visualizar la letra de la página.
Ademas la unidad 'em' puede utilizarse para cualquier propiedad CSS

que admita medidas (márgenes, sangrías ...) lo que permite un
diseño proporcionado al sistema del usuario.
La unidad ex es igual a la altura de la letra x minúscula (la propiedad

'x-height' de la fuente utilizada.
En muchos tipos de fuentes existe la siguiente proporción: un "em"

equivale a 1.5 "ex".
13
La unidad px es un pixel. La unidad pixel tiene valores

distintos en términos de visualización en pantalla, y en
términos de impresión.
La unidad pixel no es muy aconsejada, pues los elementos que la

utilicen se visualizaran de forma diferente en un monitor dependiendo
del tamaño de pantalla y resolución; otras unidades responden mejor
a estos diferentes entornos.
Vamos a ver algunas comparaciones.
Unidades de porcentaje
Un valor de porcentaje se forma por un número y el signo %. No hay

espacios en un valor de porcentaje.
Los valores de porcentaje se fijan en relación a otro. Generalmente,
el valor de porcentaje es relativo al tamaño de fuente del elemento:
Fuente: Recuperado de
http://www.ignside.net/man/css/unidades.php
ELABORÓ
INGENIERO JAIME ALBERTO GUTIÉRREZ MEJÍA
DOCENTE INSTRUCTOR
DESARROLLO WEB
UNIVERSIDAD EAN
2020

Modelos de Plantillas HTML para Maquetado Web-1 PDF

Cargado por

Copyright:

Formatos disponibles

Modelos de Plantillas HTML para Maquetado Web-1 PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Modelos de Plantillas HTML para Maquetado Web-1 PDF

Cargado por

Copyright:

Formatos disponibles

1

MODELOS DE MAQUETADO HTML

Modelo Definición Vista Previa de la Plantilla

modelo 1 1 columna, elástico centrado

modelo 2 1 columna, elástico, centrado, con cabecera y pie de página

modelo 3 1 columna fijo centrado

modelo 4 1 columna, fijo, centrado, con cabecera y pie de página

modelo 5 1 columna, líquido centrado

modelo 6 1 columna, líquido centrado, con cabecera y pie de página

modelo 7 2 columnas, elástico y barra lateral a la izquierda

2 columnas, elástico, barra lateral a la izquierda, con cabecera y

modelo 9 2 columnas elástico y con barra lateral a la derecha

2 columnas, elástico, barra lateral a la derecha, con cabecera y pie

modelo 11 2 columnas fijo y con barra lateral a la izquierda

2 columnas fijo, con barra lateral a la izquierda con encabezado y

modelo 13 2 columnas fijo y con barra lateral a la derecha

2 columnas fijo, con barra lateral a la derecha con encabezado y

modelo 15 2 columnas, híbrido, con barra lateral a la izquierda

2 columnas, híbrido, con barra lateral a la izquierda y con

modelo 17 2 columnas, híbrido, con barra lateral a la derecha

2 columnas, híbrido, con barra lateral a la derecha y con

modelo 19 2 columnas, líquido, con barra lateral a la izquierda

2 columnas, líquido, con barra lateral a la izquierda, con

modelo 21 2 columnas, líquido, con barra lateral a la derecha

2 columnas, líquido, con barra lateral a la derecha, con encabezado

modelo 23 3 columnas, absolutamente posicionado

3 columnas, absolutamente posicionado, con encabezado y pie de

modelo 25 3 columnas elástico

modelo 26 3 columnas elástico, con encabezado y pie de página

modelo 27 3 columnas fijo

modelo 28 3 columnas fijo, con encabezado y pie de página

modelo 29 3 columnas híbrido

modelo 30 3 columnas híbrido con encabezado y pie de página

modelo 31 3 columnas líquido

modelo 32 3 columnas líquido con encabezado y pie de página

Elástico: Unidad de medida en ems.

En ocasiones, como hemos mencionado, el valor de una propiedad se

Las unidades de longitud consisten en un número seguido de una

pulgadas (in). Una pulgada=2.54 cm.

La unidad em es igual a la altura (font-size) de la letra del elemento

Este ejemplo equivale a un indentado de 22 px para el párrafo

En este ejemplo, si el párrafo está contenido en un elemento div, el

Recuerda que no hay que dejar espacios en el valor de longitud y la

No es lo mismo expresar las medidas en una unidad u otra. Unidades

Esta es la razón por la que se recomienda el uso de unidades de

En origen la unidad 'em' era el equivalente a la altura (height) de la

Con este tipo de medidas el autor mantiene un control relativo ya

Ademas la unidad 'em' puede utilizarse para cualquier propiedad CSS

La unidad ex es igual a la altura de la letra x minúscula (la propiedad

En muchos tipos de fuentes existe la siguiente proporción: un "em"

La unidad px es un pixel. La unidad pixel tiene valores

La unidad pixel no es muy aconsejada, pues los elementos que la

Vamos a ver algunas comparaciones.

Un valor de porcentaje se forma por un número y el signo %. No hay

También podría gustarte