<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Laboratório de Informática 1 e 2 (2009) &#187; CSS layout</title>
	<atom:link href="http://www.brunocampagnolo.com/2009li/tag/css-layout/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.brunocampagnolo.com/2009li</link>
	<description>PUCPR &#62; Bacharelado em Sistemas de Informação &#62; 1o e 2o Períodos</description>
	<lastBuildDate>Fri, 18 Dec 2009 10:28:56 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Layout de elementos em CSS</title>
		<link>http://www.brunocampagnolo.com/2009li/2009/11/03/layout-de-elementos-em-css/</link>
		<comments>http://www.brunocampagnolo.com/2009li/2009/11/03/layout-de-elementos-em-css/#comments</comments>
		<pubDate>Tue, 03 Nov 2009 18:08:12 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[aulas]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[CSS layout]]></category>
		<category><![CDATA[layout]]></category>

		<guid isPermaLink="false">http://www.brunocampagnolo.com/2009li/?p=609</guid>
		<description><![CDATA[A aula de hoje é uma continuação da aula anterior. Na aula anterior trabalhamos com o embasamento necessário para construir layouts  em CSS: as propriedades float, clear, position e width.
O objetivo agora é realizar alguns estudos de caso relacionados a tipos de layout que podem ser implementados através destas propriedades.
Apresentação referente à aula

Exemplos utilizados [...]]]></description>
			<content:encoded><![CDATA[<p>A aula de hoje é uma <a href="http://www.brunocampagnolo.com/2009li/2009/10/27/posicionamento-de-elementos-em-css/">continuação da aula anterior</a>. Na aula anterior trabalhamos com o embasamento necessário para construir layouts  em CSS: as propriedades <a href="http://reference.sitepoint.com/css/float">float</a>, <a href="http://reference.sitepoint.com/css/clear">clear</a>, <a href="http://reference.sitepoint.com/css/position">position </a>e <a href="http://reference.sitepoint.com/css/width">width</a>.</p>
<p>O objetivo agora é realizar alguns estudos de caso relacionados a tipos de layout que podem ser implementados através destas propriedades.</p>
<p><a href='http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/CSSLayoutCorrigido.ppt'>Apresentação referente à aula</a><br />
<span id="more-609"></span></p>
<p>Exemplos utilizados na aula:</p>
<ul>
<li><a href="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/01-2ColunasLiquido.html">Layout de 2 colunas líquido</a></li>
<li><a href="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/02-3ColunasLiquido.html">Layout de 3 colunas líquido</a></li>
<li><a href="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/03-FormularioComTabelaSemCSS.html">Formulário com TABELAS (sem CSS) &#8211; 1</a></li>
<li><a href="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/04-FormularioComTabelaSemCSS.html">Formulário com TABELAS (sem CSS) &#8211; 2</a></li>
<li><a href="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/05-FormularioComTabelaSemCSS.html">Formulário com TABELAS (sem CSS) &#8211; 3</a></li>
<li><a href="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/06-FormComBordas.html">Formulário com alteração das bordas</a></li>
<li><a href="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/07-FormComBordasCorreto.html">Formulário com alteração de bordas (correto)</a></li>
<li><a href="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/08-FormatandoLabelFieldSetELegend.html">Formatando label, fieldset e legend</a></li>
<li><a href="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/09-LayoutBaseadoEmTabelas.html">Layout baseado em tabelas</a></li>
<li><a href="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/10-LayoutBaseadoEmParagrafos.html">Layout baseado em parágrafos</a></li>
<li><a href="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/11-LayoutBaseadoEmListas.html">Layout baseado em listas</a></li>
<li><a href="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/12-RelembrandoFormatacaoLinks.html">Relembrando formatação de links</a></li>
<li><a href="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/13-CSS-Listas.zip">Relembrando formatação de listas</a></li>
<li><a href="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/14-ExemploDeRolloverCom2Imagens.html">Exemplo de rollover com 2 imagens</a></li>
<li><a href="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/15-ExemploDeRolloverCom1Imagem.html">Exemplo de rollover com 1 imagem</a></li>
<li><a href="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/16-ExemploDeMenuVertical.html">Exemplo de menu vertical</a></li>
</ul>
<p>Imagens utilizadas nos exemplos:</p>
<p><a href="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/button.gif"><img class="alignnone size-full wp-image-626" title="button" src="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/button.gif" alt="button" width="200" height="40" /></a></p>
<p><a href="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/button-over.gif"><img class="alignnone size-full wp-image-627" title="button-over" src="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/button-over.gif" alt="button-over" width="200" height="40" /></a></p>
<p><a href="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/flecha1.gif"><img class="alignnone size-full wp-image-628" title="flecha1" src="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/flecha1.gif" alt="flecha1" width="10" height="10" /></a></p>
<p><a href="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/pixy-rollover.gif"><img class="alignnone size-full wp-image-629" title="pixy-rollover" src="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/pixy-rollover.gif" alt="pixy-rollover" width="400" height="40" /></a></p>
<p><a href="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/underline1.gif"><img class="alignnone size-full wp-image-630" title="underline1" src="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/underline1.gif" alt="underline1" width="18" height="3" /></a></p>
<p><a href="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/underline1-hover.gif"><img class="alignnone size-full wp-image-631" title="underline1-hover" src="http://www.brunocampagnolo.com/2009li/wp-content/uploads/2009/11/underline1-hover.gif" alt="underline1-hover" width="18" height="3" /></a></p>
<p>Links para Layouts prontos em CSS:</p>
<ul>
<li><a href="http://www.csseasy.com/">http://www.csseasy.com/</a></li>
<li><a href="http://layouts.ironmyers.com/">http://layouts.ironmyers.com/</a></li>
<li><a href="http://www.code-sucks.com/css%20layouts/">http://www.code-sucks.com/css%20layouts/</a></li>
<li><a href="http://www.glish.com/css/">http://www.glish.com/css/</a></li>
<li><a href="http://www.intensivstation.ch/en/templates/">http://www.intensivstation.ch/en/templates/</a></li>
</ul>
<p>Links para frameworks CSS:</p>
<ul>
<li><a href="http://www.blueprintcss.org/">http://www.blueprintcss.org/</a></li>
<li><a href="http://960.gs/">http://960.gs/</a></li>
<li><a href="http://developer.yahoo.com/yui/grids/">http://developer.yahoo.com/yui/grids/</a></li>
<li><a href="http://delicious.com/bcp/css+framework">http://delicious.com/bcp/css+framework</a></li>
</ul>
<p>Links para geradores de layout:</p>
<p><a href="http://developer.yahoo.com/yui/grids/builder/">http://developer.yahoo.com/yui/grids/builder/</a><br />
<a href="http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php">http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php</a><br />
<a href="http://builder.yaml.de/">http://builder.yaml.de/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.brunocampagnolo.com/2009li/2009/11/03/layout-de-elementos-em-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

