Como fazer minha página da web caber em qualquer tamanho de tela no FrontPage

Escrito por craig witt | Traduzido por ellen zanelato
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer minha página da web caber em qualquer tamanho de tela no FrontPage
Páginas web (http image by Yuriy Panyukov from Fotolia.com)

A maioria dos sites da web exibem seu conteúdo utilizando tamanhos fixos. Há muitos benefícios nessa prática, e a mais notável é que ao definir o tamanho exato, os designers e desenvolvedores conseguem definir o layout com precisão absoluta, o que é preferido por muitos profissionais, mas essa solução não é sempre a melhor. Alguns desenvolvedores, porém, podem preferir que suas páginas tenham seu layout baseado em proporções da página, não importando o tamanho da tela do dispositivo. Você pode facilmente usar este segundo método no FrontPage.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

O que você precisa?

  • Código CSS

Lista completaMinimizar

Instruções

  1. 1

    Abra sua página. Após iniciar o FrontPage, selecione "Arquivo" na barra de menu superior, e então clique em "Abrir". Encontre a página que você quer editar, então clique duas vezes em seu ícone para abri-la.

    Como fazer minha página da web caber em qualquer tamanho de tela no FrontPage
    Internet (@ sign image by Eisenhans from Fotolia.com)
  2. 2

    Dê aos elementos externos da página tamanhos relativos, e não absolutos. Muitos criadores de sites dão às definições de layout como <div> e <table> uma largura específica, como 960 pixels. Infelizmente, este método não permite que os objetos mudem de tamanho quando a tela do navegador cresce ou encolhe; a largura fica sempre fixada em 960 pixels. Por um pixel ter o mesmo tamanho em qualquer tela, esta unidade de medida é considerada um valor absoluto.

    O oposto de um valor absoluto é um valor relativo. Os elementos que usam valores relativos são exibidos de forma diferente dependendo do tamanho da tela na qual estão sendo visualizados; seu tamanho é relativo à tela. Em vez de ter uma largura de 960 pixels, uma definição de layout de tamanho relativo pode ter uma largura de 90%, o que faz com que sempre tome 90% da largura de uma dada tela, esta sendo bem ampla ou muito estreita.

    Para este exemplo, suponha que seu site seja baseado em tabelas. Atualmente, a tabela possui 960 pixels de largura. A coluna esquerda tem largura de 630 pixels e a coluna direita, 330. Para passar a tabela de um tamanho absoluto para um tamanho relativo de, digamos, 80%, clique com o botão direito em uma área vazia da tabela e selecione "Propriedades da Tabela". Na caixa de diálogo, encontre a seção de Layout e então ache o quadro de seleção "Largura Específica". No campo abaixo do quadro de seleção, digite o valor de 80. Então clique no botão "%" à direita.

    Como fazer minha página da web caber em qualquer tamanho de tela no FrontPage
    Web (Web Sign image by wayne ruston from Fotolia.com)
  3. 3

    Dê tamanhos relativos aos elementos internos. Lembre-se que anteriormente no exemplo, a tabela possuía larguras declaradas de 630 e 330 pixels em suas colunas. Para uma tabela com tamanho relativo de verdade, você também precisa ajustar estes valores. Clique com o botão direito do mouse na célula esquerda, e selecione "Propriedades da Célula" e modifique o valor de 630 pixels para 66%. Faça o mesmo com a célula direita, modificando o valor de 330 pixels para 34 %. (Note que as duas porcentagens devem somar 100).

    Agora, você tem um layout de tabela com tamanho relativo. Repita este processo para todas as definições de layout <table> ou <div> da sua página para assegurar que cada uma apareça do tamanho desejado..

    Como fazer minha página da web caber em qualquer tamanho de tela no FrontPage
    World Wide Web (web puzzle image by João Freitas from Fotolia.com)
  4. 4

    Visualize as mudanças no seu navegador. Após fazer as mudanças, selecione "Arquivo" no topo da barra de menu e então clique em "Salvar". Abra a página que você acabou de modificar no seu navegador. Note que quando você muda o tamanho da janela, o tamanho da sua página muda também. Seu layout de tamanho relativo agora caberá na tela de qualquer navegador.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível