Exercício 1.2: Projetando a Estrutura do Web Site

Mostre-me

Você deve concluir o Exercício 1.1: Criando um Projeto da Web antes de projetar a estrutura do Web site.

Uma coleta de páginas da Web compõe um Web site. Enquanto uma página da Web contém conteúdo real, como elementos HTML, imagens e links, um Web site é o design e a organização hierárquicos de como as páginas da Web se adaptam. Um Web site deve ter um objetivo de alto nível (por exemplo, fornecer uma área de coleta organizada para listagens classificadas) e cada página da Web pode servir um objetivo específico ao atender esse objetivo de alto nível (por exemplo, uma página que permite a procura através das listagens).

A melhor maneira de começar a projetar o Web site é considerar quais funções o site deve suportar para atingir o objetivo global. Para um Web site Classificado, você sabe que há várias funções que deseja que o site execute. Por exemplo, você deseja que os visitantes do site possam procurar as listagens, bem como visualizá-las todas de uma vez e deseja que eles possam criar e editar novas listagens.

Para criar um Web site que execute essas funções, planejaremos quatro páginas neste exercício e criaremos as páginas em si no próximo exercício.


  1. Na visualização Explorador de Projetos, expanda ClassifiedsTutorial.
  2. Dê um clique duplo em Navegação do Web Site na visualização Explorador de Projetos. O Web Site Designer é aberto para a visualização Navegação. Com essa ferramenta você pode incluir, excluir e rearranjar as páginas da Web que compõem o Web site.
  3. A princípio, não há nenhum ícone de página exibido na visualização Navegação. Normalmente, a primeira página que você considera ao planejar o Web site é a página superior ou a home page do site. Essa é a página onde os visitantes entram em seu Web site. Arraste o componente Nova Página a partir da visualização Paleta e solte-o na visualização Navegação. Um ícone de página é exibido com o título de navegação da página em foco.
  4. Esta página será a home page que exibe todos os anúncios no banco de dados. Digite Visualizar Todos os Classificados para o título de navegação da página. Depois você aprenderá como o título de navegação é utilizado como a etiqueta de página para propósitos de navegação do site.
  5. Para que os visitantes do site publiquem as suas próprias listagens, eles precisam de uma página para criar novas listagens. Inclua um segundo ícone de página arrastando o componente Nova Página para a visualização Navegação diretamente abaixo do ícone de página Visualizar Todos os Classificados
  6. Nomeie a nova página Publicar uma Listagem. Observe que o novo ícone de página é exibido abaixo do ícone de página Visualizar Todos os Classificados e conectado com uma linha. Isso significa que Publicar uma Listagem e Visualizar Todos os Classificados têm um relacionamento de pai-filho.
  7. Você precisa também de uma página na qual os visitantes possam editar ou excluir listagens existentes. Por exemplo, se um visitante tiver incluído uma listagem para uma bicicleta e a tiver publicado por um longo período de tempo sem resposta, o vendedor poderá desejar abaixar o preço pedido. Inclua outro ícone de página ao lado da página Publicar uma Listagem e nomeie-o Atualizar Listagem. Observe que esse novo ícone de página é um irmão de Publicar uma Listagem e outro filho de Visualizar Todos os Classificados.
  8. Em seguida, o Web site precisa de uma função de procura para que aqueles visitantes possam procurar entre as listagens existentes para localizar as que forem de interesse. Para incluir uma página para exibir os resultados da procura, coloque outro ícone de página ao lado da página Atualizar Listagem e nomeie-o Listagens Filtradas.
    Nota: Se você colocar acidentalmente uma página no local errado ou se desejar reordenar a estrutura da página, poderá arrastar os ícones de página a qualquer momento para rearranjar o site.
  9. Pressione Ctrl+S para salvar o design do site. A visualização Navegação deve ser semelhante a esta:
Navegação do Web Site para o projeto ClassifiedsTutorial.

Observe que há uma fila de ícones pequenos na parte inferior de cada ícone de página. O primeiro ícone, que ainda não está visível, representa arquivos reais associados ao ícone e aparecerá depois dos arquivos serem criados. Se você criar um arquivo JSP, o ícone será um diamante azul ); Se você criar um arquivo HTML, o ícone será um conjunto de colchetes ). O segundo () e terceiro ícones () são visíveis indicando que, por padrão, todas as páginas estão definidas para aparecerem na navegação e nos mapas do site respectivamente. O quarto ícone (), que ainda não está visível, será exibido quando você tiver associado um ícone de página a um arquivo real que não contém nenhuma navegação do Web site. O ícone (), que ainda não está visível na parte superior do ícone de página, representa a raiz de navegação. Você aprenderá mais sobre esses ícones e outras facetas do ícone de página serão exibidas conforme trabalha neste módulo.

Agora que criou a estrutura geral do Web site, você está pronto para começar o Exercício 1.3: Preenchendo o Web Site com Páginas da Web.

Termos de Utilização | Feedback

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