| Neste
artigo, vou mostrar passo a passo, como transformar um
dos modelos
disponíveis para download no Blog em um
mini site completo. Já venho disponibilizando templates
grátis no Blog há algum tempo. Agora é o momento de
mostrar como transformá-los em um mini site funcional. |
|
Passo 1:
Selecionar o Template
O primeiro passo é selecionar um template que seja mais
adequado ao tema do seu mini site. Para este projeto,
selecionei o template No. 139 que está disponível no
link "Modelos
de Sites: Mais 30 Downloads Grátis".
|
|
Página
original do template No. 139 que foi usado como base
para a criação do mini site deste projeto. Repare que
foi possível gerar o mini site com poucas alterações.
O menu com o texto "YOUR LINK" foi
substituído pelos links necessários ao projeto:
Principal, Pedido e Contato. As imagens também foram
alteradas para as necessidades do mini site inserindo
Logo, slogam e URL. |
Passo 2: Selecionar o Editor HMTL
Agora você precisa selecionar e instalar o editor html que será utilizado para a criação do mini site completo a partir de um template. Na
Central de
Downloads, você encontra algumas boas opções para este projeto, como o
Trellian WebPage e o MS Express.
|
|
Quer um mini
site pronto entregando dinheiro diretamente
em sua conta PagSeguro?
O único sistema * pronto
para uso * que envia dinheiro diretamente para
sua conta no PagSeguro, onde sua única preocupação
será contabilizar os lucros!
http://www.jm-digital.com.br/afiliados |
Passo 3: Editar as Imagens
Os templates normalmente possuem algumas imagens como logo e url do site que precisam ser editadas. De forma bem básica, utilizei o próprio Paint do Windows, mas se você tiver um editor gráfico melhor, é
aconselhável utilizá-lo. Pois a qualidade do texto gerado no Paint não é muito boa.
Abaixo, os
gráficos que foram alterados com o Paint do Windows para o
mini site.
domain.gif
domain1.gif
slogan.gif
slogan1.gif
logoblank.gif
logo.gif
Passo 4: Editar as
Páginas HTML
Agora que as imagens já foram adaptadas às necessidades, o
próximo passo é editar as páginas html, alterando o menu,
substituindo as imagens alteradas e inserindo o conteúdo.
Primeiro você deve alterar a página principal, e depois a
partir dela gerar as outras páginas necessárias para o seu
mini site.
Dica:
Ao alterar os arquivos de imagens originais com o conteúdo do
seu mini site, salve-os com o mesmo nome. Assim não será
necessário alterar no arquivo html o nome da imagem
origem. Eu gravei as imagens com outro nome apenas para
ficar mais fácil de exemplificar.
Para este
projeto, teremos 3 páginas para o nosso mini site:
Página
Principal (default.htm)
Página
de Pedido (pedido.htm)
Página
de Contato (contato.htm).
Passo 5:
Detalhes Mais Técnicos
As páginas de pedido e página
de contato exigem um conhecimento mais
técnico para a realização do trabalho. Para o seu primeiro
projeto, sugiro utilizar como base uma página que já
funciona e analisar o seu código. Você tem vários exemplos
aqui mesmo no BLOG e no Site JM DIGITAL. Basta exibir o
código fonte com o botão direito do mouse pelo seu Browser.
Para a
integração do Site com um Sistema de Pagamento seguro,
sugiro a leitura do Artigo Como
Inserir um Sistema de Pagamento Seguro no Site
Para a página de
contato será necessário inserir um formulário "<FORM"
pelo seu editor html e depois, dentro do formulário vamos
inserir os campos: Nome, email e mensagem, conforme código
abaixo:
As partes em
vermelho indicam o início e o final do formulário de
contato.
<form method="POST" action="contato.php">
<p align="center">
<font face="Arial" size="2">Seu Nome
</font><br>
<input type="text" name="name" size="62"><br>
<b><br>
</b><font face="Arial" size="2">Seu E-mail
</font><br>
<input type="text" name="email" size="62"><br>
<br>
<font face="Arial" size="2">Sua Mensagem
</font><br>
<textarea rows="6" name="comments" cols="53">
</textarea></p>
<p align="center">
<input type="image" src="img/enviar.gif"
name="submit"
type="submit"
value="Enviar Mensagem"></p>
</form> |
Ou você pode
utilizar este código padrão para inserir diretamente no
código html.
Como você pode
ver pelas imagens e links, temos um mini site completo e
funcional, onde pode-se realmente comprar um infoproduto e
realizar contatos com o webmaster para tirar dúvidas ou
receber maiores esclarecimentos sobre o produto.
Dica:
Não se engane com esta aparente facilidade. Isso não exclui
todo o planejamento de funcionalidades e conteúdo que você
deve fazer antes de iniciar o seu projeto.
Abaixo, segue o link para o Mini Site e Link para download com
os arquivos completos do projeto.
Mini Site: http://www.jm-digital.com.br/mini-site-completo
Arquivos do
Projeto: Download
Recomendo a
Leitura dos Artigos Complementares:
Conclusão
Com um pouco de imaginação, você pode utilizar
os templates grátis para praticamente qualquer projeto de
mini site. Continue seguindo o Blog JM DIGITAL e aproveite
para assinar a nossa NewsLetter
para receber artigos como este pelo seu e-mail.
Gostou ? Não
Gostou ? Comente
!
Mais
Templates de Sites Grátis para Download
Um grande abraço a todos !
Artigos
Recentes | Mais
Visitados | Indique
e Ganhe | RSS
Feeds
-
|
