Exercício 1.4: Projetando a Aparência e o Comportamento do Web Site

Mostre-me

Você deve concluir o Exercício 1.3: Preenchendo o Web Site com Páginas da Web antes de começar a projetar o Web site.

Como uma unidade, as páginas da Web que compõem um Web site devem ter um design e um layout visuais similares. As páginas individuais devem aparecer relacionadas para que o Web site seja coeso. É uma boa prática começar um projeto pensando primeiro no design do Web site e, em seguida, criando as páginas da Web individuais. Caso contrário, você obterá um Web site que consiste em várias páginas da Web desconectadas que não têm organização ou relacionamentos visuais aparentes.

A melhor forma de criar uma aparência e comportamento comuns para o Web site é utilizando um gabarito de página. Um gabarito de página é um arquivo individual que você pode utilizar para controlar elementos comuns em todas as páginas em seu site. Depois de aplicar o gabarito às páginas, você pode minimizar o esforço de futuras alterações de design fazendo a alteração apenas uma vez no gabarito; a alteração é então aplicada a todas as páginas que utilizam o gabarito.

O gabarito de página é projetado para ter áreas comuns e áreas de conteúdo. Uma área comum é uma área compartilhada comum a todas as páginas que utilizam o gabarito de página, que é útil para elementos que são iguais em cada página, como banners de site e áreas de navegação. A área de conteúdo será diferente para cada página. Depois do gabarito ser aplicado a páginas individuais, você poderá editar as áreas de conteúdo nessas páginas para incluir informações específicas àquela página. Elementos de página, como texto e imagens, específicos a uma determinada página são os tipos de elementos que vão em áreas de conteúdo do gabarito de página. Você pode criar quantas áreas de conteúdo e áreas comuns desejar em um gabarito.

Um gabarito de página controla a aparência e o comportamento de um layout de site de uma forma bem diferente da de utilizar uma folha de estilo. Saiba Mais sobre a Diferença Entre Gabaritos de Página e Folhas de Estilo.

Neste tutorial, criaremos um gabarito de página e definiremos algumas áreas comuns e de conteúdo para projetar uma aparência e comportamento consistentes para o site Classificados inteiro. Esse gabarito de página assegura que cada página será similar ao seguinte design:

Layout de site básico

Criando um Novo Gabarito de Página

  1. Na visualização Explorador de Projetos, clique com o botão direito do mouse no nome do projeto, ClassifiedsTutorial.
  2. Selecione Novo > Arquivo de Gabarito de Página no menu pop-up. O assistente Novo Arquivo do Gabarito de Página é aberto.
  3. Aceite a pasta padrão (/ClassifiedsTutorial/WebContent). É nela que seu arquivo de gabarito ficará localizado depois de ser criado.
  4. Digite um nome para o arquivo de gabarito no campo Nome do Arquivo. Para este tutorial, nomeie o arquivo template. Observe que o nome completo do arquivo resultante será template.jtpl.
  5. Assegure-se de que HTML esteja selecionado como a linguagem de marcação.
  6. Selecione Gabarito contendo JSP como o Modelo.
  7. Deixe a caixa de opções Configurar opções avançadas limpa.
  8. Clique em Concluir. O novo gabarito é aberto no Page Designer. Quando um gabarito em branco for aberto, você será lembrado por uma caixa de diálogo que deve incluir pelo menos uma área de conteúdo no gabarito. Clique em OK para fechar a caixa de diálogo.

Incluindo Alguns Elementos no Gabarito em Branco

Agora que o gabarito foi criado, você precisa incluir alguns elementos no gabarito em branco.
  1. Comece excluindo o texto Colocar conteúdo aqui.
  2. Uma das formas mais fáceis de organizar a estrutura de um gabarito de página é utilizar uma tabela invisível. Desta forma, você pode especificar seções da página a serem utilizadas de maneiras diferentes e controlar a colocação de objetos na página.
    1. Na visualização Paleta, expanda a gaveta Tags HTML clicando nela.
    2. Arraste o componente Tabela da paleta para o gabarito em branco. O diálogo Inserir Tabela é aberto.
    3. Para este gabarito, você precisará de 3 filas e 1 coluna. Digite 3 no campo Filas e 1 no campo Colunas.
    4. Em seguida, clique em OK. A tabela é exibida em sua página de gabarito.
  3. A princípio, a tabela parecerá muito pequena. Você precisa editar os atributos da tabela para ajustar o tamanho e a estrutura dela.
    1. Clique com o botão direito do mouse na tabela e selecione Propriedades para abrir a visualização Propriedades.
    2. Na visualização Propriedades, clique na guia Tabela.
    3. No campo Alinhamento, selecione Centralizar. Isso centraliza a tabela na página.
    4. Você precisa aumentar o tamanho global da tabela para que a estrutura do gabarito se expanda dependendo do tamanho da tela na qual a página é exibida. Caso contrário, o design de suas páginas aparecerá em um tamanho fixo e poderá parecer muito grande em telas pequenas ou muito pequeno em telas grandes. Nos campos Largura da tabela e Altura da tabela, digite 90 e selecione o sinal de porcentagem (%).
    5. Como você não deseja que o contorno da tabela realmente apareça em suas páginas, também será necessário definir a Moldura para 0 pixels. O Page Designer exibe molduras de tabela invisíveis como linhas pontilhadas.
  4. Como você deseja que um banner na parte superior de cada página anunciando o nome e o visual do Web site vincule o site, será necessário formatar a área para ele nessa tabela de layout. Além disso, embora você provavelmente tenha um designer gráfico para criar uma imagem de logotipo ou banner para o site, é possível incluir texto como um marcador para o banner nesse gabarito.
    1. Selecione a célula superior na tabela.
    2. Quando essa célula é selecionada, especifique uma Altura de 70 pixels na guia TD na visualização Propriedades. Se você soubesse que estava criando um gabarito que precisasse acomodar um banner gráfico que seu designer gráfico estava criando, poderia especificar que essa célula tivesse o tamanho exato do banner gráfico.
    3. Na visualização Propriedades na guia TD, defina também a Cor para Cinza no menu de opções. Se você quisesse utilizar uma cor diferente, poderia utilizar a ferramenta conta-gotas para selecionar uma cor em qualquer lugar na tela ou poderia digitar o valor RGB (como #808080 para cinza) no campo.
    4. Clique em qualquer lugar na linha superior e digite Bem-vindo aos Classificados!
    5. Como o texto padrão é pequeno e difícil de ver, você precisa aumentar o tamanho da fonte. Selecione a frase inteira e clique em Formatar > Fonte.
    6. Para fornecer ao site uma aparência de jornal, selecione Courier como a Fonte. Selecione 6 como o Tamanho e selecione Branco como a Cor para realçar no fundo Cinza daquela célula.
    7. Em seguida, clique em OK.
    8. Para centralizar o texto do banner, selecione o texto novamente e clique em Formatar > Alinhar > Centralizar Horizontalmente.
  5. Para permitir aos usuários ir a várias páginas, você precisa de uma fila de links abaixo do banner. Você incluirá guias para navegação posteriormente, mas agora, formate a segunda fila para deixar espaço para os botões.
    1. Selecione a segunda célula na tabela.
    2. Defina essa célula para o mesmo tamanho da célula do banner digitando uma Altura de 70 pixels na visualização Propriedades na guia TD.
  6. A terceira fila é onde o conteúdo ficará localizado. Você precisa se assegurar de que o conteúdo se alinhará com a parte superior da fila.
    1. Selecione a terceira fila na tabela.
    2. Na visualização Propriedades na guia TD, selecione Parte Superior para o Alinhamento Vertical.

Incluindo uma Área de Conteúdo

Você precisa de uma área do gabarito onde as informações específicas de cada página possam ser exibidas, como os resultados da pesquisa na página filtered_records ou o formulário a ser preenchido em uma nova publicação na página new_record. Agora que você tem a estrutura comum e o esquema de cores definidos para o site, você está pronto para incluir uma área de conteúdo.
  1. Na visualização Paleta, clique na gaveta Gabarito de Página.
  2. Arraste um componente da Área de Conteúdo para a terceira fila. Este é o local onde as suas páginas individuais fornecerão conteúdo específico. O assistente Inserir Área de Conteúdo para Gabarito de Página é aberto.
  3. Você pode aceitar o Nome de área de conteúdo padrão de área principal clicando em OK. O nome da área de conteúdo permite especificar nomes diferentes para áreas de conteúdo diferentes para fins de organização. Por exemplo, se você estivesse projetando um site que sempre teria duas áreas de conteúdo em cada página, poderia nomear a área a ser preenchida com o conteúdo principal como área principal e a área a ser preenchida com os resultados da procura como área de procura. Isso também ajudará se você precisar aplicar seu gabarito de página a páginas que já existem, porque é possível designar áreas de páginas existentes através de tags de marcação para preencher áreas de conteúdo específicas do gabarito. A área de conteúdo é inserida na célula de tabela.
  4. Salve suas alterações no gabarito de página.

A sua estrutura de gabarito básica deve agora ficar semelhante a esta amostra:

Gabarito de página básico.

Você criou um gabarito de página com algumas áreas comuns e de conteúdo definidas para seu Web site. Você está pronto para começar o Exercício 1.5: Aplicando um Gabarito de Página ao Web Site.

Termos de Utilização | Feedback

(C) Copyright IBM Corporation 2000, 2005. Todos os Direitos Reservados.