Criando um layout de página fixo baseado em CSS - Parte1

Neste tutorial, use o framework Visual Web JSF do NetBeans para criar um layout de página fixo baseado em CSS. Você usará painéis de layout diferentes e outros elementos HTML da paleta para complentar o layout da sua página.

Conteúdo

• Criando a aplicação
• Adicionando o conteúdo do cabeçalho
• Adicionando o conteúdo da barra lateral esquerda
• Adicionando o conteúdo da barra lateral direita
• Adicionando o conteúdo do rodapé
• Adicionando conteúdo ao menu principal
• Resumo

Para seguir este tutorial, você precisa dos seguintes recursos e softwares.

* Para tirar vantagem dos recursos Java EE 5 do NetBeans IDE , use um servidor da aplicação que seja totalmente compatível com a especificação Java EE 5, tal como o Servidor da aplicação GlassFish V2 UR2. Se você estiver usando um servidor diferente, consulte as Notas de versão e as Perguntas freqüentes para saber problemas conhecidos e soluções alternativas. Para obter informações detalhadas sobre os servidores suportados e a plataforma Java EE, consulte as Notas de versão.

Observação para usuários do NetBeans IDE 6.1:

• Criar um projeto no NetBeans 6.1 inclui novas opções que podem ser deixadas como padrão. Por exemplo, a caixa de verificação Usar pasta dedicada para armazenar bibliotecas pode ficar desmarcada.
• Vinculação sob demanda dos recursos do NetBeans IDE 6.1. Onde os componentes requerem codificação de Java, agora você deve adicionar manualmente o atributo de vinculação aos componentes em uma aplicação Visual Web JSF. Para fazê-lo, clique com o botão direito do mouse em cada componente e escolha Adicionar atributo de vinculação. Para obter mais informações, consulte o On-demand Binding Attribute Wiki.

Criando a aplicação

Neste tutorial, você cria uma aplicação Web de uma única página baseada em CSS. Comece construindo uma página com a estrutura de layout mostrada na figura seguinte.

1. Crie uma aplicação Web que use o framework Visual Web JSF. Chame o projeto de com.samples.layout e o pacote de códigos-fonte padrão de fixedpagelayoutex.

   Observação: Criar um projeto no NetBeans 6.1 inclui novas opções que podem ser deixadas como padrão. Por exemplo, a caixa de verificação Usar pasta dedicada para armazenar bibliotecas pode ficar desmarcada.

   O arquivo Page1.jsp é aberto no Visual Designer.

2. Na janela Projetos, expanda o nó Páginas da Web, clique com o botão direito do mouse em Page1.jsp e escolha Refatorar > Renomear.

   A caixa de diálogo Renomear se abre.

3. Na caixa de diálogo Renomear, digite PageLayout1 como o novo nome da página. Marque para aplicar a renomeação de comentários e clique em Refatorar.

   O nome da página se altera na janela Projeto e na aba no Visual Designer.

4. Clique na aba JSP para abrir o editor JSP. Adicione o seguinte código HTML ao componente <form>.

   Amostra de código 1: Editando o JSP.

   <div id="container"> <div id="header"> Cabeçalho </div> <div id="leftBar"> Barra esquerda </div> <div id="content"> Conteúdo principal </div> <div id="rightBar"> Barra direita </div> <div id="footer"> Rodapé </div> </div>

5. Na janela Projetos, clique com o botão direito do mouse na pasta resources e selecione Novo > Folha de estilo em cascata.

6. No assistente para Novo folha de estilo em cascata, digite layout como o nome do arquivo e clique em Terminar.

   layout.css aparece sob o nó recursos na janela Projetos.
7. Retorne à visualização Design de PageLayout1.jsp. Na seção Avançado da paleta, arraste e solte um componente Link no Visual Designer.
8. Selecione o componente Link na janela Navegador. Na janela Propriedade, defina a URL como /resources/layout.css.
9. Na janela Projetos, clique duas vezes em layout.css para abri-lo no Visual Designer.

10. Adicione as regras de CSS seguintes a layout.css.

    Amostra de código 2: Adicionando regras de CSS.

    #container { margin:auto; width:760px; background: #ffffff; } #header { background: #DDDDDD; } #leftBar { float:left; width:150px; background: #EBEBEB; } #content { float:left; width:450px; background-color: #cdcde6; } #rightBar { float: right; width:160px; background: #EBEBEB; } #footer { clear:both; background:#DDDDDD; }

    
    Dê atenção especial às propriedades de CSS realçadas em azul. Elas são responsáveis pela colocação dos contêineres (
    ) no lugar correto. A regra CSS de rodapé possui a propriedade clear:both que dá uma dica para o navegador que ambas as suas extremidades devem ser limpas (não permite elementos flutuantes em ambos os lados), portanto, ela sempre é colocada abaixo dos outros elementos flutuantes.
11. Para alcançar a borda, selecione div:container na janela Navegador e defina a borda da sua propriedade style como sólida, largura de 5px, e deixe a cor padrão como preto.
12. Clique com o botão direito do mouse no nó do projeto e escolha Executar para implantar a aplicação. O navegador deve exibir uma página semelhante à figura seguinte:

Adicionando o conteúdo do cabeçalho

Primeiro, adicionamos o cabeçalho à nossa página e, em seguida, seu conteúdo.

1. Na seção Layout da paleta, arraste e solte um componente Painel de layout no cabeçalho <div> no Visual Designer.

   Observação: O tamanho padrão do Painel de layout é 128 x 128 pixels.

2. Abra o editor JSP e remova o conteúdo Cabeçalho do cabeçalho <div>.

3. Selecione o Painel de layout no Visual Designer. Na janela Propriedades do Painel de layout, clique no botão de reticências (...) ao lado da propriedade style.

   O Editor de estilos se abre.

4. No editor de estilo do Painel de layout, defina a altura como 175px e a largura como 760px.

   Observação: A largura é a mesma do contêiner <div> como especificado em layout.css.

5. Defina a imagem de segundo plano do Painel de layout usando o editor de estilo.

   Se você não possui uma imagem de cabeçalho, baixe uma aqui.
6. Clique em OK para salvar as alterações.

7. Na janela Propriedades, defina a propriedade panelLayout como Layout de grade ou Layout de fluxo.

   Observação: Se você selecionar GridLayout, será possível colocar mais facilmente os outros componentes na página. Se preferir usar o Layout de fluxo, você deverá usar outros componentes de layout para formatar a colocação do componente.

8. Arraste e solte um Texto estático no Painel de layout e defina sua propriedade text como Layout de página fixo 1. Use o editor de estilo para alterar o estilo do texto.

9. Execute a aplicação. A aplicação deve parecer com a figura seguinte.

   

Adicionando o conteúdo da barra lateral esquerda

Em seguida, adcionamos uma Barra de navegação do lado esquerdo da página. Vamos manter seu conteúdo simplificado, adicionando somente hyperlinks.

1. Arraste e solte um componente Painel de grade em leftBar <div>.

   Observação: O tamanho padrão do Painel de grade é 128 x 128 pixels. Quando um componente é adicionado ao Painel de grade, o tamanho inicial é descartado.

2. No editor JSP, remova o conteúdo Barra esquerda de leftBar <div>.
3. Na seção Básico da paleta, arraste e solte vários componentes HyperLink no Painel de grade. Observe janela Navegador para garantir que todos os hyperlinks estão dentro do Painel de grade, e reorganize-os, se necessário.

4. Execute a aplicação. A aplicação deve parecer com a figura seguinte.

   

Adicionando o conteúdo da barra lateral direita