Oitava Aula: Diagramação Css

Autor: Prof. Luis Eduardo | Data: 27 novembro 2007 | Por favor, Deixe seu Comentário!

Sejam bem vindos, esta é a oitava aula de Programação Web em Java, para saber mais sobre o curso, começe em Curso de Programação Web em Java - CPWJ.

Na última aula estudamos como lidar com blocos e trechos xHtml e com bordas, margens e preenchimento. Hoje iremos ver o uso de background, ou pano de fundo e como usar tudo isso para diagramação de sua página.

Background

Os parâmetros background permitem definir como será o comportamento do fundo de um bloco. O fundo inclui a área de conteúdo e o preenchimento (padding). É possível definir uma cor para o fundo, ou preencher o fundo com uma figura. Esta figura pode ser repetida por toda a área ou de outras maneiras. Vamos definir um bloco para realizar os testes:

…
<body>
<p>este é o bloco de teste</p>
</body>
</html>

E em style definir algumas características:

<style type=”text/css”>
p {
padding: 40px;
margin: 50px;
heigth: 200px;
width: 300px; }
</style>

Pronto assim teremos uma caixa para aplicar os padrões de fundo. Vamos testar primeiro a cor de fundo:

p{
background-color: #ccc; /* cor de fundo cinza */
}

Nada mais simples. Agora vamos usar uma figura de fundo. Arrume uma imagem *.gif ou *.jpg e copie para o mesmo diretório do arquivo Css. É possível aplicar um padrão repetido por todo o bloco usando:

p{
background-image: url(“nome do arquivo.jpg”);
}

Se quizer controlar como será a repetição

background-repeat: no-repeat; /* a imagem somente uma vez */
background-repeat: repeat-y; /* a imagem repete na vertical */
background-repeat: repeat-x; /* a imagem repete na horizontal */
background-repeat: repeat; /* a imagem repete na vertical e horizontal (padrão) */

Um efeito interessante é manter o fundo fixo quando rolamos a página:

background-attachment: fixed;
background-attachment: scroll; /* rola de forma padrão */

Quando não repetimos a imagem por todo o fundo, podemos posicionar o local onde a imagem irá se apresentar:

background-position: x-pos y-pos ; x-% y-% ; top left ; top center ; top right ; center left ;
center center ; center right ; bottom left ; bottom center ; bottom right ;

Exemplos

Para mostrar uma imagem de fundo exatamente no meio do bloco de modo:

p{
background-image: url(“nomearquivo.gif”);
background-repeat: no-repeat;
background-position: center center;
}

Como os outros parâmetros podemos escrever um grupo de opções de uma vêz só:

p{
background: url(“nomearquivo.gif”) no-repeat center center fixed;
}

As opções podem vir em qualquer ordem e pode-se omitir qualquer uma delas.

Parâmetro Float

Os blocos ‘div’ se comportam exatamente como os parágrafos ‘p’. Quando colocamos um parágrafo na página e definimos uma largura menor que a largura da página é evidente que sobrará espaço a direita do bloco. Veja a figura abaixo:

bloco1

Digamos que o bloco em azul claro é o fundo do navegador, e os blocos amarelo e verde são dois parágrafos. Usamos Css para definir o parágrafo amarelo e o bloco verde com largura 100px:

#paragrafoamarelo, #paragrafoverde { width:100px; }

Mesmo existindo espaço para os dois parágrafos ficarem lado a lado, como são blocos eles terminam com quebra de linha e o bloco verde continua abaixo.
O parâmetro float permite que um parágrafo simplesmente não quebre a linha no final. O comportamento é de flutuação. O bloco pode ser colocado a esquerda e o restante vai contornar conforme a figura:

bloco2

Aqui o bloco amarelo possui os seguintes parâmetros:

#paragrafoamarelo{
width: 100px;
float: left; /* flutuando a esquerda */
}

e o verde:

#paragrafoverde{
width:100%; /* parágrafo verde ocupando toda a largura da página */
}

Para colocar os dois parágrafos um ao lado do outro:

#paragrafoamarelo{
width: 100px;
float: left; /* flutuando a esquerda */
}

e o verde:

#paragrafoverde{
width:100px;
float:left; /* flutuando a esquerda */
}

Diagramação com Css

Vamos falar um pouco sobre diagramação com Css. Como exemplo vamos tomar o código xHtml proposto na última aula com algumas modificações:

…
<body>
<div id=”tudo”>

<div id=”titulopagina”>
<h1>Título da Página</h1>
<h2>Descrição da página parte do título</h2>
<p>Autor: Luís Eduardo. Também parte do título</p>
</div> <!– fechando titulopagina –>

<div id=”menu”>
<h2>Menu de opções:</h2>
<ul >
<li class=”impar”>Opção 1</li>
<li>Opção 2</li>
<li class=”impar”>Opção 3</li>
<li>Opção 4</li>
<li class=”impar”>Opção 5</li>
</ul>
</div> <!– fechando menu –>

<div id=”conteudo”>
<h2>Conteúdo principal da página</h2>
…
</div> <!– fechando conteúdo –>

<div id=”rodape”>
<h2>Feito por Luís Eduardo</h2>
…
</div> <!– fechando rodapé –>

</div> <!– fechando tudo –>

</body>

E vamos planejar um modelo de diagramação desejado:

bloco3

Como já expliquei várias vezes, o conteúdo do curso é uma apresentação sobre os assuntos. Material detalhado está na web, e já indiquei vários lugares. Vamos fazer esta diagramação acima explicando cada detalhe e depois é por conta de vocês.

Vamos considerar algumas escolhas:

A largura total da página será fixa e com 758px. (exato para não aparecer a barra de rolagem inferior em tela com resolução 800×600)
A altura dependerá do conteúdo.
A barra lateral em amarelo terá 250px
O título com altura de 200px;
O rodapé terá altura 40px;

Vamos lá Css com as medidas:

#tudo {
width : 758px;
background-color: #ffcccc;
}#titulopagina {
height : 200px;
background-color: #00ff00;
}

#menu {
width : 250px;
margin: 2px;
background-color:yellow;
}

#conteudo {
width : 498px; /* 758px- 250px -10px (margens dos blocos) */
margin: 2px;
background-color: orange;
}

#rodape {
height : 40px;
background-color: red;
}

Isso fará com que todos os blocos estejam na medida correta, porém um abaixo do outro. Para acertar os blocos no lugar iremos acrescentar o float no conteúdo e no menu:

#menu { …
float:left;
…
} e
#conteudo {…
float:right;
…
}

Isso colocará os blocos menu e conteúdo lado a lado. Porém o comportamento do rodapé ainda será errado. Teste no Firefox e no Iexplorer e veja por si mesmo. Para corrigir isso utilize o parâmetro Clear, que proíbe qualquer conteúdo ao lado de um bloco:

#rodape {…
clear: both; /*proíbe conteúdo a direita e a esquerda do rodapé, fazendo ele ir para baixo */
…
}

Ainda temos alguns probleminhas como ajustes de padding dos blocos e as cores de fundo que não se espandem para baixo no menu e conteúdo, eliminar os pontinhos no menu, centralizar o layout, etc.

body {
margin : 0px 0px;
text-align:center;
}

#tudo {
text-align : left;
…
}

#menu *, #conteudo * {
padding: 0 6px;
}

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

Acabou a primeira parte do curso gente, cansei de falar de html, css. Agora fiquem com os especialistas desta área: o Diego Eis do http://www.tableless.com.br e Maurício Samy do http://www.maujor.com. E claro, os cursos web mais completos (infelizmente em inglês) em http://w3schools.com/.

Na próxima aula iremos falar de Java. Uma aula bem teórica, mas é importante saber com o que estaremos lidando.

Aprofundando

Estude alguns outros modelos de layout em:

Na Seqüência

dia 4 de dezembro: Vamos falar de Java, aula introdutória.
dia 11 de dezembro: todos os fundamentos, rápido e direto!
dia 18 de dezembro: orientação ao objeto.

Dúvidas? vá para o fórum.

Procure os mais baratos Livros sobre a Web, Livros sobre Java, Livros HTML ou Livros CSS nas melhores lojas do Brasil.

Categorias: Aula CPWJ, Programação para Internet

Por favor, Deixe seu Comentário!