Alguem Pode Me Ajudar A Montar Um Site...

como criar um bom layout de página da Web através do exame dos elementos da página e da organização deles no Microsoft FrontPage.
Suponhamos que você tenha um quebra-cabeça para montar, mas que seja totalmente diferente de qualquer outro que já tenha montado. Você decide o tamanho das peças, o tipo de encaixe e até mesmo a aparência da imagem pronta. Uma página da Web é um quebra-cabeça desse tipo.
Embora haja várias maneiras de vencer o desafio do layout da página da Web, algumas combinações funcionam melhor que outras. A ferramenta de criação e gerenciamento de site do Microsoft FrontPage pode ajudá-lo a criar o site da escola, as páginas da intranet ou qualquer ferramenta baseada na Web.
As peças do quebra-cabeça
A maioria das páginas do site terá apenas um modelo de layout, com exceção, talvez, da home page e das páginas de conteúdo especial. Normalmente, o quebra-cabeça do layout inclui cinco peças principais. Esses componentes são tão comuns que o FrontPage possui recursos para trabalhar com as peças (bordas compartilhadas, páginas incluídas e barras de links) e ferramentas para uni-las (tabelas e quadros).
Abaixo há um exemplo de um layout comum que funciona bem para muitos sites. Talvez você fique tentado a ser mais criativo e exclusivo, mas lembre-se de que seu site normalmente é apenas parte da sessão de um visitante. A menos que você tenha uma razão irrefutável para criar um layout bastante incomum, seus visitantes agradecerão por seguir os padrões. (Dica: torne seus elementos gráficos criativos e exclusivos, em vez do layout!)

Figura 1: Os elementos de layout de um site comum
1. Identificador do site
Todas as páginas devem permitir aos visitantes saber que estão em seu site. A home page é particularmente importante, portanto, você pode exibir nela o logotipo da escola, o nome ou outros elementos gráficos com mais destaque. Normalmente, o identificador do site apresenta-se bem como uma faixa na parte superior. Preste atenção na altura dessa área. Se estiver muito alta, o conteúdo começará muito baixo na tela.
2. Barra de navegação
O objetivo da barra de navegação é ajudar os visitantes a localizar conteúdo. Portanto, sua estrutura de navegação deve ser determinada basicamente pela hierarquia de informações do site. Espero que você tenha organizado suas informações de forma lógica antes de tentar exibir o layout.
Assim que você identificar sua estrutura de navegação, poderá encontrar o melhor lugar para ela. A opção está basicamente entre as barras de navegação superior e lateral ou, possivelmente, ambas.
Vantagens de uma barra de navegação superior:
• Pode ser vista facilmente
• Deixa a tela toda para o conteúdo
• Pode ser unida ao identificador do site
Vantagens de uma barra de navegação lateral:
• Oferece suporte para o número de itens de navegação necessário
• Permite descrições mais longas do item
• Pode integrar várias camadas de navegação à medida que os visitantes se aprofundem na pesquisa no site
Sites maiores talvez precisem usar a barra de navegação superior e a lateral. Por exemplo, o site da cidade da escola pode conter links para o site de cada escola em uma barra de navegação superior e informações sobre a cidade na barra lateral.
3. Conteúdo principal
A área de conteúdo principal, como título da página, cabeçalhos, texto e imagens, é o que realmente os visitantes desejam ver. Não esqueça de dar a essa área a atenção merecida, em vez de montar as outras áreas e deixar o espaço restante para o conteúdo.
Duas preocupações em relação ao conteúdo são leitura fácil e flexibilidade. A leitura é mais fácil quando qualquer coluna de conteúdo tem entre 100 e 600 pixels. Basicamente, os visitantes não se sentem à vontade ao ler linhas excessivamente pequenas ou grandes. Portanto, uma área de conteúdo com um total de 350 a 600 pixels permite opções de modelo flexíveis, como layouts com uma, duas ou três colunas.
4. Conteúdo secundário
Em sites comerciais, uma área de conteúdo secundário é usada normalmente para anúncios. Os sites de escolas costumam usar esse tipo de área para comunicados, notícias ou links relacionados. Se o seu site contiver muitas informações, talvez seja interessante separar algum espaço no layout para disponibilizar mais conteúdo. No entanto, se o site não precisar, deixe o espaço para o conteúdo principal.
5. Conteúdo sobre o conteúdo
Informações sobre o conteúdo da página incluem direitos autorais, data da última atualização, links de segurança/privacidade e pessoa responsável pelo conteúdo. Essas informações, embora necessárias, não serão importantes para a maioria dos visitantes. Normalmente, um pequeno rodapé é o melhor lugar para colocá-las. Use uma fonte pequena para isso.
Unindo tudo com tabelas
Então, você escolheu o layout perfeito para o seu site. Agora, é hora de torná-lo realidade. A maneira mais comum de implementar um layout de página da Web é usando tabelas.
As tabelas de página da Web consistem em linhas, colunas e células individuais, exatamente como uma planilha. No entanto, as tabelas de página da Web normalmente não têm um layout estritamente tabular, pois têm células espalhadas por várias linhas ou várias colunas. Por exemplo, a primeira linha da Figura 1 ocupa duas colunas e a coluna esquerda ocupa duas linhas. Pode parecer complicado, mas a experiência com tabelas no FrontPage vai ajudá-lo a compreender.
O FrontPage oferece várias ferramentas para criar tabelas e trabalhar com elas. Comece usando a barra de ferramentas de desenho para criar um layout de página inteira, como mostra a Figura 1. Você vai querer omitir a caixa número 4, a qual seria mais adequada como uma outra tabela.
Para criar um novo layout de página inteira usando a barra de ferramentas de desenho
1. No menu Tabela, clique em Desenhar Tabela. A barra de ferramentas Tabelas é aberta com a opção Desenhar Tabela selecionada.
2. Na sua página, desenhe a borda externa da tabela arrastando do canto superior esquerdo para o canto inferior direito da tabela.
3. Para criar as células, desenhe linhas verticais e horizontais na tabela.
Para ajustar as propriedades da tabela
1. Clique com o botão direito do mouse na tabela e clique em Propriedades da Tabela.
2. Especifique o tamanho da tabela, como um número fixo de pixels ou como uma porcentagem da janela do navegador.
3. Defina o enchimento e os pixels de espaçamento das células para criar espaços ao redor das células da tabela.
4. Para uma tabela de layout de página inteira, defina as bordas como 0.
Eis aqui algumas dicas de como usar tabelas:
• Dividir tabelas. Quando uma página da Web é carregada, a tabela é carregada na ordem em que aparece no código. Uma tabela grande e complexa pode demorar bastante para mostrar seu conteúdo. Normalmente, o ideal é dividir uma tabela de página inteira em tabelas superior, intermediária e inferior. Assim, o visitante verá o nome e o logotipo da escola enquanto o conteúdo está sendo carregado (em vez de apenas uma página em branco).
• Aninhar tabelas. As tabelas podem ser "aninhadas" umas nas outras, embora não seja bom fazer isso muitas vezes, pois deixará mais lento o carregamento da página. Um bom exemplo de tabela aninhada é a caixa número 4 da Figura 1.
• Deixar espaço em branco ao redor das colunas do texto. Muitas vezes, é melhor definir como 0 as propriedades de espaçamento e enchimento das células da tabela de layout principal para que não haja falhas entre as peças do quebra-cabeça. No entanto, normalmente você deseja algum espaço ao redor do texto para que não se misture aos outros elementos. Para isso, use colunas de espaço em branco (consulte a Figura 2), as quais você pode desenhar como células da tabela, como fez anteriormente.

Figura 2: Espaço em branco (indicado em vermelho) ao redor do texto facilita a leitura.
• Ajustar o alinhamento. Teste o alinhamento de cada célula da tabela até obter o espaçamento vertical desejado. Geralmente, você vai querer escolher o alinhamento superior nas propriedades de cada célula. Se o conteúdo estiver muito próximo da parte superior, adicione um pouco de espaço manualmente. Pressionar ENTER para um novo parágrafo normalmente faz a mágica.
Enquadrando o quebra-cabeça
Os quadros são outra maneira de criar um layout de página da Web, mas não têm uma boa reputação. Os quadros não podem ser facilmente marcados com indicadores nem indexados por mecanismos de pesquisa e podem ser bastante confusos para os visitantes. Por essas razões, provavelmente não são apropriados para o site de sua escola.
No entanto, os quadros podem tornar a navegação mais fácil para alguns sites da intranet e para ferramentas baseadas na Web. Por exemplo, digamos que você esteja criando uma ferramenta baseada na Web para administrar um banco de dados de informações de contato do corpo docente. Talvez seja conveniente criar um quadro para as ações do banco de dados (Adicionar, Editar e Excluir um membro do corpo docente) e outro no qual as informações serão exibidas. O quadro de ações do banco de dados teria que ser carregado apenas uma vez, enquanto o quadro de informações seria atualizado a cada ação. Uma tabela, por outro lado, teria que recarregar ambas as seções a cada clique.
Conclusão
Uma página da Web pode parecer um quebra-cabeça, mas manter o layout simples e padrão ajudará os visitantes do site a encontrar o que procuram. Vou ver se consigo uma página com detalhes.
Espero tê-lo ajudado, tudo de bom!

#1 gui18

#2 Luis Otávio

#3 gui18

#4 Luis Otávio

#5 gui18

#6 Luis Otávio

#7 gui18

#8 Rafael_Vieira

#9 gui18

#10 Maremar

#11 Camarão

0 user(s) are reading this topic