Escolar Documentos
Profissional Documentos
Cultura Documentos
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
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.
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.
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.
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.
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
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
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
2 Coloque o cursor à direita da região editável title, pressione Space e digite and Employee
of the Month!
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.
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
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.
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.