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:

  • 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.

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

Tecnoclasta ©2007-2025.
Categorias: Aula CPWJ, Programação para Internet
Por favor, Deixe seu Comentário!
Tecnoclasta

Um comentário. Adicione o seu!

  • >>Raquel Almeida
    12 agosto 2008, 3:59 pm

    olá…como eu faço para ingresa no curso de diagramação…qnt custa???

    obrigada

    raquel

    [Responder]

Deixe seu Comentário:

Click to cancel reply
  • Links

    • Home
    • Livro: Vermelho Vivo
    • Cobertura NASA
  • Cursos Gratuítos

    • Curso Java Web
    • Vídeo Curso Asp.Net
  • Assine Grátis

    Assine o Tecnoclasta por Email
    ou

     Assine o Feed

  • Anúncios


  • Procurar


  • Categorias

    • Acontece
    • Aniversário
    • Astronáutica
    • Astronomia
    • Aula CPWA
    • Aula CPWJ
    • Ciências
    • Como Começaram
    • Diversão e Arte
    • Downloads
    • Educação
    • EeePc
    • Filmes
    • IADS
    • Livros
    • Lost
    • Metadados
    • Pensamentos
    • Pensando
    • Programação para Internet
    • Tecnoclasta
    • Tecnologia
    • Uncategorized
    • Video
  • Banners



    Uêba - Os Melhores Links
  • Artigos Recentes

    • Endeavour pousou na Califórnia neste Domingo
    • IADS> Imagem Astronômica da Semana: A Face Oculta da Lua
    • Shuttle Endeavour: desacoplado da Estação Espacial
    • Vídeos do Meteoro no Canadá
    • Missão STS126 Endeavour: fases finais
    • Endeavour: Mais duas Caminhadas Espaciais
    • Endeavour. Sexta-feira é dia de preparação
    • Livro: Vermelho Vivo, Capítulo 10
    • Endeavour: em andamento Segunda Caminhada Espacial [update: Encerrada]
    • Como anda a missão STS 126 Endeavour
    • Livro: Vermelho Vivo, Capítulo 9
    • Lançamento da Endeavour
    • Hubble: Foto do primeiro exoplaneta ao redor de uma estrela
    • Lançamento da Endeavour nesta Sexta à noite
    • Livro: Vermelho Vivo
  • Trecos

    CURRENT MOON
    lunar phases
  • Comentários Recentes

    • Maikel em Asp.net Vídeo Aulas | Aula 3: Hello World Asp.Net
    • Pedro Farbelow em Segunda Aula: Página mínima XHTML
    • Leandro Iglesias em Curso Gratuito de Programação para Web em Java
    • D`ELHER em LHC: Grande Colisor de Hádrons
    • kathllen em Esquadrilha da Fumaça em São José dos Campos.
    • Sergio Murilo em Missão STS126 Endeavour: fases finais
    • Luiz Henrique em Próximos Eclipses Solares Totais e Anulares no Brasil até 2050.
    • Carros Online » Blog Archive » Vídeos do Meteoro no Canadá em Vídeos do Meteoro no Canadá
    • Prof. Luis Eduardo em Curso Gratuito de Programação para Web em Java
    • Prof. Luis Eduardo em Primeira Aula: Web Como funciona.
  • RSS Meu FriendFeed

    • Professores: o aluno precisa aprender a ter noção. “Só” isso (via Google Reader)
    • [tecnoclasta] Endeavour pousou na Califórnia neste Domingo: Devido ao tempo ruim na Flór.. http://tinyurl.com/5lbge4 (via Twitter)
    • [tecnoclasta] IADS> Imagem Astronômica da Semana: A Face Oculta da Lua: Devido a rota.. http://tinyurl.com/6r8y6n (via Twitter)
    • [tecnoclasta] Shuttle Endeavour: desacoplado da Estação Espacial: Depois de quase duas s.. http://tinyurl.com/5o2j5g (via Twitter)
    • USP libera revistas científicas inteiras na internet (via Google Reader)
    • Vídeos do Meteoro no Canadá (via Blog)
    • [tecnoclasta] Missão STS126 Endeavour: fases finais: Vamos continuar a cobertura da miss.. http://tinyurl.com/5eybsx (via Twitter)
    • [tecnoclasta] Cyber com Linux « AmbienteVirtual.Net [del.icio.us]: Exemplo de Cyber Café.. http://tinyurl.com/5cm5sj (via Twitter)
    • [tecnoclasta] OpenLanhouse [del.icio.us]: Gerenciador de Lan House com linux http://tinyurl.com/56sl2t (via Twitter)
    • Como ajudas as vitimas das enchentes em Santa Catarina. (via Google Reader)
    • Como montar seu Fliperama em casa, passo-a-passo (via Google Reader)
    • The Quick Reference Site - The largest collection of free Quick Reference Cards [del.icio.us] (via Blog)
  • Contato

  • Tecnoclasta no Orkut

Copyright © 2008 Tecnoclasta | Powered By Wordpress | Theme By DivitoDesign.com

Para o Topo da Página