Html
Se está descargando tu SlideShare.
×
Eche un vistazo a continuación
Más Contenido Relacionado
Presentaciones para usted (18)
A los espectadores también les gustó (19)
Similares a Maquetacion (20)
Más de iConstruye (18)
Más reciente (20)
Maquetacion
- 1. 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
- 2. Computación Multimedia 1 <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. Patricio Rodríguez M. Escuela de Diseño | Duoc UC | Sede Viña del Mar
- 3. Computación Multimedia 1 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. Patricio Rodríguez M. Escuela de Diseño | Duoc UC | Sede Viña del Mar
- 4. Computación Multimedia 1 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. Patricio Rodríguez M. Escuela de Diseño | Duoc UC | Sede Viña del Mar
- 5. Computación Multimedia 1 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. Patricio Rodríguez M. Escuela de Diseño | Duoc UC | Sede Viña del Mar
- 6. Computación Multimedia 1 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. Patricio Rodríguez M. Escuela de Diseño | Duoc UC | Sede Viña del Mar
- 7. Computación Multimedia 1 #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. Patricio Rodríguez M. Escuela de Diseño | Duoc UC | Sede Viña del Mar
