Best Downloads
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

Trabalhando com templates/modelos

Ir para baixo

Trabalhando com templates/modelos Empty Trabalhando com templates/modelos

Mensagem por # Henrick- Qui Out 22, 2009 5:47 pm

Olá pessoal! Recebi vários e-mails com pedidos de
matéria sobre templates ou modelos. Resolvi então, fazer um especial
sobre esse tipo de função abordando os temas templates e Server-Side
Includes (SSI). Nesta primeira, veremos os templates.

Lembrando que abaixo, teremos também a explicação da rolagem com Layers.

. Templates ou modelos

Como o próprio nome já diz, templates são documentos que podem ser
usados como um modelo para outras páginas com o mesmo lay-out, ou seja,
é uma espécie de frame que não separa as páginas e sim as puxa de um só
documento.

. Criando um modelo

Melhor do que eu explicar com palavras é usar um exemplo prático. Então:

Criando o exemplo:

Antes da criação do modelo, precisamos definir o site, ou seja, a pasta
onde se encontram os documentos e isso será feito pelo MENU SITE >
NEW SITE. Veja nas figuras como configurar:

1º passo:

Na categoria Local Info:

. Item 1 - Dê um nome ao site;
. Item 2 - Selecione a pasta onde se encontram os arquivos.

2º passo:

Na categoria Remote Info:

. Item 1 - No campo Access, selecione Local/Network;
. Item 2 - Selecione a pasta onde se encontram os arquivos.

Pronto, você já tem o site definido. Agora vamos criar nosso exemplo.

Abra um novo arquivo no Dreamweaver. Faça uma tabela para a parte do
topo, outra para menor logo abaixo, uma para o meio e os menus e outra
para a barra de Copyright.

Vamos primeiro salvar o arquivo como template e depois configuraremos
as áreas editáveis. Salve por FILE > SAVE AS TEMPLATE. Na opção
"Site", escolha o site que você programou como no nosso exemplo. No
campo "Save As" digite o nome do arquivo.

Obs.: O Dreamweaver salva templates com a extensão .dwt sempre em uma
pasta "Templates" na raiz da pasta onde você definiu o site. Nunca
delete a pasta templates pois todo o modelo se encontra lá.

Com o arquivo salvo, vamos trabalhar nas áreas editáveis.

. O que são áreas editáveis?

São áreas que você define no modelo que poderão ser modificadas em cada HTML, ou seja, elas não ficam fixas em todas as páginas.

Abra o arquivo tudo.dwt do exemplo. Vamos definir 3 áreas editáveis.
Note que no nosso exemplo, as 3 áreas já estão definidas (veja a
indicação azul com o nome da área). Agora explicarei como fazer isso:

. 1ª área: Será na segunda tabela. Grife o texto "Texto para ser
trocado", vá no menu MODIFY > TEMPLATES > NEW EDITABLE REGION ou
pela shotcurt Ctrl+Alt+V. Uma nova janela abrirá. Digite o nome para
ela. No exemplo, o nome é "Barra";

. 2ª área: Será na terceira tabela no menu. Grife o texto "Acontece agora:" e pelo mesmo processo, dê o nome "Agora";

. 3ª área: Será na terceira tabela também, porém na coluna direita da
tabela. Grife o texto "oonono..." e dê o nome de template como "Corpo".

O Dreamweaver pré-estabelece uma área editável, que é o título da página.

Bom, com tudo isso pronto e salvo, temos o modelo finalizado. Agora vamos utilizar o modelo para gerar um arquivo HTML.

Com o Dreamweaver aberto, vá em FILE > NEW FROM TEMPLATE. Na janela
que abrirá, selecione o nome do site que você definiu e também o nome
do template abaixo. Uma nova página se abrirá com o modelo. Note que
agora, existe uma "borda" creme na tela indicando que você está usando
o template "Tudo".

Repare que o cursor do mouse muda quando você o passa sobre uma área
que não é editável, fica tipo com um símbolo de "Pare". Nas demarcações
azuis, você poderá editar porque elas foram previamente definidas como
zonas editáveis. Agora salve normalmente seu arquivo como html ou
htm... Ao abrir, você verá o lay-out perfeitamente, pois, ao gerar o
HTML, o Dreamweaver pega as informações do Modelo e as projeta no
arquivo .htm ou .html.

Obs.: Para criar links em um template, você deverá tomar um cuidado.
Não digite o nome do arquivo. Sempre o selecione pelo ícone indicador
de caminho de arquivo ao lado do campo "Link" (ícone da pasta).
Automaticamente o Dreamweaver fará as árvores corretamente utilizando
parâmetros como por exemplo "..\" para indicar o local.

. Modificando um modelo e aplicando à todos os HTMLs

Suponha que o ano mudou e você precisa mudar a barra de copyright para
o próximo ano. Isso gastaria um tempo imenso se fosse ser modificado
página por página. Mas você trabalhou com Modelos e poderá fazer essa
modificação apenas uma vez que o Dreamweaver se encarregará do resto.

Vamos ao exemplo:

Abra o template do nosso exemplo (tudo.dwt). Na tabela da barra de
copyright, modifique a data para 2003. Clique em salvar. Imediatamente,
uma nova janela abrirá com os nomes dos arquivos que utilizam o modelo.
Para selecionar mais de um, pressione "Shift" e clique nos nomes. Com o
arquivo correto selecionado, clique em "Update" e automaticamente, o
Dreamweaver modificará as páginas selecionadas. Se você modificou o
modelo mas não quer que as modificações sejam passadas à todas as
páginas, clique em "Don't Update".

Note que agora, os arquivos HTML estão com a barra de copyright atualizada...

Agora, você já sabe fazer um site a partir de um modelo. Na próxima
coluna, falaremos sobre as Server-Side Includes (SSI), uma outra forma
de simplificar a edição de um site.

Pedidos dos leitores

Finalmente, após vários pedidos, estamos abordando o tema "Rolagens com Layers".

Ela é feita por camadas que se escondem e também, a sua programação é feita em Javascript.

Finalizando, não se esqueçam de enviar pedidos, sugestões ou dúvidas pelo e-mail ou pelo fórum.
# Henrick-
# Henrick-
Administrador
Administrador

Mensagens : 88
Idade : 28
Localização : Arraial do cabo - RJ

Cash Cash : 598
Gold Gold : 1000
Reputação Reputação : 5

Alerta Alerta : 0%

Ir para o topo Ir para baixo

Ir para o topo


 
Permissões neste sub-fórum
Não podes responder a tópicos