Como Fazer Um Cabeçalho De Borracha Para Um Site

Índice:

Como Fazer Um Cabeçalho De Borracha Para Um Site
Como Fazer Um Cabeçalho De Borracha Para Um Site

Vídeo: Como Fazer Um Cabeçalho De Borracha Para Um Site

Vídeo: Como Fazer Um Cabeçalho De Borracha Para Um Site
Vídeo: Como Fixar o Cabeçalho de uma Página com HTML, CSS e JavaScript 2024, Dezembro
Anonim

Ao criar um site na Internet, um dos pontos mais importantes que um desenvolvedor deve levar em consideração é sua funcionalidade, versatilidade e desempenho. Para que o site seja completo e corretamente exibido em qualquer navegador em computadores com uma ampla variedade de resoluções de tela, você pode criar um conveniente cabeçalho "emborrachado", composto por vários elementos gráficos.

Como fazer um cabeçalho de borracha para um site
Como fazer um cabeçalho de borracha para um site

Instruções

Passo 1

Na primeira etapa de criação de tal cabeçalho para um site, abra no Photoshop a imagem que você já preparou para postar na web e, a seguir, corte-a em pedaços usando a ferramenta Slice na barra de ferramentas. Corte o cabeçalho de forma que a parte central fique vazia, de modo que você termine com três elementos gráficos. Isso permitirá que o cabeçalho se estique para qualquer resolução de tela.

Passo 2

Depois de cortar o cabeçalho, salve-o otimizando os arquivos ao salvar para o formato da web (Salvar para a web). Defina o formato de arquivo desejado para salvar - por exemplo, gif, jpeg ou png. Para alterar cada fragmento da imagem, clique na opção Ferramenta Slice Select do menu e redimensione as imagens para que seu tamanho seja o menor possível com o mínimo de perda na qualidade de exibição visual da imagem na tela. Salve suas imagens editadas como html e imagens.

etapa 3

Depois que as imagens forem salvas, edite o código HTML abrindo o documento html salvo com o Bloco de Notas. No bloco de notas, apague todas as linhas de código desnecessárias. Deixe apenas as linhas necessárias - dados sobre a tabela na qual suas imagens estão inseridas:

Passo 4

Nessas linhas, em vez de yourimage.gif, o caminho para suas imagens com a largura e altura adequadas deve ser especificado.

Etapa 5

Para que a parte central da imagem se estique, espalhando as imagens extremas para os lados, escreva os atributos de código correspondentes nas linhas. Especifique seus próprios parâmetros de largura e altura no código.

Etapa 6

Faça upload das imagens de cabeçalho geradas para o diretório raiz do seu site e edite o código HTML com novos caminhos para as imagens de cabeçalho no servidor. Cole o código do cabeçalho entre as tags.

Recomendado: