Maquetacion
Definicion 1
La maquetación
es la distribución de los elementos en nuestra página. Actualmente, la
maquetación con tablas ha caído en desuso, y se realiza utilizando capas (<div>),
también llamadas divisiones o contenedores. La colocación de las capas en la
página se realiza a través de CSS. Esto permite, por ejemplo, que podamos pasar
de un diseño con un menú lateral a otro con el menú en la parte superior, sólo
cambiando la hoja de estilos.
En esta unidad
veremos las técnicas de maquetación más comunes, aunque hay que decir que
existen diversas formas de conseguir una misma maquetación.
Las capas
pueden estar anidadas unas dentro de otra. Básicamente, lo que haremos será
definir cómo se posiciona en la página, su colocación y su tamaño.
Nota: Lo aquí
explicado funciona para webs con el DTD XHTML Transitional o Strict. Al
declarar otro DTD, o no hacerlo, puede que el resultado no sea el esperado.
·
Definicion 2
La maquetación,
también llamada a veces diagramación, es un oficio del diseño editorial
que se encarga de organizar en un espacio, contenidos escritos, visuales y en
algunos casos audiovisuales (multimedia) en medios
impresos y electrónicos, como libros, diarios y revistas.
Estrictamente, el
acto de maquetar tan solo se relaciona con la distribución de los elementos en
un espacio determinado de la página, mientras que el diseño editorial
incluye fases más amplias del proceso, desde el proyecto gráfico, hasta los
procesos de producción denominados preprensa
(preparación para impresión), prensa (impresión) y posprensa
(acabados). Sin embargo, usualmente todo el aspecto gráfico de la actividad
editorial y periodística se conoce por el término maquetación.
·
Definicion
3
Maquetación de una
página web
Con los elementos que ya conocemos
podemos realizar operaciones de maquetación dentro de una página web.
La ventaja del uso de
bloques definidos con <div>, además de aplicar formato es que
podemos posicionarlos en el lugar que más nos convenga, gracias a algunas de
las propiedades de las hojas de estilo.
Este proceso se vuelve
muy sencillo si nos apoyamos en las opciones del panel Propiedades de estilo
del editor BlueGriffon. En concreto nos interesan las opciones de Posición
y distribución, recogidas en la figura. El panel en cuestión se despliega
mediante la opción Paneles>Propiedades de estilo o mediante el icono
correspondiente en la barra de iconos.
Ejemplos
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo etiqueta div - aprenderaprogramar.com</title>
</head>
<body>
<div >
Cabecera de la página.
</div>
<div >
Cuerpo de la página.
</div>
<div >
Pie de la página
</div>
</body>
</html>
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo etiqueta div - aprenderaprogramar.com</title>
</head>
<body>
<div>
Cabecera de la página.
</div>
<div>
Cuerpo de la página.
</div>
<div>
Pie de la página
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo etiqueta span - aprenderaprogramar.com</title>
</head>
<body>
<div>
Cabecera
<span>de</span> la <span>página</span>.
</div>
<div>
Cuerpo de la página.
</div>
<div>
Pie de la página
</div>
</body>
</html>
No hay comentarios:
Publicar un comentario