Você está na página 1de 18

Alcançar aparência e comportamento

consistentes por todo o site pode ser um dos


desafios mais importantes para o designer
Web. Outro desafio é a produção real de
páginas que são semelhantes em tudo,
exceto no conteúdo específico. Os modelos,
ou templates, do Dreamweaver resolvem
elegantemente esses dois desafios. Uma vez
que um modelo do Dreamweaver foi criado,
as páginas derivadas do modelo podem ser
facilmente personalizadas a fim de exibir
conteúdo próprio e, ao mesmo tempo,
podem ser facilmente atualizadas se alguma
alteração for feita no modelo.
13 Aumentando a
Produtividade com Modelos
Nesta lição, você aprenderá a utilizar modelos do Dreamweaver e fazer o
seguinte:
• Criar um código de modelo
• Inserir regiões editáveis
• Produzir páginas filhas
• Adicionar regiões opcionais
• Atualizar modelos e páginas filhas
Esta lição levará aproximadamente 60 minutos para ser completada.
Certifique-se de que você copiou Lessons/Lesson13 do CD do Adobe do
Dreamweaver CS3, Classroom in a Book para a unidade de disco antes de
começar. Ao trabalhar nesta lição, você sobrescreverá os arquivos iniciais.
Se for necessário restaurar os arquivos iniciais, copie-os novamente do CD.

Crie um modelo
Um modelo do Dreamweaver é um tipo de página mestra da qual irão
derivar páginas filhas. Você pode criar um modelo a partir de uma página
em branco, mas é muito mais prático – e comum – converter uma página
existente em um modelo. Ainda melhor, isso é extremamente fácil, confor-
me você aprenderá neste exercício.
1 Inicie o Adobe Dreamweaver CS3.
2 Se necessário, pressione F8 para abrir o painel Files e escolha DW CIB
na lista de sites.
4 ADOBE DREAMWEAVER CS3
Classroom in a Book

3 No painel Files, expanda a pasta lesson13 e dê um clique duplo no arquivo template_start.


htm para abri-lo.

A operação básica para converter uma página existente em um modelo é feita um único
passo: salve a página como um modelo.
4 Escolha File > Save as Template.
Devido à sua natureza especial, modelos são armazenados na sua própria pasta, Templates,
que o Dreamweaver cria no nível da raiz do site. Como esses arquivos são sempre armaze-
nados na mesma localização, não há necessidade alguma de se usar a caixa de diálogo tradi-
cional Save As.
5 Quando a caixa de diálogo Save as Template for exibida, certifique-se de que DW CIB
está selecionado na lista Site. Digite employee_profile no campo Name e deixe o campo
Description em branco. Clique em Save. Quando o Dreamweaver perguntar se você gosta-
ria de atualizar os links, clique em Yes.
LIÇÃO 13 5
Aumentando a Produtividade com Modelos

Nota: Como o novo modelo é armazenado em uma localização diferente de onde o arquivo
foi derivado, é importante atualizar os links para imagens, folhas de estilo CSS ou outros
arquivos dependentes.

Embora a página pareça exatamente a mesma de antes, você pode identificar um modelo
pela barra de título, que agora tem o termo adicionado: <<Template>>.
6 Escolha File > Close.
Em seguida, você aprenderá a aplicar o coração e a alma de modelos do Dreamweaver:
regiões editáveis.

Insira regiões editáveis


Quando você cria um modelo pela primeira vez, a página inteira é bloqueada; páginas
filhas criadas a partir de um modelo nessa etapa seriam duplicatas exatas do modelo e não-
editáveis. O que confere capacidades únicas aos modelos são os vários tipos de regiões que
podem ser definidos.
As mais importantes dessas são as regiões editáveis.
1 No painel Files, expanda a pasta Templates e dê um clique duplo no arquivo employee_
profile.dwt para abri-lo.
Os modelos do Dreamweaver são designados com uma extensão de arquivo especial, .dwt,
mas podem ser abertos para edição exatamente como qualquer outro arquivo.

Você também pode acessar seus modelos a partir da categoria Templates da pasta Assets.
6 ADOBE DREAMWEAVER CS3
Classroom in a Book

2 No campo Page title da barra de ferramentas do documento, exclua Maya Ren e pressio-
ne Enter (Windows) ou Return (MacOS).
O Dreamweaver inclui automaticamente uma região editável em torno do tag <title> da pá-
gina para você poder modificar facilmente esse campo em páginas filhas.
3 Selecione o texto de cabeçalho Maya Ren.

O primeiro passo ao criar uma região editável é selecionar a área da página que você quer
incluir na região. Às vezes, você selecionará parágrafos, tags <div> ou, como nesse caso,
uma frase de texto.
4 Na categoria Common da barra Insert, escolha o botão de menu Templates ( ), o segun-
do ícone a partir da direita e selecione Editable Region na lista.
5 Quando a caixa de diálogo New Editable Region aparecer, digite employee no campo
Name e clique em OK.

Cada região editável deve ter um nome único. Os nomes são utilizados na guia que, junto
com a borda, identifica uma região editável.
LIÇÃO 13 7
Aumentando a Produtividade com Modelos

O segundo passo ao criar uma região editável é substituir o conteúdo específico por algo
mais genérico.
6 Com o conteúdo dentro da nova região editável ainda selecionado, digite o texto genérico
Employee Name.

Agora, vamos seguir o mesmo procedimento para a parte de título do cabeçalho.


7 Selecione o texto de cabeçalho Creative Director e, da barra Insert, clique em Editable
Region. Quando a caixa de diálogo New Editable Region abrir, digite title no campo Name
e clique em OK. Substitua o texto atualmente selecionado por Title.

Você observará que o dois-pontos e o espaço separando o nome do empregado e o título


não foram incluídos nas duas regiões editáveis. Essa área permanece bloqueada e assegura
que o formato desejado – Employee Name: Title – seja sempre seguido.
Agora, vamos tornar possível alterar a fotografia do empregado.
8 ADOBE DREAMWEAVER CS3
Classroom in a Book

8 Selecione a imagem maya_ren.jpg e, na barra Insert, clique em Editable Region.


Quando a caixa de diálogo New Editable Region abrir, digite photograph no campo Name
e clique em OK.

Em vez de deixar a mesma fotografia para todos os empregados – e esperar que quem está
criando a página filha lembre-se de substituí-la – vamos substituí-la por uma imagem de
reserva de espaço.
9 Pressione Delete para remover a imagem atual. Na categoria Comum da barra Insert,
clique no botão de menu Images e selecione Image Placeholder ( ).
10 Quando a caixa de diálogo Image Placeholder aparecer, digite Employee_Photograph
no campo Name e pressione Tab. No campo Width, digite 360 e, no campo de Height, 541.
Clique em OK.

Agora, vamos criar algumas regiões editáveis para as seções de tabela.


LIÇÃO 13 9
Aumentando a Produtividade com Modelos

11 Selecione o texto dentro da segunda linha da guia na coluna direita, Gauguin, Czanne
e Monet. Na barra Insert, clique em Editable Region. Na caixa New Editable Region, digite
art no campo Name e clique em OK.

Nessa circunstância, vamos deixar o texto atual como um exemplo do tipo de informação
esperado na região editável.
12 Siga o mesmo procedimento detalhado no passo 10 para as células restantes na coluna
direita da tabela:
• Selecione os dados na terceira célula e atribua à região editável o nome book.
• Selecione os dados na quarta célula e atribua à região editável o nome quote.
• Selecione os dados na quinta célula e atribua à região editável o nome training.
• Selecione os dados na sexta célula e atribua à região editável o nome birthplace.
• Selecione os dados na célula sétima e atribua à região editável o nome memory.
• Selecione os dados na oitava célula e atribua à região editável o nome invention.
10 ADOBE DREAMWEAVER CS3
Classroom in a Book

Parabéns, você criou todas as regiões editáveis para seu modelo! Embora configurar regiões
editáveis individuais possa ser um pouco tedioso, o resultado vale a pena. Se você, por
exemplo, designasse a tabela inteira como editável, as categorias, a estrutura da tabela e até a
própria tabela poderiam ser facilmente removidas ou alteradas contra sua vontade.
13 Escolha File > Save. O Dreamweaver alerta que você colocou uma região editável dentro
de um tag de bloco, tornando assim, impossível que os usuários criem novos tags de bloco
dentro da região. Clique em OK.
Como você colocou a região editável employee dentro do tag <h1> de propósito, um tag de
bloco, não há problema em ignorar esse alerta.
14 Escolha File > Close.
Em seguida, você irá colocar seu modelo em uso e criar sua primeira página filha.

Produza páginas filha


Páginas filhas são a razão de ser dos modelos do Dreamweaver. Depois que uma página
filha é criada a partir de um modelo, o conteúdo dentro das regiões editáveis pode ser atu-
alizado, enquanto o restante da página permanece bloqueado – mas essa capacidade só é
notável dentro do Dreamweaver.
Uma vez publicada ou visualizada, a página filha parece igual a qualquer outra página
HTML.
1 Escolha File > New.
LIÇÃO 13 11
Aumentando a Produtividade com Modelos

2 Na caixa de diálogo New Document, selecione Page from Template da lista de categorias.
Certifique-se de que DW CIB está selecionado na lista Site e employee_profile na área
Template for Site “DW CIB”.

Embora seja possível criar páginas a partir de modelos em outros sites, o mais comum é tra-
balhar com modelos no site atual.
3 Com a opção Update page when template changes marcada, clique em Create.
A nova página é aberta no Dreamweaver. Antes de explorar e modificar a página, vamos
salvá-la.
4 Escolha File > Save. Na caixa diálogo Save As, navegue até a pasta lesson13 e, no campo
File name, digite bill_wanner.htm e clique em Save.
12 ADOBE DREAMWEAVER CS3
Classroom in a Book

A primeira coisa que você notará ao mover o cursor pela página é que certas áreas, como a
navegação e o logotipo, estão bloqueadas e não podem ser modificadas. O estado bloquea-
do é indicado pela alteração no cursor, de um ponteiro ou barra em forma de I para o sím-
bolo internacional de entrada proibida, o círculo com uma linha diagonal. O conteúdo da
região editável, porém, pode ser alterado – vamos iniciar isso agora.
5 No campo Page title da barra de ferramentas Document, coloque o cursor depois de dev /
design folks – e digite Bill Wanner. Pressione Enter (Windows) ou Return (MacOS).
Você se lembrará que o Dreamweaver adiciona automaticamente uma região editável ao tag
<title> para permitir títulos de página individuais.
6 Na região editável employee, selecione Employee Name e pressione Delete (Windows),
ou pressione forward delete (MacOS); digite Bill Wanner.
7 Na região editável title, selecione Title e pressione Delete (Windows) ou forward delete
(MacOS); digite CFO.

Você pode começar a ver como a página está tomando forma. Agora, vamos substituir a
imagem de reserva de espaço.
LIÇÃO 13 13
Aumentando a Produtividade com Modelos

8 Dê um clique duplo na imagem de espaço reservado. Na caixa de diálogo Select Image


Source, navegue para a pasta lesson13 > images e selecione bill_wanner.jpg. Clique em OK
quando terminar.

Em seguida, você precisará modificar os valores de regiões editáveis na tabela. Felizmente, o


Dreamweaver torna fácil ir de uma região para a próxima.
9 Coloque o cursor na região editável art e escolha Edit > Select All. Com o conteúdo sele-
cionado, digite Keith Haring and Leonardo daVinci e pressione Tab.

Observe que o conteúdo na próxima região editável está selecionado. Você pode alternar ra-
pidamente entre as regiões restantes utilizando a tecla Tab e atualizar o conteúdo conforme
necessário.
14 ADOBE DREAMWEAVER CS3
Classroom in a Book

10 Substitua as seguintes regiões editáveis conforme indicado:


• Na região editável book, digite Winning by Jack Welch e pressione Tab.
• Na região editável quote, digite “Nothing gold can stay” – Robert Frost e pressione Tab.
• Na região editável training, digite M.B.A., Stanford University e pressione Tab.
• Na região editável birthplace, digite Menlo Park, California e pressione Tab.
• Na região editável memory, digite Seeing my first child born e pressione Tab.
• Na região editável invention, digite Flying cars.

11 Sua nova página filha agora está completa. Vamos examiná-la no navegador.
12 Escolha File > Save e pressione F12 para visualizar a página em seu principal navegador.

Como você pode ver, não há indicação de que esta página filha de um modelo seja diferente
de qualquer outra página Web padrão sob qualquer aspecto.
Em seguida, você aprenderá a aumentar um pouco mais a flexibilidade dos modelos utili-
zando regiões opcionais.
LIÇÃO 13 15
Aumentando a Produtividade com Modelos

Adicione regiões opcionais


Regiões opcionais são outras ferramentas poderosas no conjunto dos recursos baseados
no modelo do Dreamweaver. Qualquer conteúdo dentro de uma região opcional pode ser
exibido ou ocultado em tempo de projeto em qualquer página filha. Neste exercício, você
acrescentará uma seção “O empregado do mês” que pode ser ativada ou desativada para
qualquer página derivada.
1 No painel Files, expanda a pasta Templates e dê um clique duplo no arquivo employee_
profile.dwt para abri-lo no Dreamweaver.

2 Coloque o cursor à direita da região editável title, pressione Space e digite and Employee
of the Month!

3 Selecione o texto inserido – incluindo o espaço inicial – e, na categoria Comon da barra


Insert, clique no botão de menu Templates e selecione Optional Region.
16 ADOBE DREAMWEAVER CS3
Classroom in a Book

4 Quando a caixa de diálogo New Optional Region aparecer, certifique-se de que a guia Ba-
sic está selecionada e, no campo Name, digite employee_month. Desmarque a opção Show
by default e clique em OK quando tiver terminado.

A região opcional oferece as funcionalidades Basic e Advanced. As opções Basic configu-


ram uma situação do tipo “sim ou não”, em que o conteúdo na região opcional é mostrado
ou ocultado. A guia Advanced permite inserir instruções condicionais mais complexas, em
que o conteúdo pode ser exibido somente se uma ou mais variáveis forem atendidas.
5 Mantenha o arquivo aberto para o próximo exercício sem salvá-lo.

No próximo exercício, você aprenderá a propagar alterações feitas no modelo para as pági-
nas filhas.
LIÇÃO 13 17
Aumentando a Produtividade com Modelos

Atualize modelos e páginas filhas


Metade da mágica dos modelos do Dreamweaver é criar páginas filhas baseadas em um
modelo para garantir a consistência da sua aparência e comportamento. A outra metade é
fazer alterações nesses modelos e atualizar automaticamente as páginas filhas associadas.
1 Com o modelo employee_profile.dwt aberto, escolha File > Save. Quando o alerta de
região editável aparecer, clique em OK.
2 Na caixa de diálogo Update Template Files, clique em Update.

3 A caixa de diálogo Update Template Files lista todas as páginas filhas associadas.
4 Quando a caixa de diálogo Update Pages aparecer, ela fornecerá uma indicação de todas
as páginas atualizadas e se a atualização foi bem-sucedida ou não. Quando terminar, clique
em Fechar.

É provável que a atualização de uma única página ocorra rapidamente para você poder ver.
Os detalhes importantes a notar são as listagens dos arquivos examinados, dos arquivos atu-
alizados e daqueles que não puderam ser atualizados. Contanto que esses dados correspon-
dam às suas expectativas, a operação foi um sucesso. Agora, vamos examinar a atualização e
tirar proveito de nossa região opcional.
5 Escolha File > Close e, a partir do painel Files, dê um clique duplo em bill_wanner.htm
para abrir a página filha.
18 ADOBE DREAMWEAVER CS3
Classroom in a Book

Inicialmente, você não verá qualquer alteração – você se lembrará que desativou a opção de
mostrar a região opcional por padrão. Vamos reativá-la!
6 Escolha Modify > Template Properties. Quando a caixa de diálogo Template Properties
aparecer, escolha a entrada employee_month e marque a opção Show employee_month.
Clique em OK.

Dependendo da complexidade da página, a caixa de diálogo Template Properties poderia


conter numerosas regiões opcionais e outras variáveis de modelo.
7 Escolha File > Save.

8 Como você pode ver, o texto opcional é imediatamente adicionado à página. Você tam-
bém pode observar que ele não está dentro de uma região editável e portanto está bloquea-
do; se quiser, você pode colocar uma região editável dentro de uma opcional no modelo. As
configurações de Template Properties são armazenadas no arquivo salvo e permanecerão
no estado escolhido até serem modificadas novamente.
Parabéns, você completou esta lição!
Revisão
䉴 Perguntas
1 Como se cria um modelo a partir de uma página existente?
2 Identifique um elemento essencial em um modelo. Por que ele é essencial?
3 Como se cria uma página filha a partir de um modelo?
4 O que uma região opcional faz?
5 Como se propagam as alterações feitas em um modelo para suas páginas filhas?

䉴 Respostas
1 Escolha File > Save as Template e digite o nome do modelo na caixa de diálogo.
2 A região editável é essencial para trabalhar com modelos, porque sem ela as pá-
ginas filhas permaneceriam completamente bloqueadas e não-editáveis.
3 Escolha File > New e, na caixa de diálogo New Document, selecione Pages from
Templates, localize o modelo desejado e clique em Create.
4 O conteúdo em uma região opcional pode ser exibido ou ocultado em tempo de
projeto para cada página filha individual.
5 As alterações em um modelo são propagadas para as páginas filhas quando o
modelo é salvo. Uma caixa de diálogo Update Pages exibe o progresso.

Você também pode gostar