Ao projetar sites, muitas vezes você precisa resolver uma questão fundamental: qual será o comportamento da página quando for aberta com diferentes resoluções de tela? Existem duas opções aqui - páginas de site "emborrachadas" ou estáticas. A primeira opção será discutida. Qualquer que seja sua preferência por layout, o princípio principal do design extensível é a escalabilidade relativa.
É necessário
- - conhecimento de HTML;
- - programa para edição de código html.
Instruções
Passo 1
Selecione o arquivo principal para o modelo do seu site, que refletirá a marcação principal. Pode ser o arquivo index.html ou index.php. Um dos melhores softwares de edição de modelo de site visual é o Macromedia Dreamweawer. A edição necessária será feita com base neste programa.
Abra o arquivo de modelo ou crie um novo pelo comando "Arquivo" - "Novo", categoria - "Página base" - "HTML" ou categoria "Página dinâmica" - "PHP". Aqui, consideramos o caso geral em que a estrutura do site é gravada exatamente em um dos dois arquivos.
Passo 2
Não é segredo que existem diferentes tipos de layout - em tabelas, em div-blocks e combinados (tabelas e blocos ao mesmo tempo). A tag html é responsável pelo layout da tabela
Especifique uma porcentagem (100%) para cada propriedade. Isso alcançará o efeito de esticar automaticamente as células da mesa em telas com qualquer geometria. Pode ser um monitor de 19 polegadas ou um smartphone - cada um deles reproduzirá corretamente o conteúdo.
etapa 3
Se você precisar especificar exatamente a correspondência entre as células da tabela, use o seguinte exemplo:
| … … o conteúdo da célula 1. … | … … o conteúdo da célula 2. … |
Aqui você verá que uma das células é especificada com uma largura de 30% de tudo o que é definido para a própria tabela. Um cálculo simples mostra que 100% -30% = 70% permanece para a segunda célula. Lembre-se de que, neste caso, uma das células da tabela não deve ter o atributo de largura definido. O navegador fará todos os cálculos por conta própria e expandirá corretamente a tabela com células. O conteúdo dentro das tabelas também será expandido e reduzido corretamente em diferentes telas.
Passo 4
Em uma situação com um layout div, os blocos de tags são esticados por padrão para a largura total da tela e seguem um após o outro da esquerda para a direita, de cima para baixo. Para refinar sua geometria, crie uma classe CCS ou identificador (ID), no qual você especifica, por exemplo, os atributos e / ou para a categoria de tamanho e posição da caixa (Box). Não se esqueça de vincular o estilo especificado ao arquivo de marcação do site e vincular a classe (ID) à tag desejada. Normalmente, é colocado no início do script, definindo toda a geometria futura do site:
… … conteúdo do site. …
Ou assim:
… … conteúdo do site. …
O código para a regra CSS será o seguinte:
… minha classe {
largura: 30%;
altura: 50%;
}
#minha identidade {
largura: 30%;
altura: 50%;
}
