Templates/ Modelos 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.

Apresentação em tema: "Templates/ Modelos 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."— Transcrição da apresentação:

1 Templates/ Modelos 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.

2 Abra um novo arquivo no Dreamweave e construa as tabelas, como no modelo abaixo, utilizando-se da opção Layout View.

3 Salvando Template 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. Observação: 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.

4 Á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.

5 Grife o texto "Texto para ser trocado", vá no menu MODIFY>TEMPLATES>NEW EDITABLE REGION ou pela. Uma nova janela abrirá. Digite o nome para ela. No exemplo, o nome é “Menu".

6

7

8 Usando o Template 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 . * 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.

9 Editando o Template Vá ao menu Modify > Templates> Open Attached Templates. A partir do painel Templates: Faça as modificações necessárias e salve. Em seguida,atualize as páginas para usar o novo template: Vá para menu Modify > Templates > Updates page.

10 Efeitos no Menu - Behaviors
Behaviors ou comportamento são códigos que combinam um evento e uma ação por parte de um usuário. Para adicionar um Behavior, selecione o objeto que deseja aplicar e vá para o menu Windows > Behavior. Abre-se a seguinte janela:

11 Selecione o primeiro item do menu e abra a janela Behaviors
Selecione o primeiro item do menu e abra a janela Behaviors. Selecione a opção: Set Navigation Bar Image

12

13 Janela Pop - Up Em Behavior selecione Open Browser Window

14