Como Adaptar O Template

Índice:

Como Adaptar O Template
Como Adaptar O Template

Vídeo: Como Adaptar O Template

Vídeo: Como Adaptar O Template
Vídeo: Como ADAPTAR UM TEMPLATE DE FEED (Post) para TAMANHO DE STORIES no Photoshop | WP Designer 2024, Dezembro
Anonim

A maneira mais fácil para um iniciante criar um site é usando um modelo padrão. A singularidade do recurso pode ser alcançada por meio de uma série de mudanças cosméticas e organizacionais no design padrão.

Como adaptar o template
Como adaptar o template

Necessário

  • - modelo de site;
  • - Programa Photoshop;
  • - extensão para o navegador FireBug;
  • - Editor Notepad ++.

Instruções

Passo 1

Encontre um modelo de site adequado para você na Internet. Explore os modelos propostos, prestando atenção à sua adaptabilidade ao tamanho do monitor, às especificidades da disposição das colunas e dos menus. Baixe a opção selecionada. Verifique seu desempenho fazendo upload de arquivos para a raiz do site que está sendo criado. Se o modelo contém erros que vêm à tona no trabalho, é melhor encontrar outra opção.

Passo 2

Modifique a maioria das imagens no modelo. Substitua cada imagem da seguinte maneira. Inicie o Photoshop e abra um dos arquivos gráficos de modelo nele. Procure no menu "Imagem" na coluna "Tamanho" os parâmetros da imagem. Abra uma nova folha com as mesmas dimensões e crie a imagem que você precisa nela. Salve o resultado na pasta de modelos com o nome do arquivo gráfico a ser substituído. Portanto, é necessário substituir todas as imagens significativas.

etapa 3

Altere o restante dos parâmetros usando tabelas em cascata style.css, uma linguagem de programação formal que descreve a aparência de um documento. É mais conveniente fazer essas alterações por meio do painel de administração e é melhor ver os resultados na hospedagem local para não fazer upload de todas as atualizações para o servidor.

Passo 4

Baixe e instale a extensão FireBug gratuita para o seu navegador. Um ícone com um bug amarelo deve aparecer no canto superior direito da janela do navegador. Clique no ícone e pressione F12. O código da página recolhida aparece na parte inferior da tela. Ele pode ser expandido passando o mouse sobre os sinais de mais. Ao clicar na linha de um elemento, você pode ver como ele está destacado na parte superior da tela. À direita da janela com o código existem estilos que indicam as linhas responsáveis pelo aparecimento da página.

Etapa 5

Abra o modelo no editor Notepad ++. Use o FireBug para encontrar os parâmetros a serem alterados e edite-os no Notepad ++.

Etapa 6

Salve o resultado e carregue o site criado para o servidor.

Recomendado: