sexta-feira, 9 de novembro de 2007

Usando Templates no Dreamweaver

Bem galera, vou abordar um tema que é muito útil para qualquer desenvolvimento de site.

Primeiramente, porque usar templates???
Bem é muito simples, imagine um Site na seguinte estrutura, 5 páginas, sendo uma home e 4 páginas de conteúdo, o layout do site é o seguinte:


Quando o site está protinho vem o cliente e fala assim "Tem como você colocar mais uma página.", ai você fala que sim, com raiva do cliente que não tinha te avisado dessa página antes, e parte para fazer a alteração, como proceder? Salva uma das páginas e altera o layout, dai passa página por página mudando o menu página por página. Bem convenhamos que isso não é muito produtivo né???? imagine o tempo que você vai gastar para fazer uma alteração que parece ser simples??? Qual a solução para isso???

Templates

1 - Primeiro vamos criara um site dentro do Dreamweaver.

Abra o dreamweaver vai no menu Site, New site.


Vai abrir a tela como abaixo, no nome do site coloque TesteTemplate e vá para o próximo passo


Como nós vamos montar um site em HTML mesmo selecione "Não, eu não quero usar nenhuma..." e avance



Aqui você vai colocar o caminho do site no seu computador, por exemplo em c:\testeTemplate e avance



Essa tela é para configuração do servidor, selecione "None" e avance e ná póxima tela conclua.
Perfeito, criamos um SITE de gerenciamento dentro do dreamweaver

2 - Agora vamos começar a criar o template das páginas na estrutura da primeira imagem que está nesse tutorial.

No menu File, New, selecione Blank Template, no Tipo selecione HTML


Criou uma página comum, nela vamos adicionar uma tabela de 2 linhas e uma coluna, vá no Menu Insert, Table em Rows coloque 2 e Columns 1

Criado a tabela quebre a segunda linha em duas colunas, posicione o cursor dentro da segunda linha, vé em Modify, Table, Split Cell, na tela que se abrir selecione Columns e Digite na caixa de texto 2

Monte como na imagem abaixo, deixando a parte de cima como Faixa, o meio como conteudo e na lateral esquerda crie 3 link, um com o endereço pagina1.html outro com o endereço pagina2.html e o último como pagina3.html
Agora vamos inserir as partes editáveis no tamplate, normalmente o que muda na página é apenas o título e conteúdo, então vamos inserir duas parte editáveis uma para o título e outra para o conteúdo.
Posicione o cursor do mouse no local da tabela que você deixou para o conteúdo, vai em Insert, Templates Objects, Editable Region, coloque o nome de edtTitulo, insira outro Editable Region abaixo do título com o nome de edtConteudo. Deve ficar como a imagem abaixo
Salve o template com o nome de padrao


Com o template criado vamos criar as páginas com base nesse template.


Vá em File, New selecione Page from template, selecione o Site TesteTemplate, selecione o padrao.


Quando você confirmar irá criar uma página igual ao template que você tinha criado anteriormente, qual a diferença??? Se reparar você só consegue alterar os campos que você escolheu, no caso o edtTitulo e o edtConteudo, se tentar mover/excluir/alterar qualquer outro elemento da página ele não deixa. Altere o Título para Página 1 e o conteúdo também, salve à como pagina1.html

Crie mais duas página seguindo esse mesmo processo, salve uma como pagina2.html e a outra como pagina3.html.

Certo, agora vamos abrir a página no browser e verifique se está funcionando direitinho.

Agora vamos fazer o seguinte vamos adicionar um novo link para uma nova página.

Então vá ao dreamweaver novamente, certifique-se que você está no site correto (TesteTemplate), File, New, Page from template, selecione o TesteTemplate, selecione padrao e confirme. Modifique o Título para Página 4 e altere o conteúdo, salve ela como pagina4.html.



Feito a página 4 vamos agora colocar o link para a página 4, abra o template padrao e adicione o link para a página4.html


Quando você mandar salvar ele vai perguntar se você quer alterar as página, confirme.

Navege pelo site novamente, você vai perceber que ele já criou os links em todas as página, poupando você ter que entrar página por página para incluir o link.
Terminado o exemplo, agora é só brincar com o template alterando cores, etc.
Espero ter ajudado.