Dreamweaver - Dicas, Tutorials, truques

Templates (ganhando muitooo tempo com ele!)

Essa dica vai ajudar vc na criação de sites, dando agilidade e padronizando suas páginas! O Dreamweaver tem um recurso chamado TEMPLATE, com ele vc padroniza suas páginas de forma fácil e simples! Ainda fazendo uso dele é possível mudar TODO seu site com somente uma alteração em única página! O ganho em tempo desse recurso é algo incrível!!! Vamos a dica... ;-) Crie sua página, a estrutura dela, imagine o template como um um 'molde'... Vc monta a sua página, a barra de navegação, o banner superior, as cores, folhas de estilo (CCS/Style Sheet - será abordado em futura dica, aguarde!), enfim define o 'molde do site'. Para vc entender melhor veja esse esquema que adotei em meu site:(Aqui, como sempre, vai ao gosto do cliente!)

ITEM 1 - BARRA DE NAVEGAÇÃO: aqui inseri todos os menus, ou seja, por essa barra vc tem acesso as páginas do site. Vc pode definir de acordo com seu gosto... Eu recomendo a vc que use a barra de navegação na esquerda, esse o padrão vigente, ou seja, todo mundo usa na esquerda. Claro, vc pode criar o seu padrão... Mas lembre-se, o seu site é para VC ou para que outras pessoas o acessem? Além disso, essa disposição leva em conta os preceitos de Usabilidade (mais informações sobre usabilidade, aqui !) de páginas e sua navegabilidade;
ITEM 2 - ÁREA EDITAVEL : Após vc editar e criar o layout de seu site vc precisa definir uma área onde o conteúdo será inserido. O padrão é carregar no centro, como pode ser visto na área laranja. Aqui vc define o nome dessa 'área editavel' nesse exemplo eu chamei de 'conteudo'.
ITEM 3 - BANNER: Aqui, normalmente, é inserido uma imagem e/ou animação. Novamente fica a seu critério.

Detalhe da área editavel do site:

'Esqueleto' do site: foi criada uma tabela com 770 pixels(px) de largura com 440 px de altura. A tabela possuí 2 linhas/rows, sendo que a linha 2 da tabela foi divida/split cells em 2 colunas (barra de navegação +área de conteúdo). Então agora vc deve selecionar SOMENTE a célula que será editavel e definir ela como sendo editável. Para vc melhor entender o processo de criação de templates, tudo o que vc disser que NÃO é editavel, será 'travado' pelo Dreamweaver em futuras criações baseadas nesse template.

Definindo uma área da tabela como sendo editavel: Selecione a célula que será editavel, BOTÃO ESQUERDO DO MOUSE+CTRL, foi selecionada a célula (vide figura abaixo). Tecla de atalho: CTRL+ALT+V.

Irá aparecer uma caixa onde vc deve informar o nome da área editavel (vide figura abaixo):

Após escolher o nome, clique em OK, pronto vc definiu com sucesso uma área editavel no seu TEMPLATE (vide figura abaixo). Se vc já definiu o seu layout e tb a área editavel, basta salvar COMO TEMPLATE/SAVE AS TEMPLATE !

Voltando ao exemplo do meu site, ficamos com o layout do TEMPLATE dessa forma: ÁREA LARANJA = ÁREA EDITAVEL.

Agora que vc salvou/criou seu TEMPLATE, vc pode simplesmente selecionar uma nova página baseado em seu TEMPLATE (vide figura abaixo): basta clicar em OK e pronto vc tem um novo 'molde' de sua página, basta agora inserir o conteúdo na área editavel.

Observações importantes:

Vc somente poderá mexer na área editavel ! QQ outra alteção/ajuste que vc queira fazer, vc terá que abrir o template e edita-lo. O Dreamweaver trava qq alteração fora da área editavel.
Após editar o template e salva-lo, o Dreamweaver faz uma verificação de qtas páginas vc criou usando o template atual (o que vc acabou de salvar) . Ele verifica e informa vc qtos ele alterou, será necessário fazer o upload de todos os arquivos baseados no TEMPLATE !
Para fazer isso abra a relação de arquivos de seu site (LOCAL !!!) e clique na guia MODIFIED, veja a hora e a data, o Dreamweaver agrupa todos os modificados. Normalmente eles tem o mesmo horário ! Selecione todos e mande de volta ao servidor.
Pronto ! Vc atualizou TODAS as páginas mudando SOMENTE uma página ! Isso vai dar uma padronização ao seu site, além é claro de vc ganhar muitoooo tempo! Já imaginou atualiztodas as páginas manualmente??? Uma a uma... ;-)

Dreamweaver - Dicas, Tutorials, truques

Templates (ganhando muitooo tempo com ele!)

Observações importantes:

SILVEIRO.COM

Webdesigner | Cadastro e Otimização de sites: veja como melhorar a colocação no Google