Maquetacion

Computación Multimedia 1

Maquetación con CSS
En la clase anterior aprendimos a reconocer las diferentes maneras de aplicar un estilo con CSS,
podían ser internas, específicas a una parte del documento o en definitiva un documento externo
que se pudiese aplicar a mas de un archivo html en nuestro sitio.

Ahora vamos a definir estilos globales, es decir que sean capaces de aplicarse indistintamente a
muchos documentos y además tenerlos definidos en un archivo aparte, pues si queremos dotar a
todas las páginas de los mismos estilos, no es tarea grata copiar y pegar la definición de los estilos
en cada una de las páginas.

Trabajo de Layout por medio de una hoja de estilos
Como ya sabemos se necesita trabajar ciertos criterios de diagramación dentro de cualquier pieza
de diseño, en el caso de los documentos html no es la excepción, para eso nos manejamos bajos
los estándares de usabilidad y navegación, de tal manera que podamos lograr que nuestro sitio se
vea de manera correcta en la gran mayoría de los navegadores.

Para eso trabajamos con elementos que nos permiten diagramar nuestro contenido, el mas
utilizado son las tablas que nos dejan trabajar tamaños y disposiciones dentro de un formato
predeterminado. En el caso de las hojas de estilo podemos utilizar tablas y DIV.

Antes de comenzar con el CSS quiero exponer aquí la importancia de usar los divs, un div es
básicamente un contenedor, en el podemos meter cualquier clase de contenido, con la gran ventaja
de que los podemos manipular a nuestro antojo con CSS, colocarlo en cualquier parte de la pagina,
de cualquier tamaño, de cualquier color, con bordes o sin ellos, con imágenes de fondo o sin ellas.

Veamos el siguiente caso utilizando un documento en blanco:

<html>
<head>
<title>ejemplo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<h1>Mi Primer Documento con CSS</h1>

<ul>
<li>Inicio</li>
<li>Seccion 1</li>
<li>Seccion 2</li>
<li>Seccion 3</li>
<li>Seccion 4</li>
<li>Seccion 5</li>
</ul>

Patricio Rodríguez M.
Escuela de Diseño | Duoc UC | Sede Viña del Mar


<h2>El título de este contenido</h2>
<p>Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado
para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión
en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de
las hojas de estilo que servirá de estándar para los agentes de usuario o navegadores.</p>
<p>La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un
documento de su presentación.
Por ejemplo, el elemento de HTML H1 indica que un bloque de texto es un encabezamiento y que
es más importante que un bloque etiquetado como H2. Versiones más antiguas de HTML permitían
atributos extra dentro de la etiqueta abierta para darle formato (como el color o el tamaño de
fuente). No obstante, cada etiqueta H1 debía disponer de esa información si se deseaba un diseño
consistente para una página, y además, una persona que lea esa página con un navegador pierde
totalmente el control sobre la visualización del texto.
Cuando se utiliza CSS, la etiqueta H1 no debería proporcionar información sobre como va a ser
visualizado, solamente marca la estructura del documento. La información de estilo separada en
una hoja de estilo, especifica como se ha de mostrar H1 : color, fuente, alineación del texto,
tamaño, y otras características no visuales como definir el volumen de un sintetizador de voz
(véase Sintetización del habla), por ejemplo.</p>
<p>La información de estilo puede ser adjuntada tanto como un documento separado o en el
mismo documento HTML. En este último podrían definirse estilos generales en la cabecera del
documento o en cada etiqueta particular mediante el atributo "style".</p>

</body>
</html>

este es un documento genérico al cual solo le hemos asignado algunas etiquetas nativas del
lenguaje HTML :

<h1> : nos permite definir un tamaño de texto de aproximadamente 18pt
<h2> : nos permite definir un tamaño de texto de aproximadamente 14pt
<p> : nos permite separar nuestro contenido en párrafos, de tal manera de poder ordenar el texto
en cajas de texto
<ul> : unformated list, es generar un listado con formato similar al obtenido en un documento de
word
<li> : es la etiqueta que nos permite asociar un objeto al elemento lista <ul>

Luego de haber asignado estos elementos a nuestro código podemos comenzar a trabajar en crear
nuestra hoja de estilos, para eso vamos al menu nuevo y en las opciones Página Básica,
seleccionamos CSS y luego Aceptar.



En esta nueva hoja de estilos vamos a definir primero las propiedades para el body o contenido
general de los documentos.

body{
background-color: #efefef;
color: #666666;
font-size: 10pt;
font-family: Arial;
}

Una vez asignados estos valores; en el documento html original vamos a vincular esta hoja de
estilos con el html; para eso nos colocamos sobre la etiqueta </head> y en el panel de diseño>
estilo CSS marcamos el botón de vincular y aparecerá la siguiente ventana de diálogo:

en examinar buscamos nuestra hoja de estilo y colocamos aceptar; debiese aparecer la siguiente
sintaxis sobre la etiqueta </head>

<LINK REL="stylesheet" TYPE="text/css" HREF="../ejemplo.css">

Los atributos de body se debiesen aplicar instantáneamente al documento HTML.

Volvemos a nuestra hoja de estilos y asignamos valores para las etiquetas <H1> y <H2>:

h1{
font-size:12pt;
text-transform:uppercase;
letter-spacing:2px;
color:white;
padding:22px;
}

h2{
color:#1E90FF;
font-size:14px;
text-transform:uppercase;
}

text-transform: corresponde a signar atributos a todas las letras que queden dentro de la etiqueta;
en este caso uppercase las coloca a todas en mayúscula.



Volvemos a nuestra hoja de estilo y en esta ocasión vamos a definir valores que serán asociados a
las etiquetas <div> que colocaremos en nuestro HTML:

#principal{
width:600px;
background-color:white;
}

principal será el area de nuestro documento que contendrá todo el resto del texto, en este caso su
ancho será de 600 pixeles

#header{
height:60px;
background-color:#1E90FF;
}

header corresponderá al encabezado que va a contener el título de nuestro documento, las div al
funcionar como areas de contenido permiten asignar altura (height) y color particular de fondo.

#navegacion{
width:150px;
float:left;
}

navegación va a contener a nuestros elementos de lista, que perfectamente puede ser un menú,
por eso le hemos dado la opción float, en este caso deja libre todo el costado izquierdo de nuestro
documneto para solo colocar ahí nuestra lista de elementos.

#contenido{
width:400px;
margin-left:180px;
border-left:1px solid #DDDDDD;
padding-left:12px;
}

contenido va a tener en su interior todo el texto de nuestro documneto, hemos asignados algunos
valores especiales:

margin-left: nos entrega la separación que va a tener nuestra div en relación al borde izquierdo de
nuestro documento

border-left: nos permite asignar una línea en el costado izquierdo de nuestra div, asignando su
espesor y el color que deseamos que tenga

padding-left: es la distancia que queremos colocar entre el borde en este caso izquierdo de nuestra
div y el comienzo del contenido de la misma.



Solo nos queda colocar las etiquetas div y asignarle las clases de estilo con los nombres que hemos
definido en nuestra hoja CSS; por ejemplo si queremos aplicar propiedades al título de nuestro
texto debemos aplicar de la siguiente manera la etiqueta div:

<div id="header">
<h1>Mi Primer Documento con CSS</h1>
</div>

en donde id corresponde a asignar el nombre de la clase creada en la hoja CSS, en nuestro caso
vamos a aplicar la clase header que corresponde a asignar atributos a el título del texto.



Utilización de listas para crear
un menú
En la mayoría de las ocasiones en que pensamos en elementos de navegación los asociamos
directamente en menús de datos. Si bien las hojas de estilo permiten trabajar de buena manera
con imágenes y cada uno de sus atributos, también existen modos de crear listados de datos por
medio de atributos visuales.

Para eso utilizaremos las listas sin orden (Unformated list) y sus respectivos elementos, etiquetas
que definimos en el brief anterior.

Pasos
Lo primero a desarrollar será definir nuestro listado de datos, para eso el código visto en un
documento html será el siguiente:

<div id=”menu”>
<ul>
<li>Inicio</li>
<li>Seccion 1</li>
<li>Seccion 2</li>
<li>Seccion 3</li>
<li>Seccion 4</li>
<li>Seccion 5</li>
</ul>
</div>

Una vez expuesto el listamiento de datos por medio de la etiqueta UL, veremos como le asignamos
atributos visuales por medio de nuestra hoja de estilo, tenemos además que tener por referencia
que nuestro listado se encontrará incluido dentro de un contenedor div llamado menu.

#menu ul, li {
list-style-type: none;
}

En esta línea estoy declarando que existe un contenedor llamado menú, en cuyo interior hay un
listado sin formato y elementos de lista; la declaración list-style-type: none hace alusión de que se
presentará el listado sin atributos de lista, es decir sin viñetas.

#menu ul {
margin: 0;
padding: 0;
}

se definen a cero los valores de margen interior y exterior.



#menu a {
text-decoration: none;
color: #3366CC;
background: #F0F7FC;
display: block;
padding: 3px 6px;
width: 138px;
}

la etiqueta a en html responde a la declaración de un vínculo o link, en este caso se define dentro
de la etiqueta menu y se le asignan los siguientes atributos:

text-decoration: none; (hace alusión de que cada vez que nosotros definimos un vínculo dentro de
un documento html por omisión aparece una línea bajo el texto asignado como vínculo, con esta
opción se elimina esta línea que aparece).

display: block; (por medio de esta opción hacemos que los espacios contenedores de nuestros
elementos de lista se visualicen como bloques contenedores a los cuales podemos asignarles
atributos de color de fondo, espaciado, etc;)

#menu a:hover {
background: #DBEBF6;
}

a:hover es una etiqueta que complementa la función de vinculación, hover indica que sucede con
nuestro elemento de vinculación una vez que el cursor se coloca sobre este; en el caso de nuestro
ejemplo será un cambio de color.


Maquetacion

Más contenido relacionado

La actualidad más candente (18)

Destacado (19)

Similar a Maquetacion (20)

Más de iConstruye (18)

Último (20)

Maquetacion