Como usar modelos no Dreamweaver
Autor:Eve Cole
Data da Última Atualização:2009-05-30 18:50:16
Existe uma função muito poderosa na ferramenta de web design Dreamweaver (doravante denominada DW, a versão mais recente atual é 4.02, o exemplo neste artigo é a versão 4.0), que são os modelos!
Então, qual é o charme dos modelos? Quais características ele possui?
Usando templates, podemos solidificar elementos que aparecem em todas as páginas do site.
Ao utilizar templates para criar páginas WEB, todo o site pode ter um estilo unificado.
Desde que o modelo seja modificado, todas as páginas WEB às quais o modelo é aplicado podem ser modificadas sem a necessidade de modificar manualmente cada página. Por exemplo, quando você precisa alterar seus direitos autorais, você precisa modificar os direitos autorais página por página? E se houver milhares de páginas? Acredito que você terá dois ou três anos no início. Mas se você usar modelos, isso não será um problema.
Abaixo está um exemplo mais abrangente que pode ajudá-lo rapidamente a dominar o uso de modelos.
1. Editar página
Abra o DW e crie um novo site, que chamaremos de “Spider Web”.
Crie uma nova página em branco como uma página interna (geralmente um site tem apenas uma página inicial, então não precisamos fazer um modelo para a página inicial) e nomeie-a como body.htm.
Edite esta página e complete-a conforme mostrado na Figura 1.
Figura 1, página body.htm após a conclusão da edição. Preste atenção ao ponto A, que será utilizado como área editável e será mencionado a seguir.
2. Gerar modelo
Após a conclusão da edição, salvamos esta página como um modelo (observe que ela não é salva como uma página da web htm comum). Você pode salvá-lo como modelo através de FileàSave As Template no DW. Após executar este comando, a janela Salvar como modelo aparecerá, conforme mostrado na Figura 2.
Figura 2, janela Salvar como modelo.
Na Figura 2, B é a seleção do site, selecionamos "Spider Web", C é o nome do arquivo de modelo que queremos salvar, preenchemos o corpo. Pressione Salvar no canto superior direito para salvar.
Neste momento, pressionamos F8 para acessar o site (gerenciador do site), e você pode ver body.dwt na pasta Templates (quando houver um arquivo de modelo, o DW irá gerar automaticamente a pasta Templates, e dwt é o tipo de modelo arquivo)
3. Editar modelo
Ao abrir o arquivo de modelo body.dwt no Site, você descobrirá que ele não parece ser diferente da página body.htm, mas na verdade é diferente. Você não pode adicionar áreas editáveis em body.htm. As áreas editáveis só podem ser adicionadas em arquivos de modelo.
Para que todos entendam melhor a "área editável", primeiro usamos este modelo para gerar um arquivo html: clique em ArquivoàNovo do modelo, a janela Selecionar modelo aparecerá, selecione o corpo nos modelos e clique em Selecionar na parte superior canto direito para gerar um novo arquivo htm. Renomeamos esta nova página como body2.htm. Agora usamos DW para abrir os arquivos body.htm e body2.htm e comparar as diferenças. Você encontrará as palavras "Template:body" escritas no canto superior direito da página body2.htm. (Esta página é gerada a partir do arquivo de modelo body.dwt) Ao mesmo tempo, você ficará surpreso ao descobrir que o arquivo body2.htm não pode ser editado (body.htm pode ser editado). Aliás, isso ocorre porque a “área editável” não está definida no arquivo de modelo body.dwt, tornando as páginas geradas não editáveis. Portanto, temos que adicionar uma área editável no arquivo de modelo. Aqui estão as etapas para adicionar uma região editável:
1) Abra o arquivo de modelo body.dwt Esperamos que a tabela do meio possa ser editada (ou seja, A na Figura 1). Mas no arquivo body.dwt, não body.htm), então adicione a área editável aqui.
2) Posicione o cursor do mouse na tabela em A, clique com o botão direito do mouse e selecione Nova Região Editável.... A janela Nova Região Editável irá aparecer, solicitando que você preencha o nome desta região editável (normalmente chame-a de marca de região editável). Preenchemos Region01 e clicamos em OK para fechar esta janela e concluir a edição da marca da região editável atual. Neste momento, você pode ver a exibição na tabela conforme mostrado na Figura 3.
Figura 3, janela Nova região editável.
Observe que há uma região editável marcada como Region01.
Até agora definimos uma área editável. Se houver várias áreas de edição, podemos fazer o mesmo.
※Você também pode gerar uma nova região editável através de ModificaràTemplatesàNova Região Editável… Se quiser excluir a região editável, você pode usar ModificaràTemplatesàRemover Região Editável… e seguir as instruções.
4. Gere páginas usando modelos
Na verdade, já mencionamos que as etapas para gerar páginas usando templates são através de FileàNew From Template. Consulte as etapas relevantes na etapa três. Agora usamos o modelo para gerar uma página chamada body3.htm. Neste momento, você descobrirá que na página body3.htm, exceto na área editável Region01, que pode ser editada, o mouse está restrito a outros lugares. Adicionamos o conteúdo que precisamos nesta área editável, por exemplo, podemos escrever um artigo à vontade. Desta forma, podemos utilizar templates para gerar páginas de acordo com nossas necessidades.
5. Modifique o conteúdo do modelo e atualize os arquivos do site
Abra o arquivo de modelo body.dwt e modifique as áreas que precisamos modificar. Por exemplo, podemos substituir a imagem do logotipo ou modificar qualquer área não editável, ou mesmo adicionar ou excluir áreas editáveis, etc.
A seguir, é usada a alteração do logotipo para ilustrar como o modelo atualiza o arquivo.
Alteramos a imagem do logotipo para outra imagem de nossa preferência e salvamos o arquivo body.dwt após a conclusão. Neste momento, o DW abrirá uma janela perguntando se o arquivo precisa ser atualizado. Selecione Atualizar e o DW atualizará automaticamente todas as páginas. gerado com este modelo, o DW abrirá a janela Atualizar páginas durante a atualização. Após a conclusão, o log de atualização será fornecido na janela Atualizar páginas.
※Se não Atualizar estiver selecionado, o DW manterá diretamente o arquivo de modelo e não atualizará a página temporariamente, mas podemos atualizar a página manualmente, basta selecionar ModificaràTemplatesàAtualizar páginas….
Neste momento abrimos qualquer página gerada com body.dwt, como body3.htm. Você descobrirá que a imagem do logotipo mudou.
Não é difícil descobrir que usando esta função podemos resolver facilmente o problema de atualização do site. A função de modelo é muito poderosa. experimente mais para poder usá-lo totalmente.
No DW também existe uma função chamada biblioteca, que pode ser combinada organicamente com templates, o que tornará os templates mais poderosos. Se os leitores estiverem interessados, estou disposto a oferecer este presente a todos.