CAPÍTULO 27
Como gerenciar as propriedades do site,
bibliotecas e modelos
Ao desenvolver sites da Web, você pode acumular um número cada vez maior de propriedades. Em alguns casos, é possível utilizar as mesmas propriedades para vários sites ou definir um conjunto de propriedades preferidas que podem ser utilizadas para todos os seus sites. Com o Macromedia Dreamweaver MX, é possível utilizar o painel Propriedades para ajudá-lo a gerenciar as propriedades de seu site. O painel Propriedades permite localizar facilmente e visualizar diversos tipos de propriedades armazenadas em seu site, como imagens, filmes, cores, scripts e links. Você pode arrastar facilmente uma propriedade do painel Propriedades a seu documento para inseri-lo em uma página.
O painel Propriedades também fornece acesso a dois tipos especiais de recursos: bibliotecas e modelos. Os itens da biblioteca e modelos são propriedades vinculadas: edição de um item de biblioteca ou modelo atualiza todos os documentos nos quais as propriedades foram aplicadas. Utilize os itens de biblioteca e modelos quando quiser reutilizar conteúdo ou elementos de projeto específicos em um site ou em vários sites. Os itens de biblioteca são reservados para use com elementos de projeto individuais, como informações de direito autorais de um site ou logotipo. Os modelos permitem controlar uma área de projeto maior. O autor de modelo desenvolve uma página e define quais áreas da página podem aceitar edições de projeto ou conteúdo.
Os seguintes tópicos são discutidos neste capítulo:
•
“Como utilizar o painel Propriedades”, na página 454•
“Como gerenciar o painel Propriedades”, na página 463•
“Como trabalhar com itens de biblioteca”, na página 466•
“Como criar, gerenciar e editar itens de biblioteca”, na página 467•
“Sobre os modelos do Dreamweaver”, na página 472•
“Como criar um modelo no Dreamweaver”, na página 477•
“Como definir regiões de modelos”, na página 472•
“Como criar um documento de um modelo”, na página 487•
“Como criar um modelo aninhado”, na página 493•
“Como editar e atualizar os modelos”, na página 495Como utilizar o painel Propriedades
As propriedades envolvem uma variedade de elementos que podem ser armazenados em um site, como imagens ou arquivo de filme.
É possível obter propriedades de várias fontes. Por exemplo: as propriedades podem ser criadas em um aplicativo como o Macromedia Fireworks ou Macromedia Flash, recebidas de um colega de trabalho ou cliente, copiadas de um CD de clip-art ou copiar uma imagem de um site de imagens. Para obter mais informações sobre o planejamento e obtenção de propriedades, consulte “Sobre o planejamento e projeto de sites”, na página 61.
O painel Propriedades pode ser utilizado de duas maneiras: como uma lista facilmente acessível das propriedades do site (a lista Site) ou como um modo de organizar as propriedades que são utilizadas com mais freqüência (a lista Favoritos). O painel Propriedades coloca automaticamente as propriedades do site na lista Site. É possível adicionar qualquer propriedade desejada à lista de favoritos.
A maioria das operações do painel Propriedades funcionam do mesmo modo que as listas Site e Favoritos. Contudo, há algumas tarefas que podem ser executadas apenas na lista Favoritos (consulte “Configurar propriedades na lista de Favoritos”, na página 464).
Como abrir o painel Propriedades
Use o painel Propriedades para exibir as propriedades no site atual ou exibir propriedades salvas em uma lista de favoritos.
É preciso definir um site local antes de visualizar as propriedades no painel Propriedades.
Para abrir o painel Propriedades:
Selecione Janela > Propriedades.
Como selecionar uma categoria de propriedades
O painel Propriedades ajuda a gerenciar e organizar as propriedades do site mais facilmente do que no painel Site. As propriedades são categorizadas e exibidas em uma lista.
Para exibir as propriedades em uma determinada categoria, clique no ícone apropriado. O Dreamweaver exibe as categorias de propriedades a seguir:
Imagens são arquivos de imagens nos formatos GIF, JPEG ou PNG. Para obter informações sobre as imagens, consulte “Como inserir imagens”, na página 319.
Cores são as cores utilizadas em documentos e folhas de estilos no site, incluindo cores do texto, cores de fundo e dos links.
URLs são os links externos nos documentos do site. Essa categoria inclui os seguintes tipos de links: FTP, gopher, HTTP, HTTPS, JavaScript, correio eletrônico (mailto) e arquivo local (file://).
Filmes Flash são arquivos em qualquer versão do formato Macromedia Flash. O painel Propriedades exibe apenas os arquivos SWF (arquivos Flash compactados), mas não exibe os arquivos FLA (Flash). Veja “Sobre o conteúdo Flash”, na página 348.
Filmes Shockwave são arquivos em qualquer versão do formato Macromedia Shockwave. Veja “Como inserir filmes Shockwave”, na página 353.
Filmes são arquivos de filme no formato QuickTime ou MPEG. Veja “Como inserir mídia”, na página 345.
Scripts são arquivos JavaScript ou VBScript. Observe que os scripts nos arquivos HTML (ao invés dos arquivos JavaScript ou VBScript independentes) não aparecerão no painel Propriedades. Para obter informações sobre o trabalho com JavaScript no Dreamweaver, consulte “Como utilizar o depurador JavaScript”, na página 221.
Modelos asseguram uma maneira fácil de reutilizar o mesmo layout de página em diversas páginas e modificar o layout em todas as páginas anexadas a um modelo quando um modelo for
modificado. Veja “Sobre os modelos do Dreamweaver”, na página 472.
Itens de biblioteca são elementos utilizados em várias páginas. Quando um item de biblioteca for modificado, todas as páginas que o contêm serão atualizadas. Veja “Como trabalhar com itens de biblioteca”, na página 466
Observação: Apenas os arquivos que se enquadram nessas categorias serão mostrados no painel Propriedades.
Exibir propriedades no painel Propriedades
O painel Propriedades oferece duas maneiras de exibir as propriedades: a lista Site, que exibe todas as propriedades do site, e a lista Favoritos, que exibe apenas as propriedades selecionadas. As propriedades são divididas em categorias em ambas as listas: selecione a categoria de propriedades a ser listada clicando em um dos botões de categoria no lado esquerdo do painel. Tanto a lista Site quanto a lista Favoritos estão disponíveis para todas as categorias de
propriedades, exceto os modelos e itens de biblioteca.
A lista Site exibe todos as propriedades existentes como arquivos em seu site, bem como todas as cores e URLs que são utilizados em qualquer documento do site.
A maioria dos procedimentos abaixo podem ser executados na lista Site ou Favoritos.
Para exibir a lista Site:
Clique em Site, no alto do painel Propriedades.
Observação: Nas categorias Modelos e Biblioteca, as opções Site e Favoritos não estão disponíveis.
Para exibir a lista Favoritos:
Clique em Favoritos, no alto do painel Propriedades.
A lista Favoritos estará vazia até que as propriedades sejam incluídas.
Para exibir as propriedades de uma determinada categoria:
Clique no ícone de categoria adequado e clique em Site ou Favoritos. Por exemplo: para exibir todas as imagens no site, clique no ícone de Imagens e, em seguida, clique em Site.
Para visualizar uma propriedade:
Selecione a propriedade no painel Propriedades.
A área de visualização, no alto do painel, mostra a pré-visualização da propriedade. Por exemplo: ao selecionar uma propriedade de filme, a área de visualização exibe um ícone. Para exibir um filme, clique no botão Executar (triângulo verde), no canto superior direito da área de visualização.
Para alterar o tamanho da área de visualização:
Arraste para cima ou para baixo a barra de divisão (entre a área de visualização e a lista de propriedades).
Atualizar o painel Propriedades
O painel pode demorar alguns segundos até criar a lista Site, pois é necessário ler o cache do site para criar a lista.
Algumas alterações não aparecerão imediatamente no painel Propriedades:
•
Ao adicionar ou remover uma propriedade do site, as alterações não aparecerão no painel Propriedades até que a lista Site seja atualizada, clicando no botão Atualizar a lista Site. Se uma propriedade for adicionada ou removida fora do Dreamweaver (utilizando o Windows Explorer, por exemplo) é necessário recriar o cache do site para atualizar o painel Propriedades.•
Ao remover a única instância de uma determinada cor ou URL no site ou quando um novoarquivo salvo contiver uma cor ou uma URL ainda não utilizada anteriormente no site, as alterações não aparecerão no painel Propriedades até que a lista Site seja atualizada.
Para atualizar manualmente a lista Site:
1 Clique em Site no painel Propriedades para exibir a lista Site
2 Clique no botão Atualizar a lista Site, na parte inferior do painel Propriedades.
O cache do site será criado ou atualizado conforme necessário e o painel Propriedades será atualizado para exibir as propriedades do site.
Para recriar o cache do site manualmente e atualizar a lista Site:
Clique na tecla Control no painel Propriedades e selecione Atualizar a lista Site. Como adicionar propriedade a uma página
A maior parte dos tipos de propriedades pode ser inserida em um documento arrastando-as para a visualização do projeto ou visualização do código da janela do documento ou utilizando o botão Inserir. É possível inserir cores e URLs ou aplicá-las no texto selecionado, na visualização do projeto (as URLs também podem ser aplicadas a outros elementos, como as imagens, na visualização do projeto). Os modelos são aplicados ao documento inteiro.
Para inserir uma propriedade em um documento:
1 Coloque o ponto de inserção na visualização do projeto onde a propriedade deverá aparecer. 2 Selecione Janela > Propriedades para abrir o painel Propriedades, caso ainda não esteja aberto. 3 Selecione a categoria de propriedade para o tipo de propriedade a ser inserido.
Selecione qualquer categoria, exceto Modelos. Um modelo pode ser aplicado apenas a um documento inteiro e não pode ser inserido em um documento.
4 Selecione Site ou Favoritos e localize a propriedade desejada.
Não há listas Site ou Favoritos para os itens de biblioteca. Ignore essa etapa ao inserir um item de biblioteca.
5 Siga um dos procedimentos abaixo:
•
Arraste a propriedade do painel para o documento. Arraste os scripts até a área de conteúdo do cabeçalho, na janela do documento. Se esta área não estiver visível, selecione Exibir >Conteúdo do cabeçalho.
•
Selecione a propriedade no painel e clique em Inserir.A propriedade é inserida no documento. Se a propriedade for uma cor, ela será aplicada a partir do ponto de inserção, ou seja, a digitação subseqüente será exibida nesta cor.
Utilize o painel Propriedades para aplicar uma cor
As cores no painel Propriedades representa as cores que você aplicou a vários elementos do site, como texto, borda da tabela, cor de fundo e assim por diante. É possível utilizar exemplos de cores na categoria Cores para aplicar as opções de cores a objetos em uma página de forma consistente. Para obter mais informações sobre como adicionar uma cor à categoria de cores, consulte “Como criar uma nova cor ou URL para adicionar à lista Favoritos”, na página 465.
Para alterar a cor do texto selecionado em um documento:
1 Selecione o texto no documento.
2 Selecione a categoria Cores no painel Propriedades. 3 Selecione a cor desejada.
4 Clique em Aplicar.
Como utilizar o painel Propriedades para adicionar um link URL ao documento
Você pode utilizar o painel Propriedades para inserir link URL em um documento ou aplicar link URL ao texto selecionado.
Para adicionar um link à seleção atual em um documento:
1 Selecione o texto ou imagem em que deseja aplicar a URL.
2 Selecione a categoria URLs no painel Propriedades e localize a URL desejada.
3 Siga um dos procedimentos abaixo:
•
Arraste a URL do painel para a seleção na visualização do projeto.•
Selecione a URL e clique no botão Inserir.Para adicionar um link a um documento:
1 Coloque o ponto de inserção no documento onde a URL deve ser inserida. 2 Selecione a categoria URLs no painel Propriedades e localize a URL desejada.
3 Siga um dos procedimentos abaixo:
•
Arraste a URL do painel para a seleção na visualização do projeto.•
Selecione a URL e clique no botão Inserir.Como selecionar e editar as propriedades
O painel Propriedades permite selecionar várias propriedades simultaneamente. Este painel também fornece um modo rápido de iniciar a edição das propriedades.
Para selecionar várias propriedades:
Selecione uma das propriedades clicando nesse item. Em seguida, escolha as outras propriedades de uma das seguintes maneiras:
•
Pressione a tecla Shift e clique para selecionar uma série consecutiva de propriedades.•
Pressione a tecla Control e clique para adicionar uma propriedade individual à seleção (seja ela adjacente ou não à seleção existente). Pressione a tecla Control ou Command e clique em uma propriedade escolhida para cancelar a sua seleção.Para editar uma propriedade:
1 Siga um dos procedimentos abaixo:
•
Clique duas vezes na propriedade.•
Selecione a propriedade e, em seguida, clique em Editar.No caso de alguns tipos de propriedades (imagens, por exemplo), a edição da propriedade será iniciada em um aplicativo de edição externo. Quanto às cores e URLs, a edição da propriedade permite alterar o valor desta apenas na lista Favoritos. As cores e URLs não podem ser editadas na lista Site. No caso dos modelos e itens de biblioteca, a edição da propriedade permite alterá-la no Dreamweaver.
Se um editor externo não for aberto para uma propriedade que deveria utilizá-lo, selecione Editar > Preferências, selecione a categoria Tipos de arquivos/editores e certifique-se de que haja um editor externo definido para o tipo de arquivo da propriedade. Veja “Como iniciar um editor externo para arquivos de mídia”, na página 346.
2 Altere a propriedade conforme desejar.
3 Ao concluir a edição da propriedade, siga um dos procedimentos abaixo:
•
Se a propriedade estiver na forma de um arquivo (qualquer uma diferente de cor ou URL), salve-a (utilizando qualquer editor empregado para editá-la) e feche a propriedade.•
Se a propriedade for uma URL, clique em OK ao terminar a edição na caixa de diálogo Editar a URL.Se a propriedade for uma cor, o seletor de cores do Dreamweaver se fechará automaticamente quando uma cor for escolhida. Para fechar o seletor de cores sem escolher uma cor, pressione a tecla Esc.
Como utilizar a categoria Biblioteca do painel Propriedades
A categoria Biblioteca do painel Propriedades exibe todos os itens na biblioteca do site atual. Para obter mais informações sobre como alterar ou atualizar um item de biblioteca, consulte “Como editar um item de biblioteca”, na página 468.
Para criar um novo item de biblioteca vazio no painel Propriedades:
1 Certifique-se de que não haja qualquer elemento selecionado na janela do documento. Se algum item for selecionado, a seleção será colocada no novo item de biblioteca.
2 Na parte inferior do painel Propriedades, clique no botão Novo item de biblioteca. Um novo item sem título é adicionado à lista de itens do painel.
3 Enquanto o item estiver selecionado, digite um nome para ele.
Para adicionar um item de biblioteca a um documento:
1 Na janela do documento, coloque o ponto de inserção onde deseja inserir o item de biblioteca.
2 Selecione a categoria Biblioteca no painel Propriedades e localize o item de biblioteca desejado.
3 Siga um dos procedimentos abaixo:
•
Arraste o item de biblioteca do painel para a seleção na visualização do projeto.•
Selecione o item de biblioteca e clique no botão Inserir.Para editar um item de biblioteca:
Selecione um item de biblioteca na lista e clique no botão Editar ou clique duas vezes no nome do item na lista.
Para excluir um item de biblioteca:
1 Selecione o item de biblioteca no painel Propriedades.
2 Clique no botão Excluir ou pressione a tecla Del para confirmar a exclusão do item de biblioteca.
O item de biblioteca será excluído do site.
Tópico relacionado
Como utilizar o painel Propriedades para inserir modelos
É possível utilizar a categoria Modelos do painel Propriedades para criar novos modelos e gerenciar os existentes.
Para obter mais detalhes sobre a criação e a edição de modelos, consulte “Como criar um modelo no Dreamweaver”, na página 477. Para obter mais detalhes sobre como utilizar o painel Propriedades para gerenciar as propriedades, consulte “Como utilizar o painel Propriedades”, na página 454.
Para utilizar o painel Propriedades para criar um novo modelo em branco
1 Escolha Janela > Modelos.
O painel Propriedades aparecerá com a categoria Modelos selecionada.
2 Na parte inferior do painel Propriedades clique no botão Novo modelo do painel Propriedades. Um novo modelo vazio e sem título será adicionado à lista de modelos no painel.
3 Com o modelo selecionado, digite um nome para ele.
4 Isto cria um novo modelo em branco no painel Propriedade e na pasta Modelos, mas não cria um arquivo .dwt. Para começar a definir as regiões editáveis, clique no botão Editar ao fundo do painel Propriedades.
Para obter mais informações sobre como definir regiões de modelos editáveis, consulte “Como inserir uma região editável”, na página 479.
Para editar um arquivo de modelo:
1 Escolha Janela > Propriedades e clique no ícone Modelos para exibir os modelos.
O painel inferior do painel Propriedades contém uma lista de todos os modelos disponíveis para o seu site. A área superior exibe uma visualização do modelo selecionado.
2 Na lista Nome, siga um dos procedimentos abaixo:
•
Clique duas vezes no nome do modelo.•
Na parte inferior do painel Propriedades, clique no botão Editar o modelo.3 Edite o modelo na janela do documento. Crie regiões editáveis no modelo como desejar (consulte “Como definir regiões de modelos”, na página 472).
4 Salve o modelo editado selecionando Arquivo >Salvar.
Observação: Se você ainda não definiu nenhuma região editável, o Dreamweaver advertirá o usuário que
o modelo não contém nenhuma região editável. Você poderá salvar ou modificar o modelo mesmo se não contiver regiões editáveis, mas não poderá modificar documentos baseado naquele modelo até que possua uma região editável.
Para aplicar um modelo ao documento ativo:
1 Abra o documento no qual o modelo será aplicado
2 Selecione a categoria Modelo, no painel Propriedades, e localize o modelo a ser aplicado. 3 Siga um dos procedimentos abaixo:
Para renomear um modelo no painel Propriedades:
1 Clique no nome do modelo para selecioná-lo.
2 Clique no nome novamente para tornar o texto selecionável e digite um novo nome.
Observação: Este método funciona da mesma forma que renomear um arquivo no Windows Explorer. Do
mesmo modo que no Windows Explorer, certifique-se de fazer uma pequena pausa entre os cliques. Não clique duas vezes no nome, pois isto abre o modelo para edição.
3 Clique em outra área do painel Propriedades ou pressione a tecla Enter para que a alteração
tenha efeito.
4 O Dreamweaver perguntará se você deseja atualizar os documentos que se basearem neste modelo.
•
Para atualizar todos os documentos no site que se basearem neste modelo, clique em Atualizar.•
Para evitar a atualização de todos os documentos baseados neste modelo, clique em Nãoatualizar. Um documento que você escolheu não atualizar ainda se baseará no modelo original (não desanexado). Para atualizar o documento posteriormente, abra o documento e selecione Modificar > Modelos > Atualizar.
Para excluir um arquivo de modelo:
1 Selecione o modelo no painel Propriedades.
2 Clique no botão Excluir e confirme que deseja excluir o modelo.
Após excluir um arquivo de modelo, não será possível recuperá-lo. O arquivo de modelo será excluído do site. Os documentos que se baseavam neste modelo não serão desanexados do modelo. Eles conservarão a estrutura e as regiões editáveis que o arquivo de modelo possuía antes de ser excluído.
Para transformar tal documento em um arquivo HTML normal sem regiões editáveis ou bloqueadas, utilize Modificar> Modelos > Desanexar do modelo. Para obter mais informações, veja “Como desanexar um documento de um modelo”, na página 494.
Como trabalhar com propriedades e sites
Talvez seja conveniente procurar um arquivo no painel Site correspondente a uma propriedade no painel Propriedades. Esse procedimento pode ser útil, por exemplo: durante a transferência de uma propriedade para ou de um site remoto.
O painel Propriedades mostra todas as propriedades (dos tipos reconhecidos) no site atual. O site atual é aquele que contém o documento ativo. Para utilizar uma propriedade do site atual em outro site, copie-a no outro site. É possível copiar uma propriedade individual, um conjunto de propriedades ou uma pasta Favoritos inteira de uma só vez.
Observação: O painel Site pode exibir um site diferente daquele mostrado no painel Propriedades. Isso ocorre
porque o painel Propriedade está associado ao documento ativo. Para determinar qual site do painel Propriedades está em exibição, observe a barra de título do painel.
Para localizar um arquivo de propriedade no painel Site:
Clique com o botão direito do mouse e clique no nome da propriedade ou no ícone correspondente no painel Propriedades e selecione Localizar no site, no menu contextual. O painel do site é exibido com o arquivo de propriedade selecionado.
Localize no site não está disponível para cores e URLs que não correspondam aos arquivos do site. Observe que Localizar no site localiza o arquivo correspondente à propriedade e não um arquivo que a utiliza.
Para copiar as propriedades da lista Site ou Favoritos em outro site:
1 Clique com o botão direito do mouse e clique no ícone ou no nome de uma ou mais propriedades para copiá-la(s).
Na lista Favoritos, é possível copiar uma pasta Favoritos, bem como propriedades individuais (para obter informações sobre as pastas Favoritos, consulte “Como agrupar as propriedades na pasta Favoritos”, na página 466).
2 No menu contextual, escolha Copiar para o site e o nome do site de destino no submenu. O
submenu listará todos os sites que o usuário tiver definido.
As propriedades são copiadas no site especificado, nas localizações correspondentes àquelas no site atual. O Dreamweaver cria novas pastas na hierarquia do site de destino, se necessário. As propriedades também são adicionadas à lista Favoritos do site especificado.
Quando um documento for aberto no site de destino, o painel Propriedades alternará para este site e exibirá a propriedade copiada.
Observação: Se a propriedade copiada for uma cor ou URL, ela aparecerá na lista Favoritos e não na lista Site
do outro site. Isso ocorre porque não há qualquer arquivo correspondente à cor ou à URL. Portanto, nenhum arquivo poderá ser copiado no outro site.
Como gerenciar o painel Propriedades
Como padrão, as propriedades em uma determinada categoria são listadas por nomes em ordem alfabética. O nome da propriedade pode ser um nome de arquivo (como no caso das imagens), um número hexadecimal (por exemplo: cores) ou uma URL. As propriedades também podem ser classificadas por meio dos vários critérios.
Para listar as propriedades em uma ordem diferente:
Clique em um dos cabeçalhos de colunas.
Por exemplo: para classificar a lista de imagens por tipo, de modo que todas as imagens GIF, JPEG etc. sejam agrupadas, clique no cabeçalho de coluna Tipo.
Para alterar a largura de uma coluna:
1 Posicione o cursor sobre a linha que separa dois cabeçalhos de colunas. 2 Arraste esta linha para alterar a largura da coluna.
Configurar propriedades na lista de Favoritos
A maioria das operações do painel Propriedades são idênticas nas listas Site e Favoritos (consulte “Como utilizar o painel Propriedades”, na página 454). Contudo, há várias tarefas que podem ser executadas apenas na lista Favoritos.
Uma vez que a lista Site do painel Propriedades mostra todas as propriedades reconhecidas no site, esta lista torna-se muito longa no caso de alguns sites grandes. Se as propriedades utilizadas com freqüência forem adicionadas à lista Favoritos, as que tiverem relação entre si poderão ser agrupadas e receber nomes que lembrem sua função, para que sejam localizadas facilmente no painel Propriedades.
Observação: As propriedades favoritas não são armazenadas como arquivos separados no disco rígido. Na
verdade, são referências de propriedades existentes na lista Site. O Dreamweaver controla quais propriedades da lista Site serão exibidas na lista Favoritos.
Como adicionar e remover as propriedades da lista Favoritos Há várias maneiras de adicionar propriedades à lista Favoritos do site.
Para adicionar propriedades à lista Favoritos, siga um dos procedimentos abaixo:
•
Selecione uma ou mais propriedades na lista Site e clique no botão Adicionar à pasta Favoritos.•
Selecione uma ou mais propriedades na lista Site e escolha Adicionar à pasta Favoritos no menucontextual.
•
Clique com o botão direito do mouse e clique em um elemento na visualização do projeto da janela do documento, e selecione o comando no menu contextual para adicionar o elemento à categoria Favoritos apropriada.Por exemplo: pode ser selecionada uma imagem e escolhida a opção Adicionar à pasta de imagens favoritas, no menu contextual. Observe que o menu contextual correspondente ao texto conterá Adicionar à pasta de cores favoritas ou Adicionar à pasta de URLs favoritas, dependendo de o texto incluir ou não um link anexado. Observe também que apenas os elementos que se enquadrarem em uma das categorias no painel Propriedades poderão ser adicionados à lista Favoritos.
•
Selecione um ou mais arquivos no painel Site e escolha Adicionar à pasta Favoritos, no menu contextual. Os arquivos que não se enquadrarem em uma categoria no painel Propriedades serão ignorados.Independentemente do método escolhido, as propriedades serão adicionadas à lista Favoritos e o painel Propriedades exibirá esta lista.
Observação: Não há listas Favoritos para os modelos e itens de biblioteca.
Para remover propriedades da lista Favoritos:
1 Selecione uma ou mais propriedades (ou uma pasta Favoritos) na lista Favoritos. 2 Clique no botão Remover da pasta Favoritos na parte inferior do painel Propriedades.
As propriedades serão removidas da lista Favoritos, mas ainda aparecerão na lista Site. Se uma pasta Favoritos for removida, esta pasta e todas as propriedades nela contidas serão excluídas da lista Favoritos.
Como criar uma nova cor ou URL para adicionar à lista Favoritos
É possível utilizar o painel Propriedades para adicionar novas cores ou URLs à lista de favoritos. Observe que novas cores ou URLs podem ser adicionadas à lista Site, que contém apenas as propriedades que já estiverem em uso no site.
Para criar uma nova cor:
1 Clique no botão de categoria Cores.
2 Clique em Favoritos para exibir a lista Favoritos. 3 Clique no botão Nova cor.
4 Selecione uma cor utilizando o seletor de cores.
Para sair do seletor de cores sem escolher uma cor, pressione a tecla Esc ou clique na barra cinza, no alto do seletor. Para obter mais informações sobre o uso do seletor de cores, consulte “Como trabalhar com as cores”, na página 122.
5 Se desejar, dê um nome à cor.
Para criar uma nova URL:
1 Clique no botão de categoria URLs.
2 Clique em Favoritos para exibir a lista Favoritos. 3 Clique no botão Nova URL.
4 Digite uma URL e um apelido na caixa de diálogo Adicionar URL e clique em OK.
Como criar um apelido para uma propriedade favorita
As propriedades na lista Favoritos podem ter apelidos. O apelido é exibido no lugar do nome do arquivo ou do valor da propriedade. Por exemplo: se uma cor for chamada de #999900, deverá ser utilizado um apelido mais descritivo, cor_de_fundo_da_página ou cor_de_texto_importante. Apenas as propriedades da lista Favoritos podem ter apelidos. Na lista Site, as propriedades são listadas pelos seus nomes de arquivos reais (ou seus valores, no caso das cores e URLs).
Para dar nomes às propriedades favoritas:
1 Clique na categoria que contém a propriedade escolhida.
2 Clique em Favoritos para exibir a lista Favoritos. 3 Siga um dos procedimentos abaixo:
•
Clique com o botão direito do mouse e clique no nome da propriedade ou no ícone correspondente no painel Propriedades e escolha Editar o apelido, no menu contextual.•
Clique uma vez no nome da propriedade, faça uma pausa e clique nele novamente. Não cliqueduas vezes de uma só vez.
4 Digite um apelido para a propriedade, em seguida, pressione a tecla Enter. O apelido aparecerá na coluna Apelido.
Como agrupar as propriedades na pasta Favoritos
Em uma categoria da lista Favoritos, é possível criar e denominar grupos de propriedades, chamados de pastas Favoritos. Por exemplo: se houver um conjunto de imagens utilizadas em várias páginas de catálogos em um site de comércio eletrônico, elas poderão ser agrupadas em uma pasta chamada Imagens_de_catálogo.
Observação: A inserção de uma propriedade em uma pasta Favoritos não irá alterara localização do arquivo da
propriedade no disco rígido.
Para criar uma pasta Favoritos:
1 Clique em Favoritos (no alto do painel Propriedades) para exibir a lista Favoritos.
2 Clique no botão Nova pasta Favoritos. 3 Dê um nome à pasta.
4 Arraste as propriedades para a pasta.
Como trabalhar com itens de biblioteca
Uma biblioteca é um arquivo especial do Dreamweaver que contém uma coleção “propriedades” individuais ou cópias de propriedades criadas por você para serem inseridas nas páginas da Web. Se desejar apenas que as páginas tenham os mesmos cabeçalhos e rodapés, mas com layouts variáveis, utilize os itens de biblioteca para armazenar os cabeçalhos e rodapés. Os itens de biblioteca são elementos de página armazenados que podem ser reutilizados em diversas páginas. É possível atualizar todas as páginas que utilizam um item de biblioteca, sempre que desejar alterar o conteúdo do item.
É possível armazenar todos os tipos de elementos de página, como imagens, tabelas, sons e filmes Flash em uma biblioteca.
Ao utilizar um item de biblioteca, o Dreamweaver não insere o item de biblioteca na página da Web, em vez disso, insere um link ao item. Caso seja necessário alterar um item de biblioteca posteriormente, por exemplo: modificar algum texto ou uma imagem, a atualização do item de biblioteca automaticamente atualiza a instância da biblioteca em qualquer página na qual o item biblioteca foi inserido.
Tópicos relacionados
“Como criar um item de biblioteca”, na página 467
“Como inserir um item de biblioteca em um documento”, na página 468 “Como editar um item de biblioteca”, na página 468
Como criar, gerenciar e editar itens de biblioteca
As bibliotecas constituem uma maneira de armazenar elementos de páginas como, por exemplo: imagens, texto e outros objetos, que são reutilizados ou atualizados com freqüência no site da Web. Estes elementos são denominados itens de biblioteca.
Quando um item de biblioteca é colocado em um documento, o Dreamweaver insere uma cópia do código-fonte HTML correspondente ao item no documento e adiciona um comentário HTML com uma referência ao item externo original. A referência ao item externo da biblioteca possibilita a atualização simultânea do conteúdo de um site inteiro, por meio da alteração do item de biblioteca e, em seguida, da utilização dos comandos de atualização no submenu Modificar > Biblioteca.
O Dreamweaver armazena os itens de biblioteca na pasta Library localizada na pasta raiz local de cada site. Todos os sites possuem a sua própria biblioteca. Para copiar um item de biblioteca de um site para outro, utilize o comando Copiar para o site no painel Propriedades. Para obter mais informações, veja “Como utilizar a categoria Biblioteca do painel Propriedades”, na página 460.
Observação: Se o item de biblioteca contiver links, os links poderão não funcionar no novo site. Além disso, as
imagens de um item de biblioteca não serão copiadas para o novo site.
A seguir um exemplo de utilização de um item de biblioteca: suponha que esteja criando um site grande para uma empresa. O slogan da empresa deve aparecer em todas as páginas do site, mas o departamento de marketing ainda não se decidiu quanto aos detalhes do conteúdo do slogan. Se um item de biblioteca for criado para conter o slogan para ser utilizado em todas as páginas, quando o departamento de marketing fornecer o slogan final, você poderá alterar o item de biblioteca e automaticamente atualizar todas as páginas que o utilizarem.
Os itens de biblioteca também podem conter comportamentos, porém há requisitos especiais para a edição dos comportamentos nesses itens. Consulte “Como editar um comportamento em um item de biblioteca”, na página 471. Os itens de biblioteca não podem conter linhas de tempo ou folhas de estilos, porque o código correspondente a esses elementos integra a seção head (cabeçalho).
Como criar um item de biblioteca
É possível criar um item de biblioteca a partir de qualquer elemento na seção body de um documento, incluindo texto, tabelas, formulários, applets de Java, plugins, elementos ActiveX, barras de navegação e imagens.
No caso de itens vinculados, como as imagens, a biblioteca armazenará somente uma referência ao item. O arquivo original deverá permanecer no local especificado para que o item de biblioteca funcione corretamente. Mesmo assim, poderá ser útil armazenar uma imagem em um item de biblioteca, por exemplo: você pode armazenar uma tag img completa em um item de biblioteca, que permitiria alterar facilmente o texto alt da imagem, ou o seu atributo src no site inteiro. No entanto, não utilize esta técnica para alterar os atributos de width e height de uma imagem, a não ser que utilize também um editor de imagens para alterar o tamanho real da imagem.
Para criar um item de biblioteca:
1 Selecione uma parte de um documento para salvá-la como um item de biblioteca.
2 Siga um dos procedimentos abaixo:
•
Selecione Janela > Biblioteca e arraste a seleção para a categoria Biblioteca, no painel Propriedades.•
Na parte inferior do painel Propriedades (na categoria Biblioteca), clique no botão Novo item de biblioteca.•
Escolha Modificar > Biblioteca > Adicionar objeto à biblioteca.3 Digite um nome para o novo item de biblioteca.
Cada item de biblioteca será salvo como um arquivo separado (com extensão .lbi) na pasta Library da pasta raiz local do site.
Como inserir um item de biblioteca em um documento
Quando um item de biblioteca for adicionado a uma página, o conteúdo atual será inserido no documento juntamente com uma referência ao item de biblioteca.
Para inserir um item de biblioteca em um documento:
1 Coloque o ponto de inserção na janela do documento. 2 Escolha Janela > Biblioteca.
O painel Propriedades aparecerá exibindo a categoria Biblioteca.
3 Arraste um item de biblioteca do painel Propriedades até a janela do documento ou selecione
um item e clique no botão Inserir.
Para inserir o conteúdo de um item de biblioteca sem criar uma referência deste no documento, pressione a tecla Control enquanto arrasta um item para fora da categoria Biblioteca, no painel Propriedades. Se um item for inserido desta forma, você poderá editá-lo no documento, mas o documento não será atualizado ao atualizar as páginas que utilizam o item de biblioteca.
Como editar um item de biblioteca
Ao alterar um item de biblioteca, é possível atualizar todos os documentos que o utilizam. Se preferir não atualizar, os documentos permanecerão associados ao item de biblioteca. É possível atualizá-los mais tarde selecionando Modificar > Biblioteca > Atualizar as páginas.
Outros tipos de alterações aos itens de biblioteca incluem a sua renomeação, para romper a sua conexão com os documentos e modelos, a sua exclusão da biblioteca do site e a recriação de um item de biblioteca perdido.
Observação: O painel Estilos CSS e Linha de tempo estão disponíveis ao editar um item de biblioteca quando você
estiver editando um item de biblioteca, uma vez que estes itens podem contar apenas elementos body, sendo que o código de Linha de tempo e Folha de estilo CSS é inserido na seção head de um documento. A caixa de diálogo Propriedades de página também não estará disponível, porque um item de biblioteca não pode incluir uma tag body ou seus atributos.
Para editar um item de biblioteca:
1 Escolha Janela > Biblioteca.
A categoria Biblioteca é exibida no painel Propriedades.
2 Selecione um item de biblioteca.
A visualização do item de biblioteca é exibida no alto do painel Propriedades. Não é possível editar os elementos da visualização.
3 Na parte inferior do painel Propriedades, clique no botão Editar. De maneira alternativa, clique
duas vezes no item de biblioteca.
O Dreamweaver abrirá uma nova janela para a edição do item de biblioteca. Esta janela é semelhante a uma janela de documento, mas a sua visualização do projeto possui um fundo cinza, indicando a edição do item de biblioteca ao invés do documento.
4 Edite o item de biblioteca e, em seguida, salve as alterações.
5 Na caixa de diálogo que aparecer, escolha se deseja atualizar os documentos no site local que utilizam o item de biblioteca editado:
•
Selecione Atualizar, para atualizar todos os documentos no site local com o item de biblioteca editado.•
Escolha Não atualizar para evitar que os documentos sejam alterados até que você utilize Modificar > Biblioteca > Atualizar a página atual ou Atualizar as páginas.Para atualizar o documento atual de forma a utilizar a versão mais recente de todos os itens de biblioteca:
Selecione Modificar > Biblioteca > Atualizar a página atual.
Para atualizar o site inteiro ou todos os documentos que utilizarem um item de biblioteca específico:
1 Selecione Modificar > Biblioteca > Atualizar as páginas.
A caixa de diálogo Atualizar as páginas é exibida.
2 No menu pop-up Procurar em, siga um dos procedimentos abaixo:
•
Selecione Site inteiro e, em seguida, escolha o nome do site no menu pop-up adjacente. Este procedimento atualizará todas as páginas no site selecionado, para que utilizem a versão atual de todos os itens de biblioteca.•
Escolha Arquivos que utilizam e, em seguida, escolha um item de biblioteca no menu pop-up adjacente. Este procedimento atualizará todas as páginas no site atual que utilizarem o item de biblioteca selecionado.3 Verifique se a opção Itens de biblioteca está selecionada na opção Atualizar. Para atualizar os modelos simultaneamente, assegure-se de que a opção Modelos esteja selecionada. Para obter mais informações, consulte “Como atualizar documentos baseados em um modelo”, na página 495.
4 Clique em Iniciar.
Para renomear um item de biblioteca no painel Propriedades:
1 Clique no nome do item de biblioteca uma vez para selecioná-lo.
2 Após uma pequena pausa, clique novamente.
3 Quando o nome se tornar editável, digite um novo nome.
Observação: Este método funciona da mesma forma que a renomeação de um arquivo no Windows Explorer.
Do mesmo modo que no Windows Explorer ou Finder, certifique-se de fazer uma pequena pausa entre os cliques. Não clique duas vezes no nome, pois o item de biblioteca será aberto para edição.
4 Clique em outro local ou pressione a tecla Enter.
5 O Dreamweaver perguntará se você deseja atualizar os documentos que utilizam este item.
•
Para atualizar todos os documentos no site que utilizarem este item, clique em Atualizar.•
Para evitar a atualização de qualquer documento que utilizar este item, clique em Não atualizar.Para excluir um item de uma biblioteca:
1 Selecione o item na categoria Biblioteca, no painel Propriedades. 2 Clique no botão Excluir e confirme que deseja excluir o item.
Tenha cuidado ao excluir um item de biblioteca, pois não será possível utilizar o comando Refazer para recuperá-lo. No entanto, talvez você possa recriá-lo, como descrito no próximo procedimento.
A exclusão de um item remove-o da biblioteca, mas não altera o conteúdo de qualquer um dos documentos que utilizam o item.
Para recriar um item de biblioteca ausente ou excluído:
1 Selecione uma instância do item em um documento. 2 Clique no botão Recriar no inspetor de propriedades.
Como tornar editáveis os itens de biblioteca de um documento
Se tiver adicionado um item de biblioteca ao documento e desejar editá-lo especificamente em uma página, será necessário romper o link entre o item do documento e a biblioteca. Quando a instância do item de biblioteca tornar-se editável, essa instância não poderá ser atualizada quando o item de biblioteca tiver sido modificado.
Para tornar editável um item de biblioteca:
1 Selecione um item de biblioteca no documento atual.
2 Clique em Desanexar do original, no inspetor de propriedades.
A ocorrência selecionada do item de biblioteca perderá a cor de realce (se esta estiver visível) e não poderá mais ser atualizada quando o item de biblioteca original for alterado.
Como editar um comportamento em um item de biblioteca
Quando for criado um item de biblioteca que contém um elemento com um anexo de
comportamento, o Dreamweaver copiará o elemento e o seu manipulador de evento, o atributo que especifica o evento que iniciará a ação (como onClick, onLoad ou onMouseOver) e que ação deverá ser chamada quando ocorrer o evento, para o arquivo do item de biblioteca. O programa não copiará para o item de biblioteca as funções JavaScript associadas. Em vez disso, quando você inserir o item de biblioteca no documento, o Dreamweaver inserirá automaticamente as funções JavaScript apropriadas na seção head do documento (caso ainda não estejam na seção).
Observação: Se codificar manualmente o JavaScript (ou seja, se for criado sem utilizar os comportamentos do
Dreamweaver), você poderá integrá-lo a um item de biblioteca o comportamento Chamar o JavaScript for utilizado para executar o código. Se você não utilizar um comportamento do Dreamweaver para executar o código, este não será mantido como parte do item de biblioteca.
É preciso inicialmente inserir o item de biblioteca em um documento para editar o
comportamento na biblioteca e, em seguida, tornar editável o item no documento. Depois de fazer as alterações desejadas, é possível recriar o item de biblioteca substituindo o item na biblioteca pelo item editado do documento.
Para obter mais informações sobre os comportamentos, consulte “Como utilizar comportamentos JavaScript”, na página 375.
Para editar um comportamento em um item de biblioteca:
1 Abra um documento que contenha o item de biblioteca.
Anote o nome do item, bem como as tags que ele contém. Estas informações serão necessárias nas etapas 8 e 9.
2 Selecione o item de biblioteca e clique em Desanexar do original, no inspetor de propriedades.
3 Selecione o elemento que contém o comportamento anexado.
4 Escolha Janela > Comportamentos para abrir o painel Comportamentos. No painel
Comportamentos, clique duas vezes na ação que deseja alterar.
5 Na caixa de diálogo que aparecer, faça as alterações necessárias e clique em OK. 6 Escolha Janela > Biblioteca para abrir a categoria Biblioteca, no painel Propriedades.
7 Assegure-se de ter gravado o nome exato do item de biblioteca original. Em seguida, selecione
o item de biblioteca original e exclua-o clicando no botão Excluir no painel Propriedades.
8 Na janela do documento, selecione todos elementos que compõem o item de biblioteca. Selecione exatamente os mesmos elementos contidos no item de biblioteca original.
9 No painel Propriedades, clique no botão Novo item de biblioteca e denomine o novo item
utilizando o mesmo nome do que foi excluído na etapa 7.
Certifique-se de utilizar exatamente a mesma grafia e caixa alta ou baixa.
10 Para atualizar o item de biblioteca nos outros documentos do site, escolha Modificar >
Biblioteca > Atualizar as páginas.
11 Na caixa de diálogo Atualizar as páginas, no menu pop-up Procurar em, selecione Arquivos que utilizam.
13 Na opção Atualizar, certifique-se de que os itens de biblioteca tenham sido selecionados e, em seguida, clique em Iniciar.
14 Quando tiver concluído as atualizações, clique em Fechar para sair da caixa de diálogo
Atualizar as páginas.
Sobre os modelos do Dreamweaver
Um modelo de Dreamweaver é um tipo especial de documento utilizado para criar um layout de página “bloqueado”. O autor do modelo desenvolve o layout da página e cria regiões no modelo que são editáveis em documentos baseados em um modelo. Em um modelo, o designer controla quais elementos um usuário de modelo, como programadores, artistas gráficos ou outros desenvolvedores, podem editar. Para obter informações sobre como criar um modelo, veja “Como criar um modelo no Dreamweaver”, na página 477. Para obter mais informações sobre como criar uma página com base no modelo, veja “Como criar um documento de um modelo”, na
página 487.
Uma das principais e mais poderosa característica dos modelos é sua capacidade de atualizar diversas páginas simultaneamente. Um documento criado de um modelo permanece conectado àquele modelo (a menos que o documento seja posteriormente desanexado). É possível modificar um modelo e atualizar imediatamente o projeto em todos os documentos baseados nele. Um modelo controla as regiões fixas e editáveis de um documento com base em um modelo. Há vários tipos de regiões de modelo que podem ser incluídas em um documento. Para obter mais informações sobre estes tipos de regiões de modelo, veja “Como definir regiões de modelos”, na página 472.
É possível adicionar uma folha de estilo em cascata (CSS), linha de tempo ou comportamento a um documento baseado em um modelo, pois o Dreamweaver insere uma região editável automaticamente na seção head de um documento.
As operações relacionadas ao modelo (como adicionar regiões editáveis) são ativadas através dos modos Visualização de código e Visualização do projeto. Algum opções de personalização de modelos está disponível somente na visualização de código. Para obter mais informações sobre como adicionar expressões de modelo, consulte Como gravar uma expressão de modelo. Se desejar armazenar informações adicionais sobre um modelo como, por exemplo: o autor do modelo, a data da última alteração ou o motivo de certas decisões de layout, é possível criar um arquivo Design Notes para o modelo. Os documentos que se basearem no modelo não herdarão as Design Notes. Para obter mais informações, veja “Como salvar as informações sobre o arquivo contidas nas Design Notes”, na página 106.
Como definir regiões de modelos
Um modelo determina a estrutura básica de um documento e contém elementos como texto, imagens, layout de página, estilos e regiões editáveis.
O Dreamweaver bloqueia automaticamente a maioria das regiões de um documento ao salvar o documento como modelo. Como autor do modelo, você pode definir quais regiões de um documento baseado em modelo serão editáveis inserindo regiões editáveis ou parâmetros editáveis no modelo. Enquanto o arquivo de modelo estiver sendo criado, é possível alterar as regiões editáveis e regiões bloqueadas. Em um documento baseado no modelo, no entanto, um usuário do modelo pode efetuar alterações somente nas regiões editáveis. As regiões bloqueadas não podem ser modificadas.
Há quatro tipos de regiões de modelos: regiões editáveis, regiões repetidas, regiões opcionais e atributos de tags editáveis.
Região editáveil é uma região bloqueada em um documento baseado no modelo, ou seja, uma seção editável pelo o usuário do modelo. O autor do modelo pode definir qualquer área de um modelo como editável. Para que um modelo seja efetivo, deve conter uma região editável pelo menos, caso contrário, as páginas baseadas no modelo não poderão ser editadas. Para obter informações sobre uma região editável, veja “Como inserir uma região editável”, na página 479.
Região repetida é uma seção em um documento que pode ser repedita diversas vezes. Por exemplo: é possível repetir uma linha da tabela. Ao repetir a linha de uma tabela, permite-se que usuário do modelo crie uma lista de expansão, enquanto mantém o projeto sob controle do autor do modelo. Em um documento baseado no modelo você poderá utilizar opções de controle de regiões repetidas para adicionar ou excluir cópias da região repetida. Há dois tipos de regiões repetidas você podem ser inseridas em um modelo: região repetida e tabela repetida. Para obter mais informações sobre como inserir uma região repetida em um modelo, veja “Como criar uma região repetitiva em um modelo”, na página 481. Para obter informações sobre como criar uma tabela repetida, veja “Como inserir uma tabela repetitiva”, na página 481. Para obter mais informações sobre como inserir uma região repetida ema página baseada em um modelo, veja “Como adicionar, excluir modificar a ordem de uma entrada de região repetitiva”, na página 490.
Região opcional é uma seção de um modelo que um designer define como opcional, para armazenar conteúdo como texto opcional ou uma imagem que podem ou não aparecer em um documento baseado no modelo. Na página baseada no modelo, o editor do conteúdo controla se o conteúdo deve ser exibido ou não, normalmente. Para obter mais informações sobre como definir regiões repetidas em um modelo, veja “Como inserir uma região opcional”, na página 485. Para obter mais informações sobre como definir regiões opcionais em uma página baseada em um modelo, veja “Como modificar parâmetros de modelo da região opcioinal”, na página 490.
Um atributo de tag editável permite desbloquear um atributo de tag em um modelo, de modo que o atributo possa ser editado em uma página baseada em modelo. Por exemplo: é possível “bloquear” a imagem que aparece no documento, mas permitir que o autor da página defina o alinhamento à esquerda, direita ou centralizado. Para obter mais informações sobre como definir atributos de tags editáveis, consulte “Como definir atributos de tags editáveis em um modelo”, na página 483. Para obter mais informações sobre como editar as tags em uma página baseada em um modelo, veja “Como modificar propriedades do modelo”, na página 488.
Sobre parâmetros de modelos
É possível utilizar parâmetros de modelo para definir as regiões opcionais, atributos de tags editáveis ou definir valores transferidos a um documento anexado.
Como criar um parâmetro de modelo e permitir definir valores para controle de conteúdo em documentos baseados em um modelo. Para cada parâmetro é possível definir um nome, tipo de dados e um valor padrão. Cada parâmetro deve ter um nome único e deve reconhecer maiúsculas e minúsculas.
Os parâmetros de modelo são repassados ao documento como parâmetros de instância e podem ser acessados pelo comando Modificar > Propriedades do modelo. Na maioria dos casos, o usuário do modelo pode editar o valor padrão do parâmetro para personalizar o que aparece no
Para editar o código fora das tags HTML
Alguns scripts de servidor são inseridos bem no início ou no final do documento (antes da tag
<html> ou após a tag</html>). Esses scripts requerem tratamento especial em modelos e documentos baseados em modelos. Normalmente, se você fizer alterações no código do script antes da tag <html> ou após a tag </html> em um modelo, as alterações não serão copiadas aos documentos baseados neste modelo. Isto pode causar erros de servidor se outros scripts de servidor dependessem dos scripts que não foram copiados dentro do corpo principal do modelo. Como resultado, o Dreamweaver o adverte se uma alteração for feitas nos scripts antes da tag
<html> ou após a tag </html> em um modelo.
Para evitar este problema, insira o código a seguir na seção head do modelo:
<!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->
Quando este código estiver presente em um modelo, as alterações feitas nos scripts antes da tag <html>
ou após a tag </html> serão copiadas aos documentos baseados naquele modelo. No entanto, não será permitido editar esses scripts em documentos baseados no modelo. Assim, você pode escolher entre editar os scripts no modelo ou em documentos baseados no modelo, mas não em ambos.
Sobre links em modelos
Para criar um link em um arquivo de modelo, utilize o ícone de pasta ou o ícone do indicador de arquivos no inspetor de propriedades. Não digite o nome do arquivo a ser vinculado. Se você digitar o nome, o link não funcionará como esperado. Esta seção explica como o Dreamweaver manipula os links em modelos.
Ao criar um arquivo de modelo de uma página existente, salve a página como modelo. O Dreamweaver atualizará os links de modo que apontem para os mesmos arquivos que antes. Uma vez que os modelos são salvos na pasta Templates, o caminho para o link relativo ao documento é modificado ao salvar a página como modelo. No Dreamweaver, ao criar um novo documento baseado naquele modelo e salvar o novo documento, todos os links relativos ao documento são atualizados de modo que continuem apontando para os arquivos corretos.
Ao adicionar um link relativo a documento em um arquivo de modelo, mesmo o caminho for digitado na caixa de texto do link no inspetor de propriedades, é possível digitar um caminho incorreto por engano. O caminho correto é o caminho da pasta Templates ao documento vinculado, e não o caminho da pasta do documento baseado no modelo ao documento vinculado. Para obter mais informações sobre como vincular usando o ícone do indicador de arquivos, consulte “Vinculação de arquivos e documentos”, na página 436.
Observação: Em alguns casos (como, por exemplo: caminhos de arquivos em manipuladores de eventos nos
modelos) não será possível utilizar o ícone de pasta ou o ícone indicador de arquivos. Nesses casos, digite o caminho correto manualmente.
Como exibir modelos no modo de visualização do projeto
Em arquivos de modelos e documentos baseados em modelos, as regiões editáveis aparecerão na visualização do projeto da janela do documento entre contornos retangulares, na cor de realce apropriada. (Para obter mais informações sobre como definir as preferências de cores de destaque, consulte Definir preferências de destaque de modelos na ajuda do Dreamweaver). Uma pequena guia aparecerá no canto superior esquerdo de cada região editável exibindo o nome de cada região editável. As regiões de modelos também incluem uma borda destacada. O conteúdo das regiões editáveis e bloqueadas pode ser alterado.
Os arquivos de modelos podem ser identificados pelo título <<Template>> e extensão de arquivo .dwt na janela Documento.
Como exibir modelos no modo de visualização do projeto
Na visualização de código é possível efetuar alterações tanto no código-fonte editável como no código HTML bloqueado em um modelo. O conteúdo editável é assinalado no HTML com os comentários <!-- TemplateBeginEditable> e <!-- TemplateEndEditable -->. Qualquer texto entre esses comentários é editável nos documentos baseados no modelo. O código-fonte HTML para a região editável do exemplo anterior se parece como no exemplo a seguir:
<table width="75%" border="1" cellspacing="0" cellpadding="0"> <tr bgcolor="#333366">
<td>Name</td>
<td><font color="#FFFFFF">Address</font></td>
<td><font color="#FFFFFF">Telephone Number</font></td> </tr> <!-- TemplateBeginEditable name="LocationList" --> <tr> <td>Enter name</td> <td>Enter Address</td> <td>Enter Telephone</td> </tr> <!-- TemplateEndEditable --> </table>
Exibir documentos baseados no modelo na visualização do projeto
Nos documentos baseados em modelos, além dos contornos de regiões editáveis, a página inteira estará circundada por um contorno de cor diferente com uma guia no canto superior direito mostrando o nome do modelo no qual o documento se baseia. Este retângulo realçado está presente para lembrar que o documento se baseia em um modelo e que nada poderá ser modificado fora das regiões editáveis.
Observação: Se você tentar editar uma região bloqueada em um documento com base em modelo quando o
realce estiver desativado, o ponteiro do mouse se modificará, indicando que não é possível clicar na região bloqueada.
Exibir documentos baseados no modelo na visualização do projeto
Na visualização de código, as regiões editáveis de um documento derivadas de um modelo são exibidas com uma cor diferente do código nas regiões não editáveis. É possível alterar os códigos das regiões editáveis ou parâmetros editáveis.
O conteúdo editável é marcado no HTML com os comentários do Dreamweaver
<!-- InstanceBeginEditable> e <!-- InstanceEndEditable -->. Todos os textos entre esses comentários são editáveis.
O código-fonte HTML de uma região editável, poderá ter a seguinte aparência:
<!-- InstanceBeginEditable name="head" --> <!-- InstanceEndEditable -->
</head>
<body bgcolor="#FFFFFF" leftmargin="0">
<table width="75%" border="1" cellspacing="0" cellpadding="0"> <tr bgcolor="#333366">
<td>Name</td>
<td><font color="#FFFFFF">Address</font></td>
<td><font color="#FFFFFF">Telephone Number</font></td> </tr> <!-- InstanceBeginEditable name="LocationList" --> <tr> <td>Enter name</td> <td>Enter Address</td> <td>Enter Telephone</td> </tr> <!-- InstanceEndEditable --> </table> </body> <!-- InstanceEnd -->
A configuração padrão para textos não editáveis é cinza. É possível definir uma cor diferente para as regiões editáveis e não editáveis na caixa de diálogo Preferências. Selecione Editar > Preferências e selecione Codificação por cores. Para obter mais informações, consulte Definição de preferências para um documento de modelo na ajuda do Dreamweaver.
Observação: O Dreamweaver evita a digitação nas regiões bloqueadas na visualização de código da janela
Documento.
Como criar um modelo no Dreamweaver
É possível criar um modelo de documento existente (como um documento HTML, ColdFusion da Macromedia ou Active Server Pages da Microsoft) ou criar um modelo de um novo
documento novo em branco.
A caixa de diálogo Novo documento (Arquivo > Novo) fornece várias opções para a criação de novos modelos e de páginas baseadas em modelos. Para obter informações, consulte “Como trabalhar com a caixa de diálogo Novo documento”, na página 116.
O Dreamweaver salva os modelos com a extensão de arquivo. dwt. Os modelos são salvos em uma pasta especial chamada Templates na pasta raiz local do site. Se a pasta Templates ainda não existir no site, o Dreamweaver criará a pasta quando você salvar um novo modelo.
Observação: Não remova os modelos da pasta Templates e não coloque arquivos que não sejam modelos nesta
pasta. Além disso, não mova a pasta Templates da pasta raiz local. Ao fazer isto, você estará provocando erros nos caminhos dos modelos.
Tópicos relacionados
“Como salvar um documento como modelo”, na página 478 “Como inserir uma região editável”, na página 479
Como salvar um documento como modelo
É possível criar um modelo de documento novo ou de um documento existente.
Se uma região de modelo for inserida em um documento que não foi salvo como modelo, o Dreamweaver advertirá que o documento será salvo automaticamente como modelo.
Para criar um modelo:
1 Abra o documento que deseja salvar como um modelo na janela de documento efetuando um dos procedimentos a seguir:
•
Para abrir um documento existente, selecione Arquivo >Abrir e selecione o documento.•
Para abrir um novo documento em branco, escolha Arquivo > Novo. Na caixa de diálogo quese abre, selecione Páginas básicas ou Páginas dinâmicas. Na lista de documentos selecione o tipo de página com a qual deseja trabalhar e clique em Criar.
2 Quando o documento for aberto, escolha Arquivo > Salvar como modelo.
Observação: A menos que a opção Não notificar novamente for selecionada, surgirá uma advertência
informando que o documento que está sendo salvo não possui nenhuma região editável. Clique em OK para salvar o documento como modelo ou clique em Cancelar para sair dessa caixa de diálogo sem criar um modelo.
3 Na caixa de diálogo que aparece, selecione um site para salvar o modelo no menu pop-up Site e digite um nome exclusivo para o modelo na caixa de texto Salvar como.
4 Clique em Salvar.
O arquivo de modelo será salvo na pasta Templates com a extensão .dwt.
Para criar um novo modelo no painel Propriedades:
1 Abra o painel Propriedades (Janela > Propriedades ou F11), caso não esteja aberto. 2 Selecione a categoria Modelos.
3 Clique no botão Novo modelo no painel Propriedades.
Um novo documento novo é adicionado à lista Nome. O nome do documento é realçado.
4 Digite um nome para o documento.
5 Clique no botão Editar no painel Propriedades.
O documento de modelo se abre na janela do documento.
Como criar regiões editáveis
As regiões editáveis dos modelos controlam as áreas de uma página baseada em modelo que podem ser editadas.
É possível marcar como editável uma tabela inteira ou uma célula de tabela, no entanto, não é possível marcar várias células de tabela como uma única região editável. Se a tag <td> for selecionada, a região editável incluirá a região ao redor da célula, caso contrário, a região editável afetará o conteúdo dentro da célula.
As camadas e o seu conteúdo são elementos separados. Ao tornar uma camada editável, sua posição, assim como o seu conteúdo, podem ser alterados e ao tornar o conteúdo da camada editável permitirá alterar somente o conteúdo da camada e não a sua posição. Para selecionar o conteúdo da camada, clique na camada e selecione Editar > Selecionar tudo. Para selecionar a camada, certifique-se de que os elementos invisíveis estejam aparecendo e clique no ícone que representa o local da camada. Para obter mais informações sobre as camadas, consulte “Animação de camadas”, na página 407.
Como inserir uma região editável
Antes de inserir uma região editável, salve o documento atual como modelo. Se você inserir uma região editável em um documento em vez de um arquivo de modelo, o Dreamweaver o advertirá que o documento será salvo automaticamente como modelo.
Para definir uma região de modelo editável:
1 Na janela do documento, siga um dos procedimentos abaixo para selecionar a região:
•
Selecione o texto ou conteúdo a ser definido como uma região editável.•
Coloque o ponto de inserção onde deseja inserir uma região editável.2 Siga um dos procedimentos abaixo para inserir uma região editável:
•
Selecione Inserir > Objetos de modelos > Nova região editável.•
Clique com o botão direito do mouse (no Windows) no texto selecionado e no escolha Nova região editável no menu contextual.•
Na barra Inserir, selecione Modelos e clique no botão Região editável. A caixa de diálogo Região editável é exibida.3 Na caixa de texto Nome, digite um nome único para a região. Em um determinado modelo,
não é possível utilizar o mesmo nome para mais de uma região editável.
Observação: Não é permitido utilizar caracteres especiais no campo Nome.
4 Clique em OK.
A região editável é inserida em um contorno retangular realçado no modelo com a cor de destaque definida em preferências. Para obter mais informações sobre como definir as preferências de cores de destaque, consulte Definir preferências de destaque de modelos na ajuda do Dreamweaver.
Uma guia no canto superior esquerdo da região mostra o nome da região. Se uma região editável vazia for inserida no documento, o nome da região também aparecerá dentro da
Como remover uma região editável
Se você marcar uma região do arquivo de modelo como editável e, subseqüentemente, desejar bloqueá-la (torná-la não-editável) novamente, utilize o comando Remover a região editável.
Observação: Não é possível bloquear uma região em um arquivo com baseado em modelo. Só é possível bloquear
uma região em um arquivo de modelo.
Para remover uma região editável:
1 No documento ou no seletor de tags, selecione a região editável a ser modificada.
2 Escolha Modificar > Modelos > Remover o markup do modelo. A região não será mais editável.
Como criar regiões repetitivas
Uma região repetitiva adiciona diversas cópias da região selecionada em um documento baseado em modelo. Você pode utilizar regiões repetitivas para controlar o layout de regiões que deseja repetir em uma página, como um item de catálogo e layout descritivo ou repetir uma linha de dados, como uma lista de itens.
Há dois objetos de modelo de região repetitiva que podem ser utilizados:
Região repetitiva permite repetir uma região, mas não inclui uma região editável. No entanto, é possível inserir uma região editável em uma região repetitiva para torná-la editável.
O exemplo a seguir mostra uma região repetitiva em um modelo. Em um documento baseado neste modelo, o usuário pode repetir linha realçada da tabela para ampliá-la.
Tabela repetitiva permite definir uma tabela e definir onde as regiões editáveis se encontram em
cada célula na região repetitiva. Defina as opções para controlar quais linhas serão incluídas na região repetitiva.
Tópicos relacionados
“Como criar uma região repetitiva em um modelo”, na página 481 “Como inserir uma tabela repetitiva”, na página 481
Como criar uma região repetitiva em um modelo
Uma região repetitiva é uma seção de um modelo que pode ser duplicada quantas vezes quanto necessário em uma página baseada em modelo. As regiões repetitivas são normalmente utilizadas com tabelas, no entanto, também é possível definir uma região repetitiva para outros elementos da página.
Uma região repetitiva não é uma região editável. Para tornar editável o conteúdo de uma região repetitiva (por exemplo: permitir a um usuário digitar texto em uma célula da tabela), é necessário inserir uma região editável na região repetitiva. Para obter mais informações sobre a criação de regiões repetitivas, veja “Como inserir uma região editável”, na página 479. Para obter mais informações sobre a criação de tabelas repetitivas editáveis, veja “Como inserir uma tabela repetitiva”, na página 481.
Como inserir uma região repetitiva em um modelo:
1 Na janela do documento, siga um dos procedimentos abaixo:
•
Selecione o texto ou conteúdo a ser definido como uma região repetitiva.•
Coloque o ponto de inserção onde deseja inserir a região repetitiva no documento.2 Siga um dos procedimentos abaixo para criar uma região repetitiva:
•
Selecione Inserir > Objetos de modelos > Região repetitiva.•
Clique com o botão direito do mouse e clique no conteúdo selecionado e selecione Nova região repetitiva no menu contextual.•
Na categoria Modelos da barra Inserir, clique no botão Região repetitiva. A caixa de diálogo Região repetitiva é exibida.3 Na caixa de texto Nome, digite um nome único para a região de modelo (não é possível utilizar o mesmo nome para mais de uma região repetitive em um modelo).
Observação: Não utilize caracteres especiais ao nomear uma região.
4 Clique em OK.
A região repetitiva será selecionada no documento.
Observação: Uma região repetitiva não é editável no documento baseado no modelo, a menos que contenha
uma região editável. Para obter mais informações sobre como inserir uma região editável, veja “Como inserir uma região editável”, na página 479.
Como inserir uma tabela repetitiva
Você pode utilizar tabelas repetitivas para definir uma região repetitiva que inclui regiões editáveis em um formato de tabela. É possível definir atributos da tabela e definir quais células da tabela são editáveis.
Para inserir uma tabela repetitiva:
1 Na janela do documento, coloque o ponto de inserção onde deseja inserir a tabela repetitiva no
