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:
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:
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:
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:
- http://www.maujor.com/tutorial/lay2col-faux-colunm.php
- http://www.maujor.com/tutorial/qqer-ordem-3colunas.php
- http://tableless.com.br/artigos/tutorial/
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.
olá…como eu faço para ingresa no curso de diagramação…qnt custa???
obrigada
raquel
[...] Diagramação Css [...]
Existe a opção de donwload do curso completo ?
Ainda não.