Como usar um modelo de design baixado

Um modelo de design baixado é uma ótima maneira de diminuir a criação de um novo site. Com um modelo, você não precisa se angustiar com o design, pois ele foi feito para você. Até os gráficos estão incluídos. No entanto, você precisará personalizá-lo para atender às necessidades do seu site. Isso requer um programa de edição na web, de preferência um com vista para o layout do layout, como o Adobe Dreamweaver e programas de edição de design, como o Adobe Photoshop e o Adobe Fireworks, que podem ler arquivos PNG e PSD e exportar Arquivos JPG e GIF.

Personalizar o arquivo HTML

Encontre os arquivos incluídos no modelo de design baixado. Estes serão uma mistura de arquivos HTML, CSS e gráficos. Alguns gráficos serão rotulados como “editáveis”, o que significa que eles são o que o designer acha que você deseja personalizar para o seu site, como o cabeçalho. Outros gráficos que você provavelmente não precisa editar são os espaçadores, as barras na parte inferior que mantêm o design unido.

Faça uma cópia da pasta que contém os arquivos de modelo. Dessa forma, você pode editar um grupo de arquivos e manter os originais em outro local, caso deseje usá-los novamente.

Execute o programa de edição na web e abra o arquivo de modelo marcado de maneira semelhante ao index.html. Essa deve ser a página inicial do modelo.

Navegue pelo modelo na sua ferramenta de edição na web e encontre as áreas que deseja personalizar. Clique nas imagens para saber o nome dos arquivos e localizá-los no modelo para editá-los. Preste atenção também às dimensões das imagens (altura e largura). Ao personalizar os gráficos do modelo, verifique se os novos arquivos têm as mesmas medidas que os originais, caso contrário você distorcerá o layout.

Edite as áreas de texto do modelo e adicione o novo conteúdo.

Remova qualquer parte do modelo que você não deseja, mas lembre-se de que alguns modelos que usam tabelas à sua disposição podem ter gráficos ou textos em determinados locais para manter a largura de uma coluna de uma determinada medida. Se você remover esses itens, a coluna poderá encolher, distorcendo a montagem. Substitua-o por um gráfico ou texto de tamanho igual para manter a largura da coluna.

Use o comando Salvar na sua ferramenta de edição na web para salvar suas alterações e saia da ferramenta de edição na web.

Personalizar arquivos gráficos

Execute a ferramenta de edição de gráficos e abra os arquivos que deseja personalizar. Os que você já viu no arquivo HTML provavelmente têm uma extensão JPG ou GIF, que são arquivos compactados otimizados para a web. Os arquivos que você deseja editar são os arquivos “originais” das versões compactadas. Eles devem estar em PNG ou PSD ou em um formato diferente de JPG ou GIF e provavelmente estão armazenados em uma pasta separada dentro da pasta do modelo.

Use as ferramentas de edição no seu programa gráfico para alterar os arquivos como deseja que sejam vistos na sua página da web e salve as alterações.

Exporte os arquivos gráficos editados nos formatos JPG ou GIF que correspondem ao formato dos arquivos que você está substituindo no modelo e coloque-os na mesma pasta que o arquivo HTML que você salvou na parte um. Não altere os nomes dos arquivos, caso contrário, as referências no HTML serão modificadas. Seu programa gráfico apenas notificará que o arquivo exportado está substituindo um arquivo existente e é isso que você deseja.

Abra o arquivo de índice HTML novamente na sua ferramenta de edição da web para ver como são os gráficos atualizados e fazer os ajustes necessários.

Referências

 

Você pode estar interessado:

Deixe um comentário