Home

Dreamweaver 3.0

image

Contents

1. 205 Como criar uma imagem cambi vel ccciciiiiiiiiiiio 208 Como trabalhar com os arquivos HTML do Fireworks 209 Como criar os mapas de imagens cicccciiiciiciiciis 211 Como aplicar comportamentos a imagens cccccccioo 214 CAP TULO 8 Como car tabelas casisessirss ara pesadas 215 Como inserir uma tabela nonan n nanne iss 216 Como selecionar os elementos da tabela ccccccccct 219 Como formatar as tabelas ccccccccccicccrcr cera 221 Como copiar e colar c lulas onnon uun 226 Como redimensionar as tabelas e c lulas nnn nnnnnnnannna ana 228 Como adicionar e remover as linhas e colunas cc 229 Como ordenar as tabelas ccccccccccic crer 233 Como exportar os dados da tabela ccciiciicccci 234 CAP TULO 9 Como utilizar as camadas cresccsreca medas 235 Como criar as camadas cccccccccccc screen 236 Como manipular as camadas ccicciiiiiciiciis 243 Como alterar a ordem de empilhamento de camadas 248 Como alterar a visibilidade de uma camada ccccccccc 249 Sobre as camadas e tabelas onnon nunnan nnno 249 Sobre as linhas de tempos sacer eres iatodeisii i randira yuo 253 A es de comportamentos para controlar as linhas de tempo 263 ndice 5 6 ndice CAP TULO 10 Como utilizar as molduras s ocrircrrrissessresyss 265 Como criar as molduras n nonan anenee oer
2. Escolha dentre as seguintes op es de apar ncia Utilize o menu pop up Horiz para definir o alinhamento horizontal do conte do de uma c lula coluna ou linha O conte do pode ser alinhado esquerda direita no centro ou com o padr o do navegador normalmente esquerda para as c lulas normais e centralizado para as c lulas de cabe alho Utilize o menu pop up Vert para definir o alinhamento vertical do conte do de uma c lula coluna ou linha O conte do pode ser alinhado no alto no meio embaixo na linha de base ou com o padr o do navegador normalmente no meio Os campos L e U especificam a largura e altura das c lulas selecionadas em pixels Para utilizar percentagens coloque um sinal de percentual ap s o valor Para definir uma imagem de fundo para uma c lula coluna ou linha utilize o campo Fundo no alto Clique no cone correspondente pasta para procurar uma imagem tamb m poss vel digitar o caminho da imagem ou utilizar o cone do indicador de arquivos Para definir a cor do fundo de uma c lula coluna ou linha utilize o campo Fundo embaixo poss vel utilizar o seletor de cores ou digitar o c digo hexadecimal correspondente cor escolhida Para definir uma cor de borda para as c lulas utilize a op o Borda Escolha dentre as seguintes op es de layout Clique no bot o Mesclar as c lulas para combinar as c lulas linhas ou colunas selecionadas e cri
3. D 100 arquivo Cl sites scaal site product foods html Como arrastar o cone do indicador de arquivos de um arquivo selecionado na exibi o do Mapa do site at um arquivo na exibi o dos Arquivos do site da janela do site Para obter mais informa es sobre a exibi o de um mapa de site consulte Como exibir os sites locais na p gina 80 Como criar v nculos a uma ncora com nome As ncoras com nome marcam determinadas posi es em um documento Utilize as para estabelecer um v nculo com uma determinada rea no documento atual ou em outro diferente Com frequ ncia as ncoras com nome s o utilizadas para levar um usu rio a um t pico espec fico ou para o in cio de um documento fazendo o chegar rapidamente posi o selecionada A cria o de um v nculo a uma ncora com nome um processo em duas etapas Primeiro crie uma ncora com nome e em seguida crie um v nculo a essa ncora Nota As ncoras com nome s o sens veis a mai sculas e min sculas Para criar uma ncora com nome 1 Na janela do documento posicione o ponto de inser o no local onde deseja inserir a ncora com nome 2 Siga um dos procedimentos abaixo e Escolha Inserir gt ncora com nome e Pressione as teclas Ctrl Alt A no Windows ou Command Option A no Macintosh e No painel Invis veis da paleta de objetos clique no bot o ncora 3 No campo Nome da ncora da caixa de di logo Inserir n
4. cccci 137 CAP TULO 5 Gerenciamento AGO coabrsrinndesd rrit ases 139 Como configurar um site remoto ccccciiiiciiciicis 140 Sobre a janela do site cccccciiccii cics secreta 144 Como utilizar o sistema de devolu es e retiradas 148 Como obter e colocar os arquivos ccccciiiciicciiiis 151 Como sincronizar os arquivos nos sites local e remoto 154 Como buscar e substituir cccciccciccciiiccricrraa 156 Como criar sites para v rios navegadores cccccicioo 164 Como utilizar os comportamentos para detectar os navegadores E PluS AS sta ie va ps ESA OAA ds RS E 165 Como testar O Ste pasa us eae doa dp a Sandra ra 166 Sobre as Design Notes spaid rurresd teesien cics rsrsrs 172 CAP TULO 6 Como formatar O teto usunssssanda secas mada 177 Como formatar o texto com os r tulos HTML 178 Como criar listas sis mais a re ra sad ea ra cara RR RE ES 183 Como formatar o texto com os estilos HTML ccc 184 Como formatar o texto com as folhas de estilos CSS 188 Como converter os estilos CSS em markup HTML 196 Como verificar a ortografia ccccicciciiics cics 198 CAP TULO 7 Como inseririmagens aasasru aaaea er raaa 199 Como inserir uma imagem s n usss srn reune r rnrn rrn 200 Como definir as propriedades da imagem cccccccioo 201 Como utilizar um editor de imagens externo
5. Para criar os submenus aninhe um par de r tulos de abertura e finaliza o MENU dentro de um menu Ou seja insira um novo par lt MENU gt lt MENU gt em um menu em seguida adicione novos itens de menu entre esses r tulos Para inserir um separador entre dois itens de menu Digite lt SEPARATOR gt entre os dois r tulos MENUITEM Para remover um separador existente exclua a linha correspondente a lt SEPARATOR gt Sobre a sintaxe dos itens de menu Abaixo est o os atributos do r tulo MENUITEM NAME o nome do item que aparece no menu Um sinal de sublinhado indica que a letra seguinte o mem nico do comando apenas no Windows Necess rio ID utilizado pelo Dreamweaver para identificar o item O r tulo ID deve ser nico em toda a estrutura do menu Se forem adicionados novos itens ao arquivo menus xml utilize o nome de sua empresa ou uma outra segii ncia de caracteres nica como um prefixo para cada identifica o de item de menu a fim de assegurar a exclusividade Necess rio KEY o atalho de teclado para o comando se houver algum Utilize estas sequ ncias para especificar as teclas modificadoras e Cmd especifica a tela Control no Windows ou Command no Macintosh Alte Opt respectivamente especificam a tecla Alt no Windows ou Option no Macintosh Shift especifica a tecla Shift em ambas as plataformas Ctrl especifica a tecla Control em ambas as plataformas e Um sinal de adi
6. M Inserir linha na tabela Excluir a linha da tabela Mesclar as c lulas selecionadas da tabela N Nova janela no Nova p gina apenas no Nova pasta do site Windows Windows Nova p gina no Macintosh 6 Abrir Abrir na moldura id Abrir o arquivo selecionado do site P Executar o comando Formato do par grafo Executar o plug in Executar todos os plug ins gravado Q Sair bij R Importar Tornar raiz Justificar direita Mostrar ocultar as r guas S Salvar Salvar tudo Dividir a c lula da tabela 420 Ap ndice A Caractere do Control no Control Shift no Control Alt Control Shift Alt teclado Windows ou Windows ou no Windows ou no Windows ou Command no Command Shift Command Command Macintosh no Macintosh Option no Shift Option no Macintosh Macintosh T Quick Tag Editor Mostrar os t tulos das Inserir tabela Adicionar objeto linha de p ginas no Mapa do site tempo U Prefer ncias Colocar os arquivos ou Devolver os arquivos ou pastas selecionadas pastas selecionadas V Colar Colar como texto Criar uma nova regi o bj edit vel Ww Fechar Exibir o conte do do E h cabe alho X Recortar Iniciar o comando de Parar o plug in Parar todos os plug ins grava o Y Refazer Mostrar ocultar o hi ki v nculo Z Desfazer Refazer O zero Definir o formato do x x x par grafo como Nenhum 1 Aplicar o Cabe alho 1 i id ao par grafo 2 Aplicar o Cabe a
7. Orig exibe o nome e a localiza o do arquivo de origem do item de biblioteca Abrir abre o arquivo de origem do item de biblioteca Desanexar do original rompe o v nculo entre o item de biblioteca selecionado e o seu arquivo de origem Quando um item for desanexado ele deixar de ser um item de biblioteca tornando se edit vel Tamb m poss vel escolher Desanexar do original no menu contextual para desanexar um item da biblioteca Recriar substitui o item de biblioteca original pela sele o atual Utilize esta op o para recriar os itens de biblioteca se o arquivo de biblioteca n o estiver presente o nome do item for alterado ou caso o item tenha sido editado Modelos e bibliotecas 377 378 Cap tulo 14 Como utilizar a paleta de bibliotecas A paleta de bibliotecas exibe todos os itens contidos no arquivo de bibliotecas do site local atual Para exibir a paleta de bibliotecas Escolha Janela gt Biblioteca Para adicionar um item de biblioteca a um documento siga um dos procedimentos abaixo e Selecione e arraste um item da lista Paleta de bibliotecas at o documento e Selecione um item da lista Paleta de bibliotecas e no menu contextual escolha Adicionar p gina Para abrir um item de biblioteca e Na lista Paleta de bibliotecas clique no item de biblioteca a ser aberto com o bot o direito do mouse no Windows ou clique nele mantendo a tecla Control pressionada no Macintosh e no menu conte
8. e escolha Alterar a propriedade no menu pop up A es 3 No menu pop up Tipo de objeto escolha o tipo de objeto cuja propriedade deseja alterar O menu pop up Objeto com nome passar a listar todos os objetos com nome do tipo selecionado Como utilizar os comportamentos 309 310 Cap tulo 12 4 Escolha um objeto no menu pop up Objeto com nome 5 Escolha uma propriedade no menu pop up Propriedade ou digite o nome da propriedade no campo de texto Para poder examinar as propriedades que podem ser alteradas em cada navegador escolha navegadores diferentes no menu pop up de navegadores Se estiver digitando o nome de uma propriedade certifique se de utilizar o nome correto da propriedade JavaScript e lembre se de que as propriedades JavaScript s o sens veis a mai sculas min sculas 6 Digite o novo valor da propriedade no campo Novo valor e clique em OK 7 Verifique se o evento padr o corresponde ao desejado Quando o evento ocorrer a a o ser executada e a propriedade alterada Se n o corresponder escolha um outro evento no menu pop up Se os eventos desejados n o estiverem listados altere o navegador de destino no menu pop up Eventos de Verificar o navegador Utilize a a o Verificar o navegador para enviar os visitantes a outras p ginas dependendo da marca e vers o do seu navegador Por exemplo poss vel optar por enviar os usu rios para uma p gina se eles estiverem utilizando a vers o 4
9. na p gina 391 Como personalizar a interpreta o e a apar ncia dos r tulos de outros fabricantes A tecnologias de processamento de servidor como ASP PHP ColdFusion e JSP utilizam um c digo especial diferente de HTML nos arquivos HTML os servidores criam e trabalham com o conte do HTML com base nesse c digo Ao encontrar os r tulos diferentes de HTML o Dreamweaver os compara com as informa es nos arquivos de r tulos de outros fabricantes que definem como o programa l e exibe os r tulos diferentes de HTML Por exemplo os arquivos ASP Active Server Pages cont m o c digo a ser interpretado pelo servidor Esse c digo definido por um par de delimitadores ele inicia com a sequ ncia lt e termina com gt A pasta Configuration ThirdParty Tags do Dreamweaver cont m um arquivo chamado ASP xml que descreve o formato do c digo ASP e define como o Dreamweaver o exibir Devido maneira como o c digo ASP especificado no arquivo ASP xml o Dreamweaver n o tenta interpretar o que estiver entre os delimitadores inicial e final Voc pode configurar os seus pr prios r tulos e criar arquivos de banco de dados de r tulos para definir como o Dreamweaver os ler e exibir A cria o dos arquivos de banco de dados de r tulos s o particularmente teis quando for usado um sistema de markup de servidor diferente de ASP ColdFusion ou PHP crie um novo arquivo de banco de dados de r tulos para cada um
10. para adicionar um par de par metros name value Em seguida digite o nome do par metro no campo Nome e o valor do par metro no campo Valor Repita esta etapa para cada par metro 5 Para remover um par metro selecione o na lista Par metros e clique no bot o de subtra o 6 Quando terminar de digitar os par metros clique em OK para inserir o objeto do Generator Para editar os par metros depois que o objeto do Generator tiver sido inserido utilize o inspetor de origem de HTML O servidor do Generator tentar obter valores de um arquivo de banco de dados para a inser o no modelo se n o houver um banco de dados dispon vel o servidor usar os pares name value fornecidos por voc durante a inser o do objeto Como inserirm dia 291 292 Cap tulo 11 Como inserir o conte do de plug ins do Netscape Navigator Os plug ins aprimoram o funcionamento do Netscape Navigator possibilitando maneiras de exibir o conte do de m dia em diversos formatos Depois de criar o conte do de um plug in do Navigator poss vel utilizar o Dreamweaver para inseri lo em um documento HTML O Dreamweaver utiliza o r tulo EMBED para marcar a refer ncia ao arquivo de conte do Para inserir o conte do de plug ins do Navigator 1 Na janela do documento coloque o ponto de inser o onde deseja inserir o conte do 2 Clique no bot o Plug in na paleta de objetos 3 Na caixa de di logo que aparecer selecione um arq
11. poss vel utilizar as camadas para criar com rapidez desenhos de p gina complexos e em seguida converter as camadas em tabelas para que possam ser utilizadas em navegadores da vers o 3 0 que n o oferecem suporte a camadas Tamb m poss vel aprimorar o layout e otimizar o desenho da p gina movimentando se entre as diversas camadas e tabelas As camadas n o podem ser convertidas em tabelas ou vice versa em um modelo de documento ou em um documento ao qual tiver sido aplicado um modelo Crie o documento original e converta o antes de salv lo como um modelo Se estiver criando uma p gina visando apenas os navegadores das vers es 4 0 e mais avan ados utilize uma combina o de tabelas e camadas inclusive animando as Para obter informa es sobre anima o de camadas consulte Sobre as linhas de tempo na p gina 253 Se desejar gerar arquivos compat veis com os navegadores das vers es 3 0 a partir do arquivo atual utilize as op es de convers o do menu Arquivo Consulte Como converter para obter compatibilidade com a vers o 3 0 na p gina 252 Como utilizar as camadas 249 Como utilizar as camadas para criar tabelas Ao desenhar tabelas voc poder achar mais f cil criar uma p gina utilizando camadas e em seguida converter o layout da camada em um layout de tabela Para converter camadas em uma tabela 1 Escolha Modificar gt Modo de layout gt Converter as camadas em tabela 2 Na caixa de d
12. Mantendo pressionada a tecla Alt no Windows ou as teclas Option e Shift no Macintosh clique em uma moldura na janela do documento Talvez seja necess rio pressionar a tecla Alt no Windows ou Command no Macintosh mais a tecla de seta para cima para selecionar o conjunto de molduras Escolha Modificar gt Propriedades da p gina No campo T tulo digite um nome para o documento Como especificar os tamanhos das molduras Arraste a borda de uma moldura na janela do documento a fim de definir os tamanhos aproximados das molduras em seguida utilize o inspetor de propriedades para especificar a quantidade de espa o que o navegador reservar para uma moldura quando o tamanho da tela n o permitir que as molduras sejam exibidas no tamanho em que foram criadas Para especificar os tamanhos das molduras 1 Clique na borda de uma moldura para selecionar o conjunto de molduras Escolha Exibir gt Bordas da moldura se as bordas n o estiverem vis veis No inspetor de propriedades clique na seta de expans o para exibir todas as propriedades Na caixa Sele o de lin col clique na linha ou coluna a ser alterada Cor da borda FE RO Unidades Sele o de Pixels X lintcol Para especificar como o espa o ser alocado quando a janela do navegador for redimensionada digite um n mero na caixa Valor e escolha uma dentre as seguintes op es de Unidades Pixels define o tamanho da coluna ou linh
13. O Dreamweaver exibe cones que identificam os blocos de c digo Cold Fusion Markup Language CFML ou Active Server Page ASP na janela do documento sempre que poss vel Nota Como padr o o Dreamweaver nunca regrava o HTML encontrado nos arquivos ColdFusion ou Active Server Para editar um bloco de c digo ASP na janela do documento 1 Clique no marcador amarelo de ASP para selecion lo 2 No inspetor de propriedades clique no bot o Editar 3 Edite o c digo ASP na caixa de di logo que parecer e em seguida clique em OK Para editar um bloco de c digo CFML na janela do documento 1 Clique no marcador de CEML para selecion lo 2 No inspetor de propriedades siga um dos procedimentos abaixo e Clique no bot o Atributos para editar os atributos existentes do r tulo e seus valores ou para adicionar novos e Clique no bot o Conte do para editar o conte do que aparecer entre os r tulos CEML de abertura e finaliza o Se o r tulo selecionado estiver vazio ou seja n o houver um r tulo de finaliza o o bot o Conte do estar desativado Caso n o haja marcadores ou texto real ado onde existe c digo ASP ou CEML primeiro certifique se de que a op o Exibir gt Elementos invis veis esteja ativada Se esta op o estiver selecionada e mesmo assim os cones n o aparecerem o Dreamweaver n o pode exibir o c digo como CFML ou ASP Isto pode acontecer por exemplo quando r tulos condicionais forem
14. o 139 locais e remotos 74 locais como criar 77 locais como exibir 80 locais pasta raiz 77 local como associar a um servidor remoto com 140 local como localizar arquivos no 156 remoto como configurar 140 remoto como definir 140 remoto como localizar arquivos no 156 remoto como resolver problemas de configura o 143 remoto pasta raiz 142 remotos como definir 140 remotos op es de acesso 141 sites locais Consulte sites 77 sites remotos Consulte sites som como executar 322 sublinhado 179 submenu Estilo 179 Sum rio Ajuda 11 T tabelas atalhos 413 c lulas como dividir 232 colunas linhas e c lulas 224 como adicionar bordas a 222 como adicionar cor de fundo a 223 como adicionar e remover linhas e colunas 229 como adicionar imagens de fundo a 223 como adicionar o conte do a 217 como ajustar as linhas e colunas 228 como alinhar 224 como alterar a largura das colunas 228 como aninhar 230 como converter a partir de camadas 250 como criar 216 como formatar 221 como limpar a largura e altura das c lulas 229 como mesclar as c lulas 232 como ordenar 233 como redimensionar 228 como selecionar os elementos 219 formatos predefinidos de 225 largura como definir 222 op o Sem quebra 225 propriedades 222 r tulos HTML 221 vis o geral 215 Consulte tamb m colunas linhas e c lulas tamanho da p gina como redimensionar para que caiba no monitor 65 tamanho do monitor como redimensionar as
15. o das camadas permite alinhar reposicionar ou redimension las O redimensionamento das camadas permite alterar as dimens es de uma nica camada ou tornar iguais as alturas e larguras de duas ou mais camadas Diversos inspetores de propriedades aparecer o dependendo de voc estar trabalhando com uma nica ou v rias camadas Consulte Como definir as propriedades das camadas na p gina 239 e Como definir as propriedades de camadas m ltiplas na p gina 242 Quando forem selecionadas camadas m ltiplas o menu Modificar exibir as op es Camadas e Pontos ativos Para evitar que as camadas se sobreponham quando forem movidas ou redimensionadas utilize a op o Evitar sobreposi es Consulte Como evitar as sobreposi es de camadas na p gina 251 Como ativar as camadas Ative uma camada para poder inserir objetos nela A ativa o de uma camada coloca o ponto de inser o em seu interior real a a sua borda e exibe a al a de sele o mas n o seleciona a camada Para ativar uma camada Clique em qualquer ponto dentro da camada Como utilizar as camadas 243 244 Cap tulo 9 Como selecionar as camadas Selecione uma ou mais camadas para alinh las tornar iguais as suas larguras e alturas reposicion las etc Para obter uma lista completa de op es consulte Como definir as propriedades das camadas na p gina 239 Para selecionar uma camada siga um dos procedimentos abaixo
16. 1 Escolha Editar os tamanhos no menu pop up Tamanho da janela 2 Clique em qualquer dos valores de Largura e Altura na lista Tamanhos de janela e digite um novo valor Para que a janela do documento se ajuste a uma largura espec fica mantendo a altura inalterada selecione um valor de Altura e exclua o 3 Clique no campo Descri o para inserir um texto descritivo sobre um tamanho espec fico Para adicionar um novo tamanho ao menu pop up Tamanho da janela 1 Escolha Editar os tamanhos no menu pop up Tamanho da janela 2 Clique no espa o em branco abaixo do ltimo valor na coluna Largura 3 Digite os valores de Largura e Altura 4 Clique no campo Descri o para inserir um texto descritivo sobre o tamanho adicionado Por exemplo voc poder digitar SVGA ou PC comum pr ximo entrada de um monitor de 800 x 600 pixels e Mac de 17 polegadas pr ximo entrada de um monitor de 832 x 624 pixels Observe que a maioria dos monitores pode ser ajustada de acordo com diversas dimens es de pixels Princ pios b sicos do Dreamweaver 65 66 Cap tulo 2 Como definir as prefer ncias da barra de status Utilize as prefer ncias da barra de status para definir as op es da barra de status situada na parte inferior da janela do documento Para exibir estas prefer ncias escolha Editar gt Prefer ncias e selecione Barra de status Tamanhos da janela permite personalizar os tamanhos da janela que apa
17. Em c digo HT ML a ordem de empilhamento ou ndice Z determina a ordem segundo a qual as camadas ser o desenhadas em um navegador O ndice Z pode ser alterado para cada camada utilizando o inspetor de propriedades ou a paleta de camadas Para alterar a ordem de empilhamento das camadas com o inspetor de propriedades 1 Escolha Janela gt Camadas para abrir a paleta de camadas e examinar a ordem de empilhamento atual 2 Selecione uma camada na paleta ou na janela do documento 3 No inspetor de propriedades da camada digite um n mero no campo ndice Z e Digite um n mero mais alto para mover a camada at uma posi o inferior na ordem de empilhamento e Digite um n mero mais baixo para mover a camada at uma posi o superior na ordem de empilhamento Para alterar a ordem de empilhamento das camadas na paleta de camadas Escolha Janela gt Camadas para abrir a paleta de camadas Na paleta de camadas siga um dos procedimentos abaixo e Na coluna Z clique no n mero da camada que estiver sendo alterada Digite um n mero mais alto que o existente para mover a camada para uma posi o inferior na ordem de empilhamento ou digite um n mero mais baixo para mover a camada at uma posi o inferior na posi o de empilhamento e Selecione e arraste uma camada para cima ou para baixo de acordo com a ordem de empilhamento desejada Aparecer uma linha medida que a camada for movida Solte o bot o do mouse quan
18. Os filmes Flash e os outros elementos que se baseiam em vetores s o inteiramente redimension veis e n o perdem a qualidade quando a sua escala for modificada Como inseririmagens 203 204 Cap tulo 7 Os elementos dos mapas de bits como as imagens GIF JPEG e PNG podem tornar se mal definidos ou distorcidos caso os atributos WIDTH e HEIGHT sejam redefinidos Mantenha a tecla Shift pressionada durante o redimensionamento de um mapa de bits para manter as mesmas propor es Contudo recomendamos que esses elementos sejam redimensionados visualmente no Dreamweaver apenas para determinar o layout Quando tiver sido determinado o tamanho da imagem edite o arquivo em um aplicativo de edi o de imagens A edi o da imagem tamb m poder reduzir o seu respectivo tamanho de arquivo e por consegii ncia o tempo de descarga Para redimensionar um elemento 1 Selecione o elemento uma imagem ou filme Shockwave por exemplo na janela do documento Aparecer o al as de redimensionamento nas partes inferior e direita do elemento e no canto inferior direito Se as al as de redimensionamento n o aparecerem clique fora do elemento a ser redimensionado e em seguida escolha o novamente ou clique em lt img gt no seletor de r tulos para selecionar o elemento 2 Redimensione o elemento seguindo um dos procedimentos abaixo e Para ajustar a largura do elemento arraste a al a de sele o no lado direito e Para ajustar a altura d
19. ltima camada selecionada Tornar igual a largura das camadas selecionadas Tornar igual a altura das camadas selecionadas Converter as camadas em tabela Converter as tabelas em camadas Alternar a prefer ncia de aninhamento ao criar uma camada Alternar a exibi o da grade Encaixar na grade Adicionar quadro prim rio Linha de tempo Remover um quadro prim rio Linha de tempo Control Shift clique Shift Control arraste Enquanto mant m a tecla Shift pressionada clique na camada Teclas de seta Shift teclas de seta Control teclas de seta Control Shift teclas de seta Control teclas de seta Acima Abaixo A esquerda A direita Control Shift 9 Control Shift 8 Control Shift F6 Control F6 Control arraste Control Shift Alt G Control Akt G Shift F9 Delete Command Shift clique Command Shift arraste Enquanto mant m a tecla Shift pressionada clique na camada Teclas de seta Shift teclas de seta Option teclas de seta Option Shift teclas de seta Command teclas de seta Acima Abaixo A esquerda A direita Command Shift 9 Command Shift 8 Shift F6 Command Command F6 Command arraste Command Shift Option G Command Option G Shift F9 Delete Como trabalhar com as linhas de tempo A o No Windows No Macintosh Adicionar objeto linha de tempo Control Shift Alt T Command Shift Option T Como trabalhar com as imagens A o
20. na p gina 396 Observe que as seguintes op es exceto Ignorar a caixa de afetam apenas os novos documentos e inclus es na janela do documento aos documentos j existentes Ou seja quando um documento HTML que tiver sido criado anteriormente for aberto estas op es de formata o n o ser o aplicadas a ele para reformatar os documentos HTML existentes utilize o comando Aplicar a formata o de origem Consulte Como formatar o c digo de origem de HTML nos documentos existentes na p gina 351 Nota Estas op es destinam se apenas s altera es feitas na janela do documento quando o HTML for editado diretamente no inspetor de origem de HTML elas n o se aplicar o Recuo ativa o recuo de todos os r tulos marcados com INDENT no arquivo SourceFormat txt Consulte Como editar o perfil de formata o da origem de HTML na p gina 396 Utilizar especifica se os recuos ser o feitos com espa os ou tabula es Linhas e colunas da tabela recua automaticamente os r tulos TR e TD para facilitar a leitura do c digo da tabela A op o Recuo deve estar selecionada para que esta op o funcione Como editar o HTML 347 348 Cap tulo 13 Molduras e conjuntos de molduras recua automaticamente os r tulos FRAME e FRAMESET aninhados para facilitar a leitura dos arquivos do conjunto de molduras A op o Recuo deve estar selecionada para que esta op o funcione Tamanho do recuo determina o tamanho dos re
21. Arizona pira A Candlelight Walk through the Orchards Monterey California i Esta sele o tem a forma retangular por isso as c lulas podem ser mescladas a Honey Festival Featuring the Sonoma Strings Califomia Sonoma sa a Pear Canning Demonstration Bend Oregon 00040 Benefit for Southwest Chamber Ensemble Scottsdale Arizona ET Candlelight Walk through the Orchards Monterey California Esta sele o da tabela n o tem a forma retangular por isso as c lulas n o podem ser mescladas 2 Escolha Modificar gt Tabela gt Mesclar as c lulas ou clique no bot o Mesclar as c lulas no inspetor de propriedades O conte do das c lulas individuais ser colocado na c lula mesclada resultante As propriedades da primeira c lula selecionada ser o aplicadas c lula mesclada Para dividir uma c lula mesclada 1 Clique na c lula ou selecione a 2 Escolha Modificar gt Tabela gt Dividir as c lulas ou clique no bot o Dividir as c lulas no inspetor de propriedades 3 Na caixa de di logo Dividir a c lula escolha se a c lula ser dividida em linhas ou colunas e em seguida digite o n mero de linhas ou colunas Como ordenar as tabelas Uma ordena o simples da tabela pode ser executada atrav s da classifica o com base no conte do de uma coluna poss vel tamb m realizar uma ordena o da tabela mais complexa classificando a em rela o a duas colunas N o poss vel ordenar as tab
22. Enter Shift Enter Control Shift barra de espa o Arraste o item selecionado para o novo local Enquanto mant m a tecla Control pressionada arraste o item selecionado at o novo local Control Shift C Control Shift V Clique duas vezes Control Shift B Control Tab Control Shift Shift F7 Return Shift Return Option barra de espa o Arraste o item selecionado para o novo local Enquanto mant m a tecla Option pressionada arraste o item selecionado at o novo local Command Shift C Command Shift V Clique duas vezes Command Shift B Control Tab ou Option Tab Command Shift Shift F7 Atalhos de teclado 411 412 Ap ndice A Como formatar o texto A o No Windows No Macintosh Recuo Control 9 Command 9 Remover o recuo Control 8 Command 8 Formato gt Nenhum Control 0 zero Command 0 zero Formato do par grafo Control Shift P Command Shift P Aplicar os cabe alhos 1 a 6 a um Control 1 a 6 Command 1 a 6 par grafo Alinhamento gt esquerda Control Alt L Command Option L Alinhamento gt No centro Control Alt C Command Option C Alinhamento gt direita Control Alt R Command Option R Tornar negrito o texto selecionado Control B Command B Tornar it lico o texto selecionado Control I Command I Editar a folha de estilos Control Shift E Command Shift E Nota Muitos atalhos de formata o de texto n o t m qualquer efeito quando estiver
23. Exibi o do mapa do site gt Atualizar o local no Macintosh Como criar e modificar os v nculos na exibi o do mapa do site poss vel modificar a estrutura do site no respectivo mapa adicionando alterando e removendo v nculos O mapa do site ser atualizado automaticamente exibindo as altera es feitas no site Para adicionar um v nculo siga um dos procedimentos abaixo e Arraste uma p gina do Windows Explorer ou do Localizador do Macintosh e solte a em uma p gina do mapa do site e Selecione uma p gina HTML e escolha Site gt V nculo a um arquivo existente no Windows ou Site gt Exibi o do mapa do site gt V nculo a um arquivo existente no Macintosh ou escolha V nculo a um arquivo existente no menu contextual e Selecione uma p gina HTML no mapa do site Aparecer o cone do indicador de arquivos Clique e arraste o cone at o objeto a ser vinculado um arquivo na Exibi o de arquivos um documento do Dreamweaver aberto na rea de trabalho ou uma ncora com nome em um documento aberto na rea de trabalho Consulte Como criar v nculos com o cone do indicador de arquivos na p gina 116 Para alterar um v nculo Na exibi o do mapa do site selecione a p gina cujo v nculo est sendo alterado e escolha Site gt Alterar o v nculo no Windows ou Site gt Exibi o do mapa do site gt Alterar o v nculo no Macintosh Procure o arquivo ou digite uma URL V nculos e na
24. O Dreamweaver pode atualizar os v nculos de e para um documento sempre que este for transferido ou renomeado em um site local Esse recurso funciona melhor quando o site inteiro ou toda uma se o aut noma deste estiver armazenado na unidade local Nenhuma altera o ser feita nos arquivos que estiverem no site remoto at que os arquivos locais sejam colocados ou devolvidos ao servidor remoto Para ativar o gerenciamento de v nculos no Dreamweaver 1 Escolha Editar gt Prefer ncias e em seguida selecione Geral 2 Selecione Sempre ou Solicitar no menu pop up Atualizar os v nculos e clique em OK Se for escolhida a op o Sempre o Dreamweaver atualizar automaticamente todos os v nculos para e de um documento selecionado sempre que este for movido ou renomeado Para obter instru es espec ficas sobre o que fazer quando um arquivo for exclu do consulte Como alterar um v nculo no site inteiro na p gina 135 Quando for escolhida a op o Solicitar o Dreamweaver exibir primeiramente uma caixa de di logo que cont m uma lista de todos os arquivos afetados pela altera o Clique em Atualizar para atualizar os v nculos nesses arquivos ou em N o atualizar para deix los inalterados Se a op o devolver retirar estiver ativada o Dreamweaver tentar retirar automaticamente o arquivo antes de efetuar qualquer altera o Para tornar mais r pido o processo de atualiza o o Dreamweaver pode cria
25. O resumo cont m a localiza o do problema sob a forma de n meros de linha e coluna para que seja localizada a corre o e assegurada a sua interpreta o adequada Nunca regravar o HTML Em Arquivos com as extens es permite fazer com que o Dreamweaver n o regrave o HT ML nos arquivos com as extens o de nome de arquivo especificadas Esta op o particularmente til para os tipos de arquivos que cont m r tulos de outros fabricantes como os r tulos ASP Para obter mais informa es consulte Como impedir a regrava o de r tulos de outros fabricantes na p gina 407 As duas op es de Caracteres especiais permitem controlar a codifica o do Dreamweaver de certos caracteres em determinados contextos Em geral melhor manter estas op es selecionadas a menos que os arquivos contenham r tulos espec ficos de outros fabricantes que utilizam esses caracteres Para obter mais informa es sobre estas op es consulte Como impedir a regrava o de r tulos de outros fabricantes na p gina 407 Como definir as prefer ncias de formato HTML Utilize as seguintes prefer ncias de formato HTML para controlar a formata o de HTML como recuo tamanho da linha e mai scula ou min scula para os nomes do r tulos e atributos quando os documentos forem criados Para obter informa es sobre os controles de formata o de HTML adicionais consulte Como editar o perfil de formata o da origem de HTML
26. Registro do FTP no Macintosh Como sincronizar os arquivos nos sites local e remoto Depois que os arquivos forem criados nos sites local e remoto poss vel sincroniz los Utilize o comando Site gt Sincronizar para transferir as vers es mais recentes dos seus arquivos de e para o site remoto Caso o site remoto seja um servidor de FTP em vez de um servidor de rede a sincroniza o dos seus arquivos utilizar o FTP Para obter mais informa es sobre o uso do FTP consulte Como associar um servidor remoto a um site local na p gina 140 Antes de sincronizar os sites o Dreamweaver permite verificar quais arquivos ser o colocados ou obtidos no servidor remoto O programa tamb m confirmar quais arquivos foram atualizados ap s o t rmino da sincroniza o Para ver quais arquivos s o mais recentes no site local ou no site remoto sem sincroniza o escolha Editar gt Selecionar um local mais novo ou Editar gt Selecionar um remoto mais novo no Windows na janela do site ou Site gt Exibi o dos arquivos do site gt Selecionar um local mais novo ou Site gt Exibi o dos arquivos do site gt Selecionar um remoto mais novo no Macintosh Para sincronizar os arquivos 1 Se forem sincronizados arquivos ou pastas espec ficas em vez do site inteiro selecione esses arquivos ou pastas no painel local ou remoto da janela do site 2 Escolha Site gt Sincronizar na janela do site no Windows ou na ba
27. T picos da Ajuda da Extens o dos Shift F1 Shift F1 recursos do Dreamweaver Dreamweaver on line Control F1 Command F1 Atalhos de teclado 419 Matriz de atalhos de teclado Nota Um asterisco indica uma combina o de teclas n o utilizada O texto em it lico indica comandos ao n vel do sistema Caractere do Control no Control Shift no Control Alt Control Shift Alt teclado Windows ou Windows ou no Windows ou no Windows ou Command no Command Shift Command Command Macintosh no Macintosh Option no Shift Option no Macintosh Macintosh A Selecionar tudo Inserir coluna na tabela Inserir ncora com nome Selecionar a tabela N Negrito alternar Adicionar biblioteca Cc Copiar Copiar apenas o texto Justificar no centro hi D Duplicar Obter os arquivos ou Inserir filme Shockwave Retirar os arquivos ou pastas selecionados Director pastas selecionadas E Iniciar o editor externo Editar a folha de estilos F Localizar Inserir filme Flash G Localizar novamente h Encaixar na grade Mostrar ocultar as grades apenas no Macintosh alternar H Substituir Trazer para frente Mover para tr s Enviar para tr s l It lico alternar Mostrar invis veis Inserir a imagem alternar J Propriedades da p gina Inspetor de E propriedades alternar K Prefer ncias Vincular a um arquivo a existente L Criar v nculo Remover o v nculo Justificar esquerda
28. Tamb m poss vel utilizar o inspetor de propriedades para definir a cor do fundo de uma camada A sele o da cor pode ser feita atrav s do seletor de cores ou da digita o do c digo hexadecimal da cor 1 Clique na borda da camada que cont m o texto para selecion la Quando a camada for selecionada aparecer o al as ao seu redor No inspetor de propriedades clique na caixa Cor do fundo Aparecer o a paleta de cores e o cone de conta gotas poss vel utilizar o conta gotas para escolher qualquer cor na rea de trabalho vis vel al m das cores da paleta de cores Mova o cone correspondente ao seletor de cores at o logotipo da Scaal e clique na cor dourada que circunda a letra S A cor do fundo da camada ser atualizada gam our story products this week Tutorial do Dreamweaver 35 36 Cap tulo 1 Posicionar as camadas Agora que o desenho da p gina foi conclu do tendo a organizado com camadas voc converter as camadas em um layout de tabela para que a p gina possa ser exibida para os usu rios com navegadores da vers o 3 0 Quando as camadas forem convertidas em uma tabela o Dreamweaver criar colunas linhas e c lulas da tabela a fim de acomodar as camadas p gina Para reduzir o n mero de colunas linhas e c lulas da tabela resultantes da convers o do layout do documento alinhe os elementos das camadas antes de converter o documento Utilize o ins
29. Utilize as prefer ncias de paletas flutuantes para especificar quais paletas e inspetores dever o aparecer sempre na frente da janela do documento e quais poder o ser obscurecidos pela janela do documento Utilize tamb m este painel de prefer ncias para especificar as paletas e inspetores que aparecer o no Iniciador Todos os itens que aparecem no Iniciador aparecer o tamb m no Mini iniciador Para especificar o local em que cada paleta aparecer em rela o janela do documento 1 Escolha Editar gt Prefer ncias e em seguida selecione Paletas flutuantes na lista de categorias Como padr o todas as janelas paletas e inspetores s o selecionados de maneira a aparecerem na frente da janela do documento 2 Cancele a sele o das janelas paletas e inspetores que dever o aparecer na parte de tr s da janela do documento Por exemplo se desejar que a janela do documento obscure a o inspetor de origem de HTML cancele a sele o da op o HTML A partir de agora o inspetor de origem de HTML aparecer na frente da janela do documento somente quando for ativado Da mesma forma se preferir que a janela do documento obscure a quaisquer paletas flutuantes que tiver adicionado ao personalizar o Dreamweaver cancele a sele o de Todos os outros flutuadores Princ pios b sicos do Dreamweaver 63 64 Cap tulo 2 Sobre a janela do documento A janela do documento exibe o documento atual aproximadamente com a mesm
30. associadas aos v nculos Barra de menus a rea da janela do navegador no Windows ou da rea de trabalho no Macintosh onde aparecem os menus Arquivo Editar Exibir Ir e Ajuda Defina explicitamente esta op o se desejar que o usu rio possa navegar a partir da nova janela Se voc n o definir esta op o o usu rio poder apenas fechar ou minimizar a janela no Windows ou fechar a janela ou sair do aplicativo no Macintosh a partir da nova janela Barras de rolagem se necess rias especifica o aparecimento das barras de rolagem se o conte do ultrapassar a rea vis vel Se voc n o definir esta op o explicitamente as barras de rolagem n o aparecer o Se a op o Al as de redimensionamento tamb m estiver desativada o usu rio n o poder exibir o conte do que ultrapassar o tamanho original da janela Al as de redimensionamento especifica que o usu rio poder redimensionar a janela arrastando o canto inferior direito da mesma ou clicando no bot o de maximiza o no Windows ou na caixa de dimensionamento no Macintosh situada no canto superior direito Se esta op o n o estiver definida explicitamente os controles de redimensionamento n o estar o dispon veis e o canto inferior direito da janela n o poder ser arrastado Nome da janela o nome da nova janela D um nome nova janela se desejar atribuir v nculos a ela ou control la com JavaScript 5 Clique em OK 6 Verifique se o
31. cio da ordem de empilhamento Cancele a sele o de todas as camadas para permitir que a linha de tempo controle a ordem de empilhamento ou a visibilidade Como utilizar as camadas 259 260 Cap tulo 9 Como utilizar m ltiplas linhas de tempo Em vez de tentar controlar todas as a es em uma p gina com uma linha de tempo mais f cil trabalhar com linhas de tempo individuais que controlam partes distintas da p gina A p gina tamb m poder incluir elementos interativos que acionam diversas linhas de tempo Para gerenciar v rias linhas de tempo utilize as seguintes op es e Para criar uma nova linha de tempo escolha Modificar gt Linha de tempo gt Adicionar linha de tempo e Para remover uma linha de tempo escolha Modificar gt Linha de tempo gt Remover a linha de tempo e Para renomear uma linha de tempo escolha Modificar gt Linha de tempo gt Renomear a linha de tempo ou digite um novo nome no menu pop up Linha de tempo e Para exibir uma outra linha de tempo no inspetor de linhas de tempo escolha uma nova linha de tempo no menu pop up Linha de tempo no inspetor de linhas de tempo Como copiar e colar as anima es Quando a segii ncia de anima o o satisfizer copie e cole a em outra rea da linha de tempo em outra linha de tempo do mesmo documento ou em uma linha de tempo de outro documento Tamb m poss vel copiar e colar v rias segii ncias simultaneamente Para recortar ou copiar
32. cone do indicador de arquivos para selecionar um arquivo ou digitar o seu caminho e Utilize o menu contextual escolha Criar v nculo e em seguida selecione um arquivo a ser vinculado Como criar v nculos a um documento Utilize o inspetor de propriedades para vincular uma imagem objeto ou texto a outro documento ou a uma se o espec fica de um documento Esta se o cont m informa es sobre uma maneira apenas de vincular documentos para obter informa es sobre outras t cnicas de criar v nculos consulte Como criar v nculos com o cone do indicador de arquivos na p gina 116 e Como criar e modificar os v nculos na exibi o do mapa do site na p gina 131 Para criar v nculos entre documentos 1 Selecione o texto ou uma imagem na janela do documento 2 Abra o inspetor de propriedades Janela gt Propriedades e siga um dos procedimentos abaixo RO ymw S oo Hom Destino Y i Formato Nenhum z Fonte padr o z Iam Nenhum z E e Clique no cone correspondente pasta direita do campo V nculo para procurar e selecionar um arquivo O caminho para o documento vinculado aparecer no campo URL Utilize o menu pop up Relativo a na caixa de di logo Selecionar o arquivo HTML para escolher se o caminho ser relativo a documento ou raiz e em seguida clique em Selecionar Nota Quando o tipo de caminho for alterado no campo Relativo a o Dreamweaver def
33. descarreguem o plug in Se o conte do do plug in n o for uma parte essencial da p gina n o selecione essa op o Esta op o se aplica apenas ao Internet Explorer o Netscape Navigator sempre capaz de detectar plug ins 7 Clique em OK 8 Verifique se o evento padr o corresponde ao desejado Se n o corresponder escolha um outro evento no menu pop up Se os eventos desejados n o estiverem listados altere o navegador de destino no menu pop up Eventos de Controlar o Shockwave ou Flash Utilize a a o Controlar o Shockwave ou Flash para executar parar rebobinar ou ir para um quadro de um filme Shockwave ou Flash Para poder utilizar a a o Controlar o Shockwave ou Flash 1 Escolha Inserir gt M dia gt Shockwave ou Inserir gt M dia gt Flash para inserir um filme Shockwave ou Flash respectivamente 2 Escolha Janela gt Propriedades e digite o nome de um filme no campo de texto mais esquerda necess rio dar um nome ao filme para poder anexar a a o Controlar o Shockwave ou Flash 3 Como filme selecionado na janela do documento abra o inspetor de comportamentos 4 Clique no bot o com o sinal de adi o e escolha Controlar o Shockwave ou Flash no menu pop up A es 5 Escolha um filme no menu pop up Objeto Shockwave O Dreamweaver automaticamente listar todos os arquivos terminando em der dir swf ou spl que estiverem contidos nos r tulos OBJECT ou EMBED do documento
34. e Se dois estilos forem aplicados ao mesmo texto o navegador exibir todos os atributos de ambos os estilos a menos que os atributos espec ficos sejam conflitantes Por exemplo um estilo poder especificar azul para a cor do texto enquanto o outro poder definir vermelho e Se os atributos de dois estilos aplicados ao mesmo texto forem conflitantes o navegador exibir o atributo do estilo mais pr ximo quele do texto Se houver um conflito direto os atributos dos estilos CSS aplicados com o atributo CLASS anular o os dos estilos de r tulos HTML No exemplo seguinte o estilo definido para H1 deve especificar a fonte o tamanho ea cor para todos os par grafos H1 mas o estilo CSS personalizado Azul aplicado a esse par grafo anula a defini o de cor no estilo H1 O segundo estilo CSS personalizado Vermelho anular o Azul porque ele est contido no estilo Azul lt H1 gt lt SPAN CLASS Azul gt Este par grafo est controlado pelo estilo personalizado Azul e pelo estilo de r tulo HTML H1 lt SPAN CLASS Vermelho gt Exceto pelo fato de esta senten a ser controlada pelo estilo Vermelho lt SPAN gt Agora estamos de volta ao estilo Azul lt SPAN gt lt H1 gt Como utilizar a paleta de estilos CSS Utilize a paleta de estilos CSS para aplicar os estilos CSS personalizados sele o atual Essa paleta exibe apenas os estilos CSS classes personalizados os estilos redefinidos de r tulos HTML e de se
35. e daquela onde est o documento atual preceda o nome do arquivo por onde significa um n vel acima na hierarquia da pasta Por exemplo suponha que o site tenha esta estrutura my site root folder support contents html hours html resources tips html products catalog html e index html home page Para estabelecer um v nculo de contents html a outros arquivos Para estabelecer um v nculo de contents html a hours html ambos os arquivos est o na mesma pasta o nome do arquivo o caminho relativo hours html e Para vincular a tips html na subpasta chamada Resources utilize o caminho relativo resources tips html Cada barra inclinada representa mover um n vel abaixo na hierarquia de pastas e Para vincular a index html na pasta m e um n vel acima de contents html utilize o caminho relativo index html Cada representa mover um n vel acima na hierarquia de pastas e Para vincular a catalog html em uma subpasta da pasta m e utilize o caminho relativo products catalog html A move um n vel acima em dire o pasta m e products move um n vel para baixo na subpasta products V nculos e navega o 111 112 Cap tulo 4 Nota Salve sempre um novo arquivo antes de criar um caminho relativo a documento j que esse caminho n o ser v lido sem um ponto de partida definido Se voc criar um caminho relativo a documento antes de salv
36. em ess ncia id ntica ao documento my scaal home por m a formata o das imagens e do texto j foram adicionadas Existem diversas maneiras de se definir a home page de um site A maneira mais f cil de se definir uma home page atrav s da utiliza o do menu contextual 1 Clique na barra de t tulo da janela do site se esta estiver vis vel ou escolha Janela gt Arquivos do site 2 Na lista Pasta local na janela do site localize o arquivo DW3 scaal home html Clique com o bot o direito do mouse no cone no Windows ou pressione a tecla Control e clique no cone no Macintosh correspondente ao arquivo DW3 scaal home html 3 No menu contextual escolha Definir como home page 4 Clique no cone correspondente ao Mapa do site na rea superior esquerda da janela do site Tutorial do Dreamweaver 47 48 Cap tulo 1 A janela do site aparecer e contar agora com duas exibi es do site local o mapa do site esquerda representa graficamente a estrutura atual do site da Scaal com a p gina DW3 scaal home html como home page enquanto que a lista direita apresenta o conte do da pasta local Site scaal BEE Arquivo Editar Exibir Site Janela Ajuda 8 8 saal sc 2 Atualizar 4 Obter Colocar o Retirad Navega o no ste gt FAProjects Rubric Localzatio Pasta 07 12 99 13 53 E Images Pasta 20 11 99 15 13 H E Library Pasta 20 11 99 15 13 Templates Pasta 07 12 99
37. es correspondentes aparecer o na janela do documento Para obter mais informa es consulte Como utilizar o inspetor de origem de HTML na p gina 339 Para a edi o secund ria dos r tulos HT ML poss vel utilizar o Quick Tag Editor em vez de exibir o inspetor de origem de HTML Para exibir o Quick Tag Editor pressione as teclas Control e T no Windows ou Command e T no Macintosh ou escolha Modificar gt Quick Tag Editor Para obter mais informa es consulte Como editar um r tulo HTML na janela do documento na p gina 340 Como definir as prefer ncias O Dreamweaver oferece defini es de prefer ncias que controlam a apar ncia geral da interface do usu rio do programa bem como as op es relativas a recursos espec ficos como as camadas folhas de estilos HTML editores externos e visualiza o de p ginas nos navegadores Este guia do usu rio do oferece informa es sobre determinadas op es das prefer ncias juntamente com o recurso ou t pico associado Este guia descreve apenas as op es mais comuns das prefer ncias Para obter informa es sobre uma determinada op o das prefer ncias consulte o t pico correspondente na Ajuda do Dreamweaver Como definir as prefer ncias gerais As prefer ncias gerais controlam a apar ncia geral do Dreamweaver Para alterar essas prefer ncias escolha Editar gt Prefer ncias e em seguida clique em Geral Como definir as prefer ncias de f
38. es feitas O inspetor de comportamentos inclui agora os eventos e as a es que voc acabou de definir para a imagem O evento onMouseOver aparecer com a a o Permutar a imagem acima deste est o evento onMouseOut com a a o Restaurar a imagem permutada Este comportamento foi definido quando voc aceitou as op es padr o da caixa de di logo Permutar a imagem E Comportamentos O 4J 5 Eventos dei 50 and Later Browsers miese es d onMouseOut Swap Image Restore 8 Repita as etapas 4 a 7 para anexar as a es de permuta de imagens e os eventos onMouseOver s imagens Products e This Week e Selecione a imagem Products Na caixa de di logo Permutar a imagem defina a origem da imagem permutada Products como sendo bin products over gif e Selecione a imagem This Week Na caixa de di logo Permutar a imagem defina a origem da imagem permutada This Week como sendo bm thisweek over gif 9 Feche o inspetor de comportamentos 10 Pressione F12 para examinar o documento no seu navegador padr o da Web N o necess rio salvar um documento para poder visualiz lo Todas as fun es relativas ao navegador funcionar o durante a exibi o de um documento 11 Mova o ponteiro do mouse sobre as imagens Our Story Products e This Week para examinar como elas se alteram 12 Ao terminar de visualizar o arquivo feche a janela do navegador 13 Retorne ao Dreamweaver e escolha Arquivo
39. inspetores atalhos 419 como abrir e fechar com o Iniciador 67 inspetor de comportamentos 300 inspetor de imagens 211 inspetor de origem de HTML 339 inspetor de propriedades 66 Consulte tamb m paletas interatividade 105 introdu o ao Dreamweaver 14 it lico 179 ndice remissivo 433 J janela do documento barra de t tulo 64 como abrir documentos 84 como buscar texto 157 como editar um r tulo HTML 340 como executar os plug ins do Navigator 293 como redimensionar 65 como selecionar os elementos 89 inspetor de origem de HTML como alternar para 340 menu pop up Tamanho da janela 64 Mini iniciador 64 princ pios b sicos 64 seletor de r tulos 64 tamanho da p gina e tempo de descarga 64 janela do site comando Colocar 153 comando Obter 151 como alterar a exibi o 81 como buscar arquivos 156 como buscar texto 157 como exibir os sites locais 80 exibi o do mapa do site 145 exibi o dos arquivos do site 145 mapas de sites 80 op es da barra de ferramentas 145 princ pios b sicos 79 vis o geral 144 janelas atalhos 419 como abrir e fechar com o Iniciador 67 Consulte tamb m inspetores paletas JavaScript a es 301 alertas 322 como executar 309 como inserir roteiros 357 extens o dos recursos do Dreamweaver 402 JavaServer Pages JSP sobre 406 JSP 406 434 ndice remissivo L linhas de tempo atalhos 415 cabe ote de execu o 253 caminhos complexos 257 como adic
40. logo Verificador de v nculos O Dreamweaver abrir o documento selecionar a imagem ou v nculo com problema e real ar o caminho e o nome do arquivo no inspetor de propriedades Caso o inspetor de propriedades n o esteja vis vel escolha Janela gt Propriedades para abri lo 2 Sobrescreva o texto real ado a fim de criar um novo caminho e nome de arquivo ou clique no cone correspondente pasta para procurar o arquivo Se estiver atualizando a refer ncia de uma imagem e a nova imagem aparecer com o tamanho incorreto clique nos identificadores L e U no inspetor de propriedades ou clique no bot o Atualizar para redefinir os valores relativos altura e largura Os identificadores L e U passar o de negrito ao tipo normal 3 Salve o arquivo medida que os v nculos forem ajustados suas entradas desaparecer o da lista V nculos rompidos A perman ncia de uma entrada na lista ap s a digita o do novo caminho e nome de arquivo no Verificador de v nculos ou ap s o salvamento das altera es feitas no inspetor de propriedades indica que o Dreamweaver n o conseguiu localizar o novo arquivo O v nculo ainda ser considerado como rompido Como visualizar em navegadores Os documentos podem ser visualizados nos navegadores de destino a qualquer momento N o necess rio salvar o documento previamente Todas as fun es relacionadas aos navegadores estar o funcionando inclusive os comportamentos JavaSc
41. na pasta Scaal site abra DW3 copy txt O documento DW3 copy txt ser aberto em uma nova janela do documento no Dreamweaver DW3 copy txt o arquivo do qual voc copiar o texto Escolha Editar gt Selecionar tudo para selecionar o texto do documento Escolha Editar gt Copiar para copiar o texto Feche o documento DW3 copy txt qa Rom No documento my scaal home posicione o ponto de inser o na camada inferior direita 6 Escolha Editar gt Colar para colar o texto na camada Formatar o texto poss vel formatar o texto da janela do documento definindo as propriedades no inspetor de propriedades Inicialmente selecione o texto a ser formatado e aplique as altera es Voc alterar a fonte e o tamanho do texto Antes de formatar o texto crie alguns par grafos Adicione um retorno de par grafo depois da primeira frase e depois da segunda frase 1 Se o inspetor de propriedades ainda estiver fechado escolha Janela gt Propriedades Com o ponto de inser o em qualquer ponto da camada pressione as teclas Control A no Windows ou Command A no Macintosh a fim de selecionar todo o texto da camada No segundo menu pop up Formato do inspetor de propriedades que apresenta a op o Fonte padr o selecione Arial Helvetica sans serif No menu pop up Tamanho selecione 3 O texto do documento ser automaticamente atualizado refletindo as altera es Adicionar uma cor de fundo a uma camada
42. nico estilo chamado de estilo HTML Por exemplo a formata o HTML pode ser aplicada utilizando uma combina o de r tulos e em seguida salvando a como um estilo HTML que ser armazenado na paleta de estilos HTML Na pr xima vez que esta combina o de r tulos HTML for utilizada para formatar texto bastar selecionar o estilo salvo na paleta de estilos HTML Os estilos HTML contam com suporte de todos os navegadores da Web e economizam tempo em rela o formata o manual de texto Outro tipo de estilo denominado estilo CSS permite aplicar texto e formata o p gina com a vantagem da atualiza o autom tica Os estilos CSS podem ser armazenados diretamente no documento ou para obter maior efici ncia e flexibilidade em uma folha de estilos externa Se uma folha de estilos externa for anexada a diversas p ginas da Web todas as p ginas refletir o automaticamente qualquer altera o feita na folha de estilos Para acessar os estilos CSS utilize a paleta de estilos CSS 177 178 Cap tulo 6 A formata o HT ML manual e os estilos HT ML aplicam a formata o utilizando os r tulos HTML padr o como B FONT e CODE que contam com suporte de todos os navegadores conhecidos Os estilos CSS definem a formata o do texto inteiro em uma determinada classe ou a redefinem para um r tulo espec fico como H1 H2 P ou LI As CSS acr nimo de Cascading Style Sheets folhas de estilo em cascata contam com suport
43. o separa as teclas modificadoras se um atalho utilizar mais de um modificador Por exemplo Cmd Opt 5 no atributo KEY significa que o item de menu executado pressionando as teclas Control Alte 5 no Windows ou Command Option e 5 no Macintosh e As teclas especiais s o especificadas pelo nome F1 a F12 PgDn PgUp Home End Ins Del tabula o Esc BkSp e espa o As teclas modificadoras tamb m podem ser aplicadas s teclas especiais PLATFORM indica a plataforma na qual o item aparece Os valores v lidos s o win significando apenas Windows ou mac indicando apenas Macintosh O padr o se esse atributo n o for especificado que o item apare a em ambas as plataformas ENABLED o nome de uma fun o JavaScript que determina se o item de menu est ativado Se a fun o retornar false o item de menu estar desativado COMMAND uma express o JavaScript que ser executada quando o usu rio selecionar esse item no menu Nos c digos JavaScript complexos utilize um arquivo JavaScript especificado com o atributo FILE FILE ou COMMAND deve ser especificado para cada item de menu Como personalizar o Dreamweaver 393 394 Cap tulo 16 FILE o nome do arquivo HT ML que cont m o JavaScript que controla o item de menu O caminho especificado no atributo FILE relativo pasta Configuration Observe que o atributo FILE anula os atributos COMMAND ENABLED e CHECKED FILE ou COMMAND deve ser especificado para
44. o documento dd dever ser salvo primeiramente Ser utilizado um caminho arquivo at que o documento seja salvo T N o mostre esta mensagem novamente 42 Cap tulo1 4 Clique em OK O documento Our Story ser aberto atr s e a caixa de di logo Limpar o HTML do Word aparecer na frente do documento Untitled Document Untitled 2 Dreamweaver Arquivo Editar Exibir Inserir Modificar Texto Comandos Site Janela Ajuda Limpar o HTML do Word E B sica Detalhado Limpar o HTML de Word 97 98 IZ Remover todo o markup espec fico ao Word I Limpar CSS IZ Limpar os r tulos lt font gt I Corrigir os r tulos aninhados incorretamente I Definir a cor do fundo Hftitt FP Aplicar a formata o de origem I Mostrar o registro quando concluir 5984410 1K 71 seg s o EL I D D lt gt 4 Dentro dos objetivos deste tutorial voc aceitar as defini es padr o da caixa de di logo Limpar o HTML do Word Estas op es definem a cor do fundo do documento como sendo branca mant m uma parte consider vel da formata o e limpam o c digo HTML do arquivo 5 Na caixa de di logo Limpar o HTML do Word todas as op es da guia B sico dever o estar selecionadas como padr o Verifique se elas est o todas selecionadas e clique em OK Aparecer o registro Limpar o HTML do Word apresentando os resultados detalhados da limpeza A Mon Dec 06 13 40 20 GMT 0000 GMT Standard Time 1
45. padr o do texto da p gina 94 texto como alterar 181 datas como inserir 87 desenho da Web n veis de experi ncia no 14 Design Notes como adicionar as op es de status 174 como configurar 173 como desativar 175 como salvar as informa es sobre o arquivo 172 para documentos e objetos 173 para objetos de m dia 285 para os arquivos do Fireworks 176 vis o geral 172 dicion rio como editar 198 dicion rio pessoal 198 Director e Aftershock 290 filmes Shockwave como criar 286 documentos como abrir 84 como buscar 156 como criar 84 como criar com base em modelos 368 como definir as propriedades 93 como verificar os v nculos 168 como visualizar em navegadores 170 Design Notes como utilizar em 172 modelos como desanexar de 369 tamanho de descarga tempo 172 texto como adicionar 86 t tulo da p gina 93 documentos HTML Consulte documentos 84 editores Consulte editores externos editores de HTML com base em texto Consulte editores externos editores de texto Consulte editores externos editores externos BBEdit no Macintosh integra o com 355 HomeSite no Windows 338 HTML como iniciar 340 HTML vis o geral 354 imagens 205 m dia 284 texto vis o geral 354 elementos como alinhar 203 como exibir os invis veis 418 elementos de m dia como inserir 283 par metros 297 elementos invis veis coment rios 358 como mostrar e ocultar 90 como selecionar 89 prefer ncias 90 roteiros 357 entidades 87 estilos 188
46. para os sites da Web desenhados para visitas p blicas conveniente torn los vis veis atrav s do maior n mero poss vel de navegadores Escolha um ou dois navegadores como principais e desenhe o site visando os mas tente explorar o site com outros navegadores de vez em quando para evitar fornecer muito conte do incompat vel Quest es gerais a serem consideradas Quanto mais sofisticado for o site em termos de layout anima o conte do de multim dia e intera o menor ser a probabilidade de que seja compat vel com diversos navegadores Nem todos os navegadores podem executar o JavaScript por exemplo Uma p gina contendo texto simples que n o utiliza caracteres especiais ter uma boa exibi o em qualquer navegador por m essa p gina parecer menos atraente do que aquelas que cont m imagens layout e forem interativas Tente equilibrar o projeto para obter o m ximo de efeito e compatibilidade Um procedimento til fornecer v rias vers es de certas p ginas importantes como a home page do site Pode ser desenhada uma vers o com moldura e outra sem moldura dessa p gina por exemplo Voc poder usar v rios recursos de navegadores para alternar automaticamente os visitantes que disp em de navegadores com ou sem suporte a molduras Como utilizar os comportamentos para detectar os navegadores e plug ins Os comportamentos podem ser utilizados para determinar qual navegador os visitantes do site est
47. para remover os r tulos vazios combinar os r tulos FONT aninhados e aprimorar o c digo HTML confuso ou ileg vel Para limpar o c digo HTML 1 2 Abra um documento existente e escolha Comandos gt Limpar o HTML Na caixa de di logo que aparecer escolha dentre as seguintes op es Remover os r tulos vazios remove os r tulos sem conte do entre eles Por exemplo lt b gt lt b gt e lt FONT COLOR FF0000 gt lt FONT gt s o considerados r tulos vazios mas n o o r tulo lt b gt em lt b gt algum texto lt b gt Remover os r tulos aninhados redundantes remove todas as ocorr ncias redundantes de um r tulo Por exemplo no c digo lt b gt Isto lt b gt exatamente lt b gt o que gostaria de dizer lt b gt os r tulos B em volta da palavra exatamente s o redundantes e seriam removidos Remover coment rios de HTML n o pertencentes ao Dreamweaver remove todos os coment rios que n o tiverem sido inseridos pelo Dreamweaver Por exemplo lt begin body text gt seria removido mas n o lt 4BeginEditable doctitle gt porque um coment rio do Dreamweaver que marca o in cio de uma regi o edit vel em um modelo e Remover os coment rios de HTML pertencentes ao Dreamweaver remove todos os coment rios inseridos pelo Dreamweaver Por exemplo lt BeginEditable doctitle gt seria removido mas n o lt begin body text gt porque n o um coment rio do Dreamweaver A re
48. til para criar uma camada de pr carga ou seja uma camada grande que obscurece o conte do da p gina inicialmente desaparecendo em seguida quando todos os componentes da p gina tiverem sido carregados Para poder utilizar a a o Mostrar ocultar as camadas 1 Escolha Inserir gt Camada ou clique no bot o Camada situado na paleta de objetos e desenhe uma camada na janela do documento Repita esta etapa para criar outras camadas 2 Clique na janela do documento para desmarcar a camada e em seguida abra o inspetor de comportamentos 3 Clique no bot o com o sinal de adi o e escolha Mostrar ocultar as camadas no menu pop up A es Se a op o Mostrar ocultar as camadas n o estiver dispon vel prov vel que j haja uma camada selecionada Como as camadas n o aceitam eventos em ambos os navegadores da vers o 4 0 selecione um outro objeto como o r tulo BODY ou um v nculo r tulo A ou no menu pop up Eventos de altere o navegador de destino para IE 4 0 4 No menu pop up Camadas com nome selecione a camada cuja visibilidade deseja alterar 5 Clique em Mostrar para mostrar a camada Ocultar para ocult la ou Padr o para restaurar a visibilidade padr o da mesma 6 Repita as etapas 4 e 5 para todas as camadas cuja visibilidade ainda deseja alterar 7 Clique em OK 8 Verifique se o evento padr o corresponde ao desejado Se n o corresponder escolha um outro evento no menu pop up
49. vel desfazer a retirada para que o arquivo no servidor fique dispon vel para os outros membros da equipe que queiram utiliz lo Nota Se for selecionado Site gt Devolver ou Site gt Retirar enquanto a janela do documento estiver ativa e o arquivo n o fizer parte do site que estiver aberto o Dreamweaver tentar determinar a qual dos sites definidos localmente pertence o arquivo se ele pertencer a apenas um site local o Dreamweaver abrir esse site e em seguida executar a opera o de devolu o ou retirada Para retirar arquivos de um servidor remoto 1 Escolha o site desejado no menu pop up Sites atuais situado no alto da janela do site 2 Retire os arquivos utilizando um dos m todos abaixo e Selecione um ou mais arquivos e clique no bot o Retirar na parte superior da janela do site e No menu contextual ou no menu Site escolha Retirar 3 Para descarregar os arquivos dependentes juntamente com os selecionados clique em Sim no aviso Para que os arquivos dependentes n o sejam descarregados clique em N o Para devolver arquivos a um servidor remoto 1 Escolha o site desejado no menu pop up Sites atuais situado no alto da janela do site 2 Selecione um ou mais arquivos devolvidos ou novos arquivos no painel Local e siga um dos procedimentos abaixo e Clique no bot o Devolver no alto da janela do site e Escolha Devolver no menu contextual ou no menu Site Os arquivos retirados s o indicados com u
50. 0 ou mais avan ada do Netscape Navigator para outra p gina se eles estiverem utilizando a vers o 4 0 ou mais avan ada do Microsoft Internet Explorer 4 0 ou por mant los na mesma p gina se eles estiverem utilizando qualquer outro navegador til anexar este comportamento ao r tulo BODY de uma p gina que seja compat vel com praticamente qualquer navegador e que n o utilize outros JavaScript desta maneira mesmo os visitantes que chegarem p gina com o JavaScript desativado poder o ver algo Uma outra op o seria anexar este comportamento a um v nculo nulo um r tulo A de forma que a a o determinasse o destino do v nculo com base na marca e vers o do navegador do visitante Para poder utilizar a a o Verificar o navegador 1 2 Selecione um objeto e abra o inspetor de comportamentos Clique no bot o com o sinal de adi o e escolha Verificar o navegador no menu pop up A es Determine como gostaria de separar os visitantes por marca de navegador por vers o de navegador ou por ambos Por exemplo voc prefere que todos os visitantes com um navegador da vers o 4 0 vejam uma p gina enquanto os visitantes com outras vers es vejam uma p gina diferente Ou talvez que os usu rios do Netscape Navigator visualizem uma p gina e os usu rios do Microsoft Internet Explorer IE visualizem uma p gina diferente Especifique uma vers o do Netscape Navigator Nos menus pop up adjacentes
51. 127 e para transferir arquivos entre sites locais e remotos Como padr o o site remoto ou mapa do site aparecer no painel esquerdo e o site local ser mostrado no painel direito poss vel alterar essa defini o nas Prefer ncias de FTP do site Consulte Como definir as prefer ncias de FTP do site na p gina 146 Site scaal JO F7 Editar Exibir Site Janela Ajuda Retirado a FAProjectstRubriciLocalizatio 07 1 T 12 05 Images Pasta 20711799 15 13 H E Library Pasta 20711799 15 13 E Templates Pasta 29 11799 12 32 O Dw3_copy tst 1KB Text Docu 19 11 99 16 51 B Diw 3 ourstory word html 4KB Microsoft 19 11 99 16 51 EB Dw3 products cd html 5KB Microsoft 19 11799 16 51 9 Dw3 j products index html 9KB Microsoft 19 11 99 16 51 D w 3 products mug html 5KB Microsoft 19 11 99 16 51 B DW3_scaal_home html 7KB Microsoft 29 11799 12 14 B Dw3 thismeek html 7KB Microsoft 19 11299 16 51 B gifts html 1KB Microsoft 28 11799 14 02 EB home htmi 1KB Microsoft 29 11 99 14 02 B index html 1KB Microsoft 28 11 99 13 33 B inspiration html 1KB Microsoft 28 11799 14 02 my_ourstory html 7KB Microsoft 19 11799 16 51 E my scaal home html 2KB Microsoft 29 11 99 11 30 B products cd html 5KB Microsoft 19 11 99 16 51 E products index html 9KB Microsoft 13 11 99 16 51 E products mints html 5KB Microsoft 19 11 99 16 51 B products mug html 5KB Microsoft 191
52. 1318 O DW3 copyte 1KB Text Docu 19 11 99 1651 indez himi EB DW3 oustor wordhtml 4KB Microsoft 19 11 99 16 51 B DW3 products cd html 5KB Microsoft 19 11 99 16 51 E index html SKB Microsoft 19 11 99 16 51 mug html 5KB Microsoft 19 11 99 16 51 E DW3 scaal home himl 7KB Microsoft 29 11 99 1214 6 DW3_thisweek html 7KB Microsoft 19 11 99 16 51 B gitshtml 1KB Microsoft 28 11 99 14 02 B homehim 1KB Microsoft 29 11 99 14 02 EB indexhimi 1KB Microsoft 28 11 9913 33 B inspiration html 1KB Microsoft 28 11 99 14 02 B my ourstory html 7KB Microsoft 19 11 399 16 51 E my_scaal_home htmi 2KB Microsoft 29 11 99 11 30 E products cdhtml SKB Microsoft 19 11 99 16 51 EB products index html SKB Microsoft 19 11 99 16 51 EB products mints html SKB Microsoft 19 11 99 16 51 EB products mug html SKB Microsoft 19 11 99 16 51 E scaal homehtml 7KB Microsoft 19 11 99 16 51 B thisweek html 7KB Microsoft 19 11 99 16 51 E D 100 T tulo Untitled Document Data 28 11 99 14 02 Tamanho 1KB EA A p gina DW3 scaal home n o possui v nculos Voc adicionar v nculos a esta p gina na pr xima se o do tutorial Mantenha aberta a janela do site por enquanto para acompanhar a atualiza o do mapa do site enquanto os v nculos s o inclu dos na home page Criar v nculos As imagens esquerda da home page da Scaal guiam os visitantes para determinadas p ginas do site da Scaal Voc adicionar v nculos a pa
53. 132 Como modificar o layout do mapa do site Utilize as op es do Layout do mapa do site para personalizar a apar ncia do mapa do site E poss vel especificar a home page o n mero de colunas exibidas e decidir se os arquivos ocultos e dependentes ser o mostrados Para modificar o layout do mapa do site 1 Abra a caixa de di logo Defini o do site utilizando um dos seguintes m todos e Escolha Site gt Definir os sites e em seguida clique em Editar Na lista de categorias esquerda selecione Layout do mapa do site e Escolha Exibir gt Layout no Windows ou Site gt Exibi o do mapa do site gt Layout no Macintosh 2 Clique no cone da pasta para selecionar uma home page para o site ou digite um caminho de arquivo no campo Home page Se voc n o especificar uma home page e o Dreamweaver n o localizar um arquivo denominado index html ou index htm na raiz o programa solicitar a sele o de uma home page quando o mapa do site for aberto 3 Escolha uma dentre as op es de Coluna e No campo N mero de colunas digite um n mero para definir quantas p ginas ser o exibidas por linha na janela do mapa do site e No campo Largura da coluna digite um n mero para definir a largura em pixels das colunas do mapa do site 4 Em Identifica o de cones selecione se voc quer mostrar o nome sob os cones dos documentos no mapa do site representados como nomes de arquivos ou t tulos de p g
54. 357 Como inserir coment rios cccccccccccccccrcr rr 358 CAP TULO 14 Modelos e bibliotecas ecrssrrciesnrso retis was 359 Como criar os modelos cccccccccccc cce 361 Como definir as regi es edit veis de um modelo 362 Como criar documentos com base em modelos 368 Como modificar os modelos e atualizar o site n nonon nnana 369 Como importar e exportar o conte do XML ccc 370 Sobre os itens de biblioteca cccccccccccics crer 372 Como utilizar as server side includes ccccciccicicica 379 CAP TULO 15 Como ciar toras secs rsss e Eds 381 Como criar um formul rio ccccccciccicccscrcc cera 382 Como adicionar um objeto a um formul rio 383 Como processar os formul rios ciccciiiiciiccicis 384 Como utilizar os comportamentos com formul rios 385 CAP TULO 16 Como personalizar o Dreamweaver 387 Como alterar a paleta de objetos cccciiicii iii 388 Como criar um objeto simples ccicciciiiciiciicio 389 Como alterar o tipo de arquivo padr o ccciiccici 390 Como personalizar os menus do Dreamweaver 391 Como personalizar a apar ncia das caixas de di logo 395 Como editar o perfil de formata o da origem de HTML 396 Sobre os perfis de navegadores ccicciciiiciiciiis 398 Extens o dos recursos do Dreamweaver Princ
55. 358 como abrir documentos 84 tipos de arquivos diferentes de HTML como padr o 390 como adicionar quadros a uma linha de tempo 258 como adicionar um objeto a uma linha de tempo 255 como alinhar camadas 246 elementos da p gina 203 imagens de rastreamento 105 op es 203 texto 182 como aninhar camadas 237 molduras 268 como atualizar os v nculos 134 como automatizar as tarefas 97 como buscar arquivos 156 como salvar os padr es de busca 161 express es regulares 162 r tulos e atributos HTML 159 texto entre r tulos espec ficos 160 texto na origem de HTML 158 texto nos arquivos 157 como carregar arquivos 153 como colar as etapas do hist rico 100 como colocar arquivos em um servidor remoto 153 como combinar as paletas flutuantes 62 como copiar as etapas do hist rico 100 como criar v nculos a ncoras com nome usando o cone do indicador de arquivos 120 a documentos usando o cone do indicador de arquivos 116 ncoras 119 documentos 114 como descarregar comportamentos 306 tamanho estimativas de tempo 172 como descarregar e editar sites j existentes 78 como desfazer mais de uma etapa 96 como designar molduras para blank 280 parent 280 self 280 top 280 como designar os navegadores como converter um arquivo em compat vel com navegador 3 0 252 perfis de navegadores 398 como designar os navegadores de destino atalhos 416 como designar v nculos a folhas de estilos CSS externas 190 como abrir documentos
56. 99 16 51 E scaal home html 7KB Microsoft 19 11 99 16 51 EB thismeekhtml 7KB Microsoft 19 11 99 16 51 b 1 itens locais selecionados totalizando 4738 bytes Como utilizar os controles da janela do site Para abrir a janela do site escolha Janela gt Arquivos do site Em seguida utilize os seguintes bot es e op es para definir o que ser exibido na janela do site e para transferir arquivos entre os servidores local e remoto Exibi o dos arquivos do site exibe a estrutura de arquivos do site local ou remoto no painel mut vel da janela do site O painel mut vel qualquer painel que n o tiver sido especificado e que mostra sempre um determinado site na se o FTP do site da caixa de di logo Prefer ncias consulte Como definir as prefer ncias de FTP do site na p gina 146 Esta a exibi o padr o da janela do site Exibi o do mapa do site exibe um mapa visual do seu site com base nos v nculos existentes entre os documentos no painel mut vel da janela do site O painel mut vel qualquer painel que n o tiver sido especificado e que mostra sempre um determinado site na se o FTP do site da caixa de di logo Prefer ncias consulte Como definir as prefer ncias de FTP do site na p gina 146 Mantenha pressionado o bot o para escolher no menu pop up a op o Apenas o mapa ou Mapa e arquivos Menu pop up Sites atuais lista os sites por voc definidos Para alternar entre diversos sites selecion
57. A inclus o de uma fonte que n o est instalada no sistema ser til Por exemplo para especificar uma fonte exclusiva ao Windows quando voc estiver criando algo em um Macintosh e Para mover a combina o de fontes para cima ou para baixo na lista clique nos bot es de seta de dire o no alto da caixa de di logo Para adicionar uma nova combina o lista de fontes 1 Escolha Texto gt Fonte gt Editar a lista de fontes 2 Selecione uma fonte na lista Fontes dispon veis e clique no bot o lt lt para mover a fonte para a lista Fontes escolhidas 3 Repita a etapa 2 para cada fonte subsegiiente na combina o Para adicionar uma fonte que n o esteja instalada no sistema digite o nome da fonte no campo de texto abaixo da lista Fontes dispon veis e clique no bot o lt lt para adicionar a fonte combina o A inclus o de uma fonte que n o est instalada no sistema ser til Por exemplo para especificar uma fonte exclusiva ao Windows quando voc estiver criando algo em um Macintosh 4 Ao terminar de selecionar as fontes espec ficas escolha uma fam lia de fontes gen ricas no menu Fontes dispon veis e clique no bot o lt lt para mov la at a lista Fontes escolhidas As fam lias de fontes gen ricas incluem as fontes cursivas fantasia monoespa adas sans serif e serif Se nenhuma das fontes na lista Fontes escolhidas estiver dispon vel no sistema do usu rio o texto aparecer com a fo
58. Apple No campo Se for localizado ir para a URL especifique uma URL para os usu rios que contam com o plug in Se especificar uma URL remota digite tamb m o prefixo http no endere o Para garantir que os usu rios com o plug in permanecer o na mesma p gina deixe este campo em branco No campo Caso contr rio ir para a URL especifique uma URL alternativa para os usu rios que n o contam com o plug in Para garantir que os usu rios sem o plug in permanecer o na mesma p gina deixe este campo em branco 6 A detec o de plug ins n o poss vel no Internet Explorer que estiver sendo executado no Macintosh e a maioria dos plug ins n o pode ser detectada no Internet Explorer que estiver sendo executado no Windows Como padr o quando a detec o for imposs vel o usu rio ser enviado para a URL listada no campo Caso contr rio Para em vez disso enviar o usu rio para a primeira URL Se for localizado selecione a op o Ir sempre para a primeira URL se a detec o n o for poss vel Quando esta op o estiver selecionada ela implicar em aceitar que o usu rio disp e do plug in exceto se o navegador indicar explicitamente que o plug in n o est presente Em geral se o conte do do plug in for parte integral da p gina selecione a op o Ir sempre para a primeira URL se a detec o n o for poss vel os usu rios que n o disp em do plug in receber o uma notifica o do navegador para que
59. Base Base especifica a URL que cont m o controle ActiveX O Internet Explorer descarregar o controle ActiveX deste local se ainda n o tiver sido instalado no sistema do usu rio Se voc n o especificar um par metro Base e o visitante ainda n o dispuser do controle ActiveX necess rio o navegador n o poder exibir o objeto ActiveX Incorporar faz com que o Dreamweaver adicione um r tulo EMBED dentro do r tulo OBJECT do controle ActiveX Se o controle ActiveX possuir um equivalente ao plug in do Netscape Navigator o r tulo EMBED ativar este plug in O Dreamweaver atribuir os valores digitados como propriedades ActiveX aos equivalentes do plug in do Netscape Navigator Orig define o arquivo de origem dos dados a ser utilizado para um plug in do Netscape Navigator se a op o Incorporar estiver ativa Se voc n o digitar um valor o Dreamweaver tentar determinar o valor a partir das propriedades do ActiveX que j tiverem sido digitadas Alinhar determina como o objeto ser alinhado na p gina Consulte Como alinhar os elementos na p gina 203 para obter uma descri o de cada op o Como inserir m dia 295 296 Cap tulo 11 Imagem Alt especifica uma imagem a ser exibida se o navegador n o oferecer suporte ao r tulo OBJECT Esta op o estar dispon vel apenas quando a op o Incorporar n o estiver selecionada Espa o V e Espa o H especificam o n mero de pixels de espa o em branco acima ab
60. Como definir as prefer ncias de FTP do site na p gina 146 URLs em arquivos de filmes Flash podem ser agora editadas no Dreamweaver o mapa do site exibe todos os v nculos nos arquivos Flash e o verificador de v nculos pode analis los Como criar e editar os objetos e elementos da p gina Objetos de caracteres fornece uma cole o de caracteres especiais comumente utilizados e TM por exemplo que podem ser acessados facilmente na paleta de objetos Consulte Como utilizar a paleta de objetos na p gina 68 Objetos de moldura permite criar de modo r pido e f cil conjuntos de molduras predefinidos Consulte Para inserir um conjunto de molduras predefinido na p gina 267 Outros objetos permite adicionar facilmente barras de navega o menus de salto v nculos de correio eletr nico datas e novos objetos de m dia por exemplo filmes Flash 4 e Shockwave 7 e objetos do Generator aos documentos Consulte Como utilizar a paleta de objetos na p gina 68 V nculos e navega o na p gina 109 e Como inserir m dia na p gina 283 Mapas de imagens em linha permitem adicionar e redimensionar pontos ativos alterar v nculos e destinos e aplicar comportamentos sem sair da janela do documento para executar todas estas a es Consulte Como criar os mapas de imagens na p gina 211 Guia de introdu o 17 18 Introdu o Como dinamizar o fluxo de trabalho Integra o
61. Como formatar o texto com as folhas de estilos CSS Um estilo um grupo de atributos de formata o que controla a apar ncia de uma faixa de texto de um nico documento A folha de estilos CSS pode ser utilizada para controlar v rios documentos simultaneamente e inclui todos os estilos de um documento A vantagem de utilizar as folhas de estilos CSS em rela o aos estilos HTML que al m de estarem vinculadas a v rios documentos quando um estilo CSS for atualizado ou alterado a formata o de todos os documentos que utilizam essa folha de estilos espec fica ser tamb m automaticamente atualizada Os estilos CSS s o identificados pelo nome ou pelo r tulo HT ML o que permite alterar o atributo de um estilo e exibir as modifica es no texto inteiro ao qual esse estilo foi aplicado Os estilos CSS nos documentos HTML podem controlar a maioria dos atributos tradicionais de formata o de texto como fonte tamanho e alinhamento Eles podem especificar tamb m atributos exclusivos de HTML como posicionamento efeitos especiais e imagens cambi veis pelo mouse As folhas de estilos CSS residem na rea do HEAD de um documento e definem uma s rie de estilos Os estilos CSS podem definir os atributos de formata o dos r tulos HTML faixas de texto identificadas por um atributo CLASS ou texto que atenda aos crit rios de compatibilidade com a especifica o de folhas de estilo em cascata Cascading Style Sheets CSS O Dreamweav
62. Como utilizar os comportamentos 313 314 Cap tulo 12 6 Escolha uma das a es para executar parar rebobinar ou ir para um quadro do filme A op o Executar executa o filme a partir do quadro atual 7 Clique em OK 8 Verifique se o evento padr o corresponde ao desejado Se n o corresponder escolha um outro evento no menu pop up Se os eventos desejados n o estiverem listados altere o navegador de destino no menu pop up Eventos de Arrastar a camada A a o Arrastar a camada permite ao usu rio arrastar uma camada Utilize esta a o para criar quebra cabe as controles deslizantes e outros elementos m veis de interface poss vel especificar entre outros aspectos em qual dire o o usu rio poder arrastar a camada horizontal verticalmente ou em qualquer uma das dire es um destino at o qual a camada dever ser arrastada se a camada se encaixar no destino se esta estiver distante um certo n mero de pixels e o que dever ser feito quando a camada alcan ar o destino Como a a o Arrastar a camada deve ser chamada antes que a camada possa ser arrastada pelo usu rio certifique se de que o evento que disparar a a o ocorrer antes que o usu rio tente arrastar a camada melhor anexar a a o Arrastar a camada ao objeto BODY com o evento onLoad embora ela tamb m possa ser anexada a um v nculo que preencha toda a camada ao redor de uma imagem por exemplo e que utilize o evento onMouseO
63. DOM e API consulte Extens o dos recursos do Dreamweaver Como personalizar o Dreamweaver 401 402 Cap tulo 16 Sobre o JavaScript JavaScript uma linguagem de programa o interpretada Para saber mais sobre JavaScript leia um bom livro sobre o assunto como JavaScript Bible de Danny Goodman IDG ou JavaScript The Definitive Guide de David Flanagan O Reilly Para obter mais informa es sobre a extensibilidade do Dreamweaver utilizando o JavaScript consulte Extens o dos recursos do Dreamweaver Nota Apesar da semelhan a entre os dois nomes JavaScript n o est relacionado de modo algum a Java Como editar os comandos do Dreamweaver Todos os comandos nos menus do Dreamweaver inclusive aqueles criados e salvos utilizando a paleta de hist rico consulte Como criar novos comandos a partir de etapas do hist rico na p gina 101 s o implementados em JavaScript O c digo JavaScript geralmente consiste em sua maior parte de chamadas de fun es fornecidas pela API de extensibilidade do Dreamweaver Caso voc conhe a o JavaScript e compreenda a API de extensibilidade do Dreamweaver poder editar o JavaScript a fim de alterar o funcionamento dos comandos do programa Nota N o tente alterar os c digos JavaScript a menos que saiba exatamente o que est fazendo Para renomear um comando mova o para um outro menu ou adicione a ele um atalho de teclado Consulte Como personalizar os menus do Dreamweaver
64. Escolher no Macintosh para selecionar o arquivo a ser aberto Observe que o campo V nculo do inspetor de propriedades atualizado mostrando o nome do arquivo vinculado Agora voc criar um v nculo de texto 11 Na janela do Dreamweaver selecione a palavra products no segundo par grafo 12 Clique com o bot o direito do mouse no Windows ou pressione a tecla Control e clique no Macintosh e no menu contextual escolha Criar v nculo 13 Na caixa de di logo Selecionar o arquivo procure o arquivo DW3 products index html e clique em Selecionar no Windows ou Escolher no Macintosh para selecionar o arquivo 14 Escolha Arquivo gt Salvar para que todas as altera es feitas na home page sejam salvas 15 Escolha Arquivo gt Fechar para que a p gina seja fechada Criar um modelo Os modelos podem ser utilizados para criar os documentos que tenham uma estrutura e apar ncia semelhantes Eles s o teis quando for necess rio assegurar que todas as p ginas em um site compartilhem determinadas caracter sticas Quando apenas um modelo for aplicado a um grupo de p ginas as informa es nelas contidas poder o ser editadas atrav s da edi o do modelo e de sua reaplica o nas p ginas Enquanto os elementos espec ficos de uma p gina como o texto que descreve um item para venda permanecem inalterados os elementos comuns do modelo como as barras de navega o s o atualizados em todas as p ginas que o ut
65. Janela gt Propriedades para abrir o inspetor de propriedades Clique na seta de expans o situada no canto inferior direito para examinar todas as propriedades ESTE Tabela Linhas 57 L piseis X Preench da c lula Alinhar Padr o w 9 Cols 2 uU pieis h Espa o entre c lulas Borda 1 Joll Espa oY Bordaclara 4 Fundo so wiis Espa oH Bordaclara q Fundo E Borda IEJ E Para denominar a tabela e No campo Nome da tabela digite um nome para a tabela Para selecionar as op es de layout da tabela e Nos campos Linhas e Colunas especifique o n mero de linhas e colunas na tabela e Nos campos L e U especifique a largura e a altura da tabela em pixels ou como um percentual da janela do navegador Em geral n o necess rio definir a altura de uma tabela e Utilize o campo Alinhar para especificar como a tabela se alinhar aos outros elementos no mesmo par grafo como texto ou imagens esquerda alinha a tabela esquerda dos outros elementos direita alinha a tabela direita dos outros elementos e No centro centraliza a tabela poss vel alinhar esquerda alinhar direita ou centralizar a tabela em rela o aos outros elementos Pode se tamb m escolher o alinhamento padr o do navegador e Nos campos Espa o V e Espa o H especifique o n mero de pixels de espa o em branco acima abaixo e em ambos os lados da tabela e Utilize os bot es Limpar as alturas das li
66. Macintosh ou clique no bot o Quick Tag Editor no inspetor de propriedades O Quick Tag Editor ser aberto no modo adequado dependendo da sele o atual gt d html Dreamw 598 x 450 16K 75 seg s Ly I D S D lt gt 4 No modo Inserir o HTML ou Colocar o r tulo ao redor digite um r tulo HTML no modo Editar o r tulo poss vel digitar novos atributos editar os atributos existentes ou o nome do r tulo 3 Para editar os nomes ou valores dos atributos existentes ou editar o nome do r tulo pressione a tecla Tab para mover se de um item para o pr ximo at selecionar o atributo ou r tulo que ser editado Pressione as teclas Shift e Tab para voltar ao nome do atributo valor do atributo ou nome do r tulo anterior Como editaro HTML 341 342 Cap tulo 13 4 Caso voc interrompa a edi o de um nome de atributo durante alguns segundos aparecer um menu suspenso de sugest es com uma lista de todos os atributos v lidos para o r tulo que estiver sendo editado Se o Dreamweaver n o reconhecer o r tulo que estiver sendo editado o menu de sugest es conter todos os atributos que o Dreamweaver reconhece para qualquer r tulo A lista de sugest es n o aparecer se for cancelada a sele o de Ativar a sugest o de r tulos no painel do Quick Tag Editor da caixa de di logo Prefer ncias Controle o menu de sugest es das seguintes maneiras Quando voc come ar a digitar um nome de atrib
67. No Windows No Macintosh Alterar o atributo de origem da Clique duas vezes na Clique duas vezes na imagem imagem imagem Editar a imagem em um editor externo Mantenha a tecla Control Mantenha a tecla Command pressionada enquanto clica pressionada enquanto clica duas vezes na imagem duas vezes na imagem Como gerenciar os hiperv nculos A o No Windows No Macintosh Criar hiperv nculo selecionar o texto Control L Command L Remover o hiperv nculo Control Shift L Command Shift L Arrastar e soltar para criar um Selecione o texto imagem Selecione o texto imagem hiperv nculo a partir de um ou objeto e em seguida ou objeto e em seguida documento mantendo a tecla Shift mantendo a tecla Shift pressionada arraste a pressionada arraste a sele o at um arquivo na sele o at um arquivo na janela do site janela do site Arrastar e soltar para criar Selecione o texto imagem Selecione o texto imagem um hiperv nculo utilizando o inspetor ou objeto e em seguida ou objeto e em seguida de propriedades arraste o cone do indicador arraste o cone do indicador de arquivos do inspetor de de arquivos do inspetor de propriedades at um arquivo propriedades at um arquivo na janela do site na janela do site Abrir o documento contendo o v nculo Enquanto mant m Enquanto mant m no Dreamweaver pressionada a tecla Control pressionada a tecla clique duas vezes no v nculo Command clique duas vezes no v nculo V
68. No alto alinha a parte superior do caractere mais alto na linha do texto com a parte superior do objeto selecionado Alto do texto alinha o caractere mais alto na linha do texto com a parte superior do objeto Meio alinha a metade do objeto selecionado com a linha de base do texto Meio absoluto alinha o meio do objeto selecionado com a metade do texto esquerda coloca o objeto na margem esquerda quebrando automaticamente as linhas do texto em volta dele direita Se o texto alinhado esquerda preceder o objeto na linha ele geralmente for ar os objetos alinhados esquerda a passarem para a pr xima linha direita coloca o objeto na margem direita quebrando automaticamente as linhas do texto em volta dele esquerda Se o texto alinhado direita preceder o objeto na linha ele geralmente for ar os objetos alinhados direita a passarem para a pr xima linha Como redimensionar as imagens e os outros elementos Os elementos como as imagens plug ins flmes Shockwave ou Flash applets e controles ActiveX podem ser visualmente redimensionados na janela do documento do Dreamweaver O redimensionamento visual ajuda a determinar como um elemento afetar o layout em diferentes dimens es O redimensionamento redefine os atributos WIDTH e HEIGHT de um elemento Os campos L e U no inspetor de propriedades exibem a largura e altura do elemento durante o redimensionamento O tamanho do arquivo do elemento n o alterado
69. O arquivo badplugins cfg controla os plug ins que acarretar o falhas do Dreamweaver ou outros problemas s rios Se houver problemas com qualquer outro plug in adicione o a este arquivo e Certifique se de contar com mem ria suficiente e no Macintosh que haja mem ria suficiente alocada ao Dreamweaver Alguns plug ins exigem entre 2 MB e 5 MB a mais de mem ria para que sejam executados Como inserir um controle ActiveX Os controles ActiveX anteriormente conhecidos como controles OLE s o componentes reutiliz veis semelhantes a mini aplicativos que podem funcionar como plug ins dos navegadores Eles s o executados no Internet Explorer com o Windows por m n o s o executados no Macintosh ou no Netscape Navigator No Dreamweaver o objeto ActiveX permite fornecer atributos e par metros para um controle ActiveX no navegador do visitante O Dreamweaver utiliza o r tulo OBJECT para marcar o local na p gina onde o controle ActiveX aparecer e para fornecer par metros ao controle ActiveX Para inserir o conte do de controles ActiveX 1 Na janela do documento coloque o ponto de inser o onde deseja inserir o conte do 2 Clique no bot o ActiveX na paleta de objetos Um cone marca o local onde o controle ActiveX aparecer na p gina no Internet Explorer Propriedades do ActiveX Ap s ter inserido um objeto ActiveX utilize o inspetor de propriedades para definir os atributos do r tulo OBJECT e par metros do co
70. Para evitar que estas caixas de di logo apare am escolha Editar gt Prefer ncias e desmarque a op o Mostrar a caixa de di logo quando inserir objetos Cada bot o desta paleta insere o c digo de origem de HT ML necess rio ao aparecimento do objeto na p gina Utilize o inspetor de propriedades para especificar o arquivo de origem as dimens es e outros par metros relevantes 283 284 Cap tulo 11 Como iniciar um editor externo de m dia poss vel clicar duas vezes em qualquer arquivo na janela do site para edit lo Se o arquivo for um arquivo HT ML ele ser aberto no Dreamweaver Se ele for de outro tipo como um arquivo de imagem ou de filme Flash ele ser aberto em um editor externo apropriado como o Fireworks ou Flash Cada tipo de arquivo est associado a um ou mais editores externos O editor que for iniciado quando voc clicar duas vezes no arquivo na janela do site denominado editor prim rio Se houver mais de um editor associado ao tipo de arquivo ser poss vel iniciar um editor secund rio para um determinado arquivo clique com o bot o direito do mouse no Windows ou mantendo a tecla Control pressionada no Macintosh clique no nome do arquivo na janela do site e escolha um editor no submenu Abrir com do menu contextual Na maioria das vezes o editor prim rio o mesmo aplicativo que seria iniciado se voc clicasse duas vezes no cone correspondente ao arquivo na rea de trabalho Par
71. Para obter uma explica o sobre como cada a o funciona e como escolher as op es associadas a ela examine os t picos abaixo da tabela No Macintosh No Windows A o Netscape Internet Netscape Internet Navigator 3 0 Explorer 3 0x Navigator 3 0 Explorer 3 01 Chamar o OK Falha sem OK OK JavaScript provocar erros Alterar a OK Falha sem OK OK propriedade provocar erros Verificar o OK Falha sem OK OK navegador provocar erros Verificar o plug OK Falha sem OK OK in provocar erros Controlar o OK Falha sem OK Falha sem Shockwave ou provocar erros provocar erros Flash Arrastar a Falha sem Falha sem Falha sem Falha sem camada provocar erros provocar erros provocar erros provocar erros Ir para a URL OK Falha sem OK OK provocar erros Menu de salto OK Falha sem OK Falha sem provocar erros provocar erros Op o Ir do OK Falha sem OK Falha sem menu de salto provocar erros provocar erros Abrir a janela do OK Falha sem OK OK navegador provocar erros Executar osom OK Falha sem OK Falha sem provocar erros provocar erros Mensagem pop OK Falha sem OK OK up provocar erros Como utilizar os comportamentos 307 No Macintosh No Windows A o Netscape Internet Netscape Internet Navigator 3 0 Explorer 3 0x Navigator 3 0 Explorer 3 01 Pr carregar as OK Falha sem OK Falha sem imagens provocar erros provocar erros Definir a imagem OK Falha sem OK Falha sem da barra de provoc
72. Se os eventos desejados n o estiverem listados altere o navegador de destino no menu pop up Eventos de Como utilizar os comportamentos 329 330 Cap tulo 12 Quando forem exibidas em uma janela do Netscape Navigator poss vel que as camadas se contraiam para acomodar todo o conte do A fim de impedir que isso ocorra adicione texto ou imagens s camadas ou defina valores de corte das mesmas Para criar uma camada de pr carga 1 Clique no bot o Camada situado na paleta de objetos e desenhe uma camada grande na janela do documento Certifique se de que a camada cubra todo o conte do da p gina Na paleta de camadas arraste o nome da camada at o alto da lista de camadas para especificar que esta camada dever aparecer na frente da ordem de empilhamento Nomeie a camada carregando no campo de texto mais esquerda no inspetor de propriedades Mantendo a camada selecionada defina no inspetor de propriedades a cor do fundo da camada como sendo a mesma cor que o fundo da p gina ndice z 1 Imagem de fundo yis defaut z Cor de fundo sorte E D A x FF9933 Clique dentro da camada que dever estar obscurecendo o restante do conte do da p gina e se desejar digite uma mensagem Por exemplo as mensagens Aguarde at que a p gina seja carregada ou Carregando mant m o usu rio informado sobre o que est ocorrendo para Carregando mant for
73. URL sem qualquer interven o por parte do usu rio Por m se o usu rio escolher o mesmo item que j estiver escolhido no menu de salto este n o ocorrer O bot o Ir til quando for bvio para os visitantes que a escolha da mesma op o do menu de salto n o acarretar o salto Em particular adicione um bot o Ir a um menu de salto quando este aparecer em uma moldura e os itens do menu de salto se vincularem a outras p ginas de outras molduras que apresentarem v nculos adicionais Como utilizar os comportamentos 319 320 Cap tulo 12 Para poder utilizar a a o Ir do menu de salto 1 Selecione um objeto a ser utilizado como bot o Ir geralmente uma imagem de bot o e abra o inspetor de comportamentos 2 Clique no bot o com o sinal de adi o e escolha Ir do menu de salto no menu pop up A es 3 No menu pop up Escolher o menu de salto selecione um menu a ser ativado pelo bot o Ir 4 Clique em OK Abrir a janela do navegador Utilize a a o Abrir a janela do navegador para abrir uma URL em uma nova janela poss vel especificar as propriedades da nova janela inclusive o seu tamanho nome e atributos se ela ser redimension vel possuir uma barra de menus e assim por diante Se voc n o especificar qualquer atributo da janela ela ser aberta no tamanho e com os atributos da janela que a tiver iniciado A especifica o de qualquer atributo da janela automaticamente desativar todos o
74. USU RIO TENHA DIREITO QUE VARIAM PARA CADA ESTADO Copyright O 1999 Macromedia Inc Todos os direitos reservados Este manual n o pode ser copiado fotocopiado reproduzido traduzido ou convertido em qualquer meio eletr nico ou formato mec nico integralmente ou em parte sem a aprova o pr via por escrito da Macromedia Inc N mero de parte ZDW30M100PO Agradecimentos Ger ncia do projeto Sheila McGinn Texto Kim Diezel Jed Hartman Lori Hylan e Marcelle Taylor Design e produ o de multim dia John Zippy Lehnus e Noah Zilberberg Engenharia da Ajuda Lori Hylan Edi o Anne Szabla e Rosana Francescato Desenho e produ o da impress o e da Ajuda Chris Basmajian e Noah Zilberberg Tradu o Kristin Conradi Agradecimentos especiais a Jaime Austin Heidi Bauer Kristin Conradi Margaret Dumas Mark Erickson Jean Fitzgerald Stephanie Goss Zena Harvill Noah Hoffman nj Missy Keadle Paul Madar Ben Rinzler Melnick em solteira Charles Nadeau Ken Sundermeyer Mike Sundermeyer Vernon Viehe Scott Richards Peter von dem Hagen Raymond Lim Daniel Di Gallo Yoko Vogt Megy Nascimento Lyris Wiedemann Richard Verdoni Victor Grigorieff Linda Page Rubric Inc e s equipes de engenharia e garantia de qualidade do Dreamweaver Primeira edi o dezembro de 1999 Macromedia Inc 600 Townsend St San Francisco CA 94103 NDICE INTRODU O Gula de INHOUS O ass aerta didi psd pda a dd a 9 Requisitos
75. Uma tabula o w Qualquer caractere alfanum rico b w coincidir com Alfabeto em inclusive o sinal de sublinhado Alfabeto cir lico e com objeto e Equivale a A Za z0 9 abstrato em nenhum objeto abstrato WW Qualquer caractere que n o seja WW coincidir com amp em Joca amp Control Enter ou Shift Enter no Windows ou Control Return ou Shift Return ou Command Return no Macintosh alfanum rico Equivale a 9 A Za z0 9 Caractere de retorno Verifique se a op o Ignorar os diferentes espa os em branco est desmarcada ao fazer essa busca quando n o forem utilizadas as express es regulares Observe que esse procedimento coincidir com um determinado caractere mas n o a no o geral de quebra de p gina por exemplo n o coincidir com um r tulo lt br gt ou lt p gt Os caracteres de retorno aparecem como espa os na janela do documento e n o como quebras de linha Mateus e com em 100 Gerenciamento desites 163 164 Cap tulo 5 Utilize par nteses para definir grupos nas express es regulares que ser o mencionadas posteriormente use 1 2 3 etc no campo Localizar ou Substituir para referir se ao primeiro segundo terceiro etc grupos de par nteses Por exemplo a busca de d d d e sua substitui o por 2 1 3 troca o dia e o m s em uma data separada por barras inclinadas na convers o entre o formato de
76. Windows ou Shift no Alt no Shift Alt no Option no Command no Windows ou Windows ou Windows ou Macintosh Macintosh Command Command Command Shift no Option no Shift Macintosh Macintosh Option no Macintosh F1 Ajuda de Ajuda da Dreamweaver i Como Extens o dos on line utilizar o recursos do Dreamweaver Dreamweaver F2 Renomear o i Paleta de E e arquivo no objetos mapa do site apenas no Windows 422 Ap ndice A Tecla de Nenhum Shift Alt no Control no Control Control Control fun o modificador Windows ou Windows ou Shift no Alt no Shift Alt no Option no Command no Windows ou Windows ou Windows ou Macintosh Macintosh Command Command Command Shift no Option no Shift Macintosh Macintosh Option no Macintosh F3 Localizar Inspetor de ii novamente propriedades apenas no Windows F4 Mostrar Iniciador Sair apenas Fechar a janela ii ocultar as no Windows janelas flutuantes F5 Arquivos do Atualizar o Atualizar o Mapa do site i Desconectar site painel Local painel remoto do site remoto F6 paleta de Converter as Converteras bibliotecas tabelas em camadas camadas em tabela F7 Estilos CSS Verificar a Estilos HTML li ortografia F8 Comportamen Verificar os Verificar os a to v nculos v nculos selecionados No site inteiro F9 paleta de Adicionar s Linha de tempo x hist rico quadro prim rio F10 inspetor de
77. a fim de exibir as outras p ginas editadas do site Tente selecionar os itens do menu de salto na p gina Products 3 Quando terminar de verificar o site que voc criou feche a janela do navegador e em seguida retorne ao Dreamweaver e escolha Arquivo gt Fechar para que a home page seja fechada CAP TULO 2 Princ pios b sicos do Dreamweaver O trabalho inicial com o Dreamweaver t o f cil quanto abrir ou criar um novo documento HT ML Por m para experimentar amplamente o Dreamweaver voc dever compreender os conceitos b sicos subjacentes rea de trabalho do programa e saber escolher as op es mais adequadas ao seu estilo de trabalho Sobre a rea de trabalho do Dreamweaver A rea de trabalho do Dreamweaver flex vel adaptando se a diversos estilos de trabalho e n veis de experi ncia Ela possui alguns componentes que ser o utilizados constantemente e A janela do documento exibe o documento atual medida que criado e editado e O Iniciador cont m bot es para abrir e fechar os inspetores e as paletas utilizadas com maior fregi ncia Os cones no Iniciador est o repetidos no Mini iniciador na parte inferior da janela do documento para facilitar o acesso quando o Iniciador estiver fechado poss vel definir quais cones aparecer o no Iniciador utilizando o painel de paletas flutuantes da caixa de di logo Prefer ncias e A paleta de objetos cont m bot es para criar v rios tipos d
78. a ser localizado no campo de texto adjacente ao menu pop up Localizar Por exemplo digite a express o Sem t tulo Escolha Dentro do r tulo ou Fora do r tulo e em seguida escolha um r tulo no menu pop up adjacente Por exemplo escolha Dentro do r tulo e em seguida title Clique no bot o com o sinal de adi o a fim de restringir mais ainda a busca dos r tulos com um ou mais atributos espec ficos Uma vez que o r tulo lt title gt n o possui atributos n o ser necess rio utilizar esta op o para localizar todas as p ginas sem t tulo no site Escolha Localizar o pr ximo para abrir o pr ximo documento que contiver o texto de busca ou clique em Localizar todos para gerar uma lista de documentos que cont m esse texto Como salvar os padr es de busca poss vel salvar os padr es de busca para uso posterior clicando no bot o Salvar a consulta na caixa de di logo Localizar ou substituir O salvamento de uma consulta conveniente se esta for realizada com fregii ncia por exemplo para retirar r tulos n o padronizados de documentos criados com um outro editor visual de HTML ou para confirmar se todas as imagens contidas em um arquivo possuem os atributos HEIGHT WIDTH e ALT antes que o documento seja publicado na Web e se voc n o quiser reconstruir v rias vezes esse padr o de busca Para salvar um padr o de busca 1 Defina os par metros da busca seguindo as etapas descritas em Co
79. abrir as prefer ncias de visualiza o no navegador escolha Editar gt Prefer ncias e selecione Visualizar no navegador ou Arquivo gt Visualizar no navegador gt Editar a lista de navegadores Visualizar utilizando o servidor local apenas no Windows permite escolher se ser utilizado um servidor local ao visualizar uma p gina em um navegador Para que esta op o funcione necess rio que haja um software de servidor em execu o no computador local Quando esta op o for selecionada o Dreamweaver fornecer a p gina para a visualiza o por um servidor local como uma URL iniciada por http localhost Com esta op o desativada o Dreamweaver abrir o documento em um navegador com um caminho de arquivo iniciado por file Em alguns casos os v nculos especificados como caminhos relativos raiz do site n o funcionar o adequadamente quando abertos em um navegador com o caminho do tipo file adiciona um navegador lista exclui da lista o navegador selecionado Editar altera as defini es do navegador selecionado Navegador prim rio e Navegador secund rio especificam se o navegador selecionado prim rio ou secund rio A tecla F12 abre o navegador prim rio A combina de teclas Control F12 no Windows ou Command F12 no Macintosh abre o navegador secund rio Gerenciamento de sites 171 172 Cap tulo 5 Como verificar o tempo e o tamanho da descarga O tamanho da p gina atual e o tempo
80. adi o para buscas m ltiplas de palavras pe styles m Listar os t picos Ajuda contextual fornece um bot o Ajuda em qualquer caixa de di logo ou um cone de ponto de interroga o nos inspetores janelas e paletas que abre um t pico relevante da ajuda Clique aqui para abrir a Ajuda Formato Nenhum z Fonte padr o z Tam Nenhum z E B z z ma Destino H Barra de navega o da Ajuda do Dreamweaver fornece bot es nos quais o usu rio pode clicar para mover se entre os t picos Os bot es Anterior e Pr ximo levam no ao pr ximo t pico ou ao anterior em uma se o seguindo a ordem dos t picos no sum rio Tutorial do Dreamweaver O Tutorial do Dreamweaver o melhor local para iniciar caso a pessoa n o tenha muita experi ncia em desenvolvimento de sites da Web Ao trabalhar ajudado pelo tutorial voc aprender a editar uma amostra de site da Web com alguns dos recursos mais avan ados e teis do Dreamweaver O tutorial est na Ajuda do Dreamweaver e no manual Usando o Dreamweaver Guia do usu rio do Dreamweaver manual impresso O manual Usando o Dreamweaver uma alternativa impressa Ajuda do Dreamweaver Alguns t picos de refer ncia sobre op es do programa n o est o inclu dos no manual impresso consulte as p ginas da Ajuda para obter informa es sobre esses t picos Manual Extens o dos recursos do Dreamweaver O manual e as p ginas da Ajuda de Extens o
81. anexar um comportamento a uma linha de tempo na p gina 305 e Como utilizar os comportamentos na p gina 299 Arrastar a camada permite que o usu rio arraste uma camada Utilize esta a o para criar quebra cabe as controles deslizantes e outros elementos m veis da interface do usu rio Consulte Arrastar a camada na p gina 314 Mostrar ocultar as camadas mostra oculta ou restaura a visibilidade padr o de uma ou mais camadas Esta a o til para mostrar informa es medida que o usu rio interage com a p gina Consulte Mostrar ocultar as camadas na p gina 329 Executar a linha de tempo e Parar a linha de tempo permitem que o usu rio inicie e pare a linha de tempo clicando em um v nculo ou bot o Estas a es tamb m podem iniciar e parar uma linha de tempo automaticamente quando o usu rio passar o cursor sobre um v nculo uma imagem ou um outro objeto Consulte Executar a linha de tempo e Parar a linha de tempo na p gina 333 Ir para o quadro da linha de tempo faz com que a linha de tempo salte at um determinado quadro A caixa de sele o Loop no inspetor de linhas de tempo adiciona a a o Ir para o quadro da linha de tempo ap s o ltimo quadro da anima o retornando a ao primeiro quadro e iniciando a anima o novamente Consulte Ir para o quadro da linha de tempo na p gina 332 Definir o texto da camada substitui o conte do e a formata o de uma camada existen
82. cada item de menu Para obter informa es sobre a cria o de um arquivo de comando utilizando a paleta de hist rico consulte Como criar novos comandos a partir de etapas do hist rico na p gina 101 Consulte Extens o dos recursos do Dreamweaver para obter informa es sobre a maneira de escrever os seus pr prios comandos JavaScript a partir do zero CHECKED uma express o JavaScript que indica se o item de menu tem uma marca de sele o ao seu lado no menu se a express o for avaliada como true o item ser exibido com essa marca DYNAMIC se estiver presente indica que um item de menu determinado dinamicamente por um arquivo HTML que cont m c digo JavaScript para definir o texto e o estado do item de menu Se um r tulo for especificado como DYNAMIC o atributo FILE tamb m dever ser definido Como alterar os atalhos de teclado Se os atalhos de teclado padr o n o forem convenientes voc poder alterar ou remover Os j existentes ou adicionar novos Para alterar um atalho de teclado 1 Saia do Dreamweaver 2 Fa a uma c pia de seguran a do arquivo menus xml 3 Abra o arquivo menus xml em um editor de texto como BBEdit HomeSite ou Wordpad n o o abra no Dreamweaver 4 Procure em Matriz de atalhos de teclado na p gina 420 e localize um atalho que n o esteja sendo utilizado ou algum ao qual pretende dar uma nova atribui o Se um atalho de teclado for designado novamente risque o em u
83. camada for solta Selecione Apenas se estiver encaixada nos casos em que o JavaScript for executado apenas se a camada tiver alcan ado o destino de soltura 14 Clique em OK 15 Verifique se o evento padr o corresponde ao desejado Se n o corresponder escolha um outro evento no menu pop up Se os eventos desejados n o estiverem listados altere o navegador de destino no menu pop up Eventos de Lembre se de que as camadas n o contam com o suporte dos navegadores da vers o 3 0 Nota N o poss vel anexar a a o Arrastar a camada a um objeto associado aos eventos onMouseDown ou onClick Como reunir informa es sobre a camada arrast vel Quando voc anexar a a o Arrastar a camada a um objeto o Dreamweaver inserir a fun o MM draglayer na se o HEAD do documento Al m de registrar a camada como arrast vel esta fun o definir tr s propriedades de cada camada arrast vel MM LEFTRIGHT MM UPDOWN e MM SNAPPED que voc poder utilizar nas suas pr prias fun es JavaScript a fim de determinar as posi es horizontal e vertical da camada e se a camada atingiu o destino de soltura Por exemplo a fun o a seguir exibe o valor da propriedadeMM UPDOWN a posi o vertical da camada em um campo de formul rio denominado curPosField Os campos de formul rio s o teis para exibir informa es atualizadas continuamente pois s o din micos ou seja poss vel alterar o seu conte do depois que a
84. campo superior esquerdo da tabela ou em qualquer lugar da extremidade direita ou inferior e Clique uma vez na tabela e escolha Modificar gt Tabela gt Selecionar a tabela e Clique uma vez na tabela e escolha Editar gt Selecionar tudo e Posicione o ponto de inser o em qualquer lugar dentro da tabela e selecione o r tulo lt table gt na parte inferior esquerda da janela do documento Aparecer o al as de sele o em volta da tabela quando esta for selecionada Como criar tabelas 219 Para selecionar as colunas e linhas siga um dos procedimentos abaixo e Posicione o ponto de inser o na margem esquerda de uma linha ou no alto de uma coluna Clique quando a seta de sele o aparecer e Clique em uma c lula e arraste horizontal ou verticalmente para selecionar diversas linhas ou colunas Para selecionar uma ou mais c lulas siga um dos procedimentos abaixo e Clique em uma c lula e arraste a vertical ou horizontalmente at uma outra c lula e Clique em uma c lula e em seguida pressione a tecla Shift e clique em outra c lula Todas as c lulas que estiverem dentro da regi o retangular ser o selecionadas LJ ERES C Para selecionar c lulas descont guas siga um dos procedimentos abaixo e Pressione a tecla Control no Windows ou Command no Macintosh e clique na tabela para adicionar c lulas linhas ou colunas sele o Selecione diversas c lulas na t
85. como aplicar estilos personalizados 193 como converter em HTML 196 como criar 192 conflitantes 194 em modelos 367 HTML 184 tabela de convers o de CSS em markup HTML 197 Consulte tamb m folhas de estilos estilos CSS atributo CLASS 192 atributos como converter em HTML 197 como aplicar personalizados 193 como criar 192 seletores 192 ndice remissivo 431 estilos HTML como aplicar 185 como criar 186 187 como editar 187 como excluir 186 como exibir 185 como limpar 186 como modificar 187 como remover da paleta 186 como utilizar em outros sites 188 cone de Novo estilo 187 estilos personalizados Consulte tamb m folhas de estilos estrutura de diret rios site Consulte sites evento onBlur 334 eventos como alterar em comportamentos 305 como desencadear a es 303 definidos 299 dispon veis para diversos navegadores e objetos 301 exibi o dos arquivos do site 82 express es regulares 162 extensibilidade comportamentos de outros fabricantes 306 JavaScript 402 vis o geral 401 F filmes como inserir 283 filmes Flash como controlar 313 como inserir 288 como redimensionar 203 propriedades 288 vis o geral 288 filmes Shockwave como controlar 313 como inserir 286 como redimensionar 203 propriedades 287 vis o geral 286 filmes Show Me 11 firewalls como definir o host e a porta 147 op es 142 432 ndice remissivo Fireworks arquivos HTML do 209 como otimizar as imagens no 207 Design Notes no 176 folh
86. cont m o nome do usu rio atual que retirou o arquivo No servidor remoto o Dreamweaver n o torna os arquivos retirados somente de leitura Caso os arquivos sejam transferidos com um aplicativo diferente do Dreamweaver ser poss vel sobrescrever os arquivos retirados No entanto nos outros aplicativos o arquivo lck estar vis vel ao lado do arquivo retirado na hierarquia de arquivos a fim de evitar acidentes deste g nero A devolu o e retirada pode ser ativada em alguns sites e desativada em outros Para obter mais informa es sobre a transfer ncia de arquivos entre os sites local e remoto sem devolv los ou retir los consulte Como obter os arquivos de um servidor remoto na p gina 151 e Como colocar os arquivos em um servidor remoto na p gina 153 Como configurar o sistema de devolu es e retiradas Antes de utilizar o sistema de devolu es e retiradas algumas op es precisam ser configuradas Nota Para poder utiliz lo necess rio ter associado o site local a um servidor de rede ou de FTP remoto Consulte Como associar um servidor remoto a um site local na p gina 140 Para definir as op es de devolu o e retirada 1 2 Escolha Site gt Definir os sites e em seguida clique em Editar Na lista de categorias esquerda clique em Devolver retirar Selecione a op o Ativar a devolu o e retirada de arquivos se estiver trabalhando em equipe ou sozinho mas utilizan
87. conte do tanto dos sites locais quanto dos remotos Os sites locais s o exibidos como uma lista de arquivos um mapa visual ou ambos Os sites remotos s o exibidos apenas como uma lista de arquivos Para poder exibir um site remoto necess rio configur lo consulte Como configurar um site remoto na p gina 140 Para exbir os arquivos do site local siga um dos procedimentos abaixo e Escolha Janela gt Arquivos do site e Na janela do site se o mapa do site estiver sendo exibido clique no bot o Arquivos do site e Site scaal frquivo Editar Exibir Site Janela A scaai 7 Navega o no site E index html O painel que exibe os arquivos do site local identificado por Pasta local enquanto que o painel que exibe os arquivos do site remoto identificado por Site remoto Nota Se voc estiver exibindo um site local que n o possui um site remoto correspondente o painel Site remoto estar vazio Para exibir o mapa e os arquivos do site siga um dos procedimentos abaixo e Escolha Janela gt Mapa do site Se anteriormente apenas o mapa fosse exibido sem os arquivos do site esta janela exibir apenas o mapa e Na janela do site clique no bot o Mapa do site ou mantenha pressionado o bot o do mouse com o ponteiro sobre o bot o Mapa do site e no menu pop up selecione Mapa e arquivos Arquivo Editar Exibir Site Janela Aj a scaal 7 Site re Apenas mapa Mapa e arquivos O p
88. conveniente inser o da data atual em qualquer formato de sua prefer ncia e conta com a op o de atualiza o desta data sempre que o arquivo for salvo Para inserir a data atual em um documento 1 Na janela do documento coloque o ponto de inser o onde deseja inserir a data 2 Siga um dos procedimentos abaixo e Escolha Inserir gt Data e Abra a paleta de objetos escolhendo Janela gt Objetos e em seguida abra o painel Comuns e clique no bot o Data 3 Na caixa de di logo resultante selecione o formato do nome do dia da semana da data e da hora 4 Se desejar que a data inserida seja atualizada a cada vez que o documento for salvo selecione Atualizar automaticamente no salvamento Se desejar que a data se torne um texto simples quando for inserida sem atualiza es autom ticas cancele a sele o desta op o 5 Clique em OK para inserir a data Sobre os caracteres especiais Certos caracteres especiais s o representados em HTML por um nome ou n mero denominado entidade O HTML inclui nomes de entidades de caracteres como o s mbolo de direitos autorais amp copy o s mbolo de E comercial amp amp e o s mbolo de marca comercial registrada amp reg Cada entidade possui um nome como amp mdash e um equivalente num rico como amp 4151 Infelizmente muitos navegadores especialmente os mais antigos e os diferentes do Navigator e do Internet Explorer n o exibem muitas das entidades com
89. datas americanas e europ ias Como criar sites para v rios navegadores Ao criar um site voc deve se lembrar de que h v rios navegadores da Web que poder o ser utilizados pelos seus visitantes Se poss vel desenhe sites com ampla compatibilidade levando em considera o as outras restri es do projeto Por que e quando criar sites compat veis com diversos navegadores S o utilizados mais de duas d zias de navegadores da Web diferentes sendo que a maioria deles foi lan ada em mais de uma vers o Mesmo que voc vise apenas o Netscape Navigator e Microsoft Internet Explorer que s o utilizados pela maioria dos usu rios da Web lembre se de que nem todos t m a vers o mais recente desses navegadores Se o site estiver na Web mais cedo ou mais tarde algu m ir visit lo utilizando o Netscape Navigator 2 0 o navegador que a AOL fornece aos seus clientes ou algum navegador somente de texto como o lynx Em algumas circunst ncias n o necess rio criar sites compat veis com diversos navegadores Por exemplo se o site estiver dispon vel apenas na intranet de sua empresa e voc souber que todos os funcion rios usam o mesmo navegador poss vel otimizar o site de modo a ser compat vel com esse navegador Da mesma forma se for criado conte do HTML para ser distribu do em CD ROM junto com um navegador poss vel supor que todos os seus clientes ter o acesso a esse determinado navegador Na maioria dos casos
90. de FTP Se a conex o for estabelecida atrav s de uma porta diferente da 21 o padr o de FTP digite o n mero aqui Op es de coloca o Salvar os arquivos antes da coloca o indica que os arquivos n o salvos devem s lo sem aviso antes de serem colocados no site remoto Definir os sites remete o caixa de di logo Definir os sites onde poss vel editar um site existente ou criar um novo site Consulte Como associar um servidor remoto a um site local na p gina 140 poss vel tamb m definir se os tipos de arquivos a serem transferidos devem estar no formato ASCII texto ou bin rio Para fazer isso abra o arquivo FTPExtensionMap txt na pasta Dreamweaver Configuration Voc pode modificar e excluir a lista dos tipos de arquivos que ser o transferidos em cada formato bem como adicionar os seus pr prios tipos de arquivo Quando uma extens o n o estiver definida nesse arquivo o Dreamweaver transferir automaticamente o arquivo em modo bin rio Nota No Macintosh o arquivo FTPExtensionMap txt tamb m inclui informa es sobre extens es de arquivo de mapeamento para os criadores e tipos de arquivos do Macintosh Esse mapeamento permite que a um arquivo descarregado seja atribu do o cone correto e que esse arquivo seja aberto pelo aplicativo adequado quando for clicado duas vezes no Localizador Gerenciamento de sites 147 148 Cap tulo 5 Observe que quando um arquivo for transferido como ASCII a
91. de camadas ou as t cnicas de inser o arrastar e soltar ou de desenho para criar camadas aninhadas poss vel utilizar o aninhamento para agrupar as camadas Uma camada aninhada se move com a sua camada m e e herda a mesma visibilidade As camadas da Netscape criadas com os r tulos LAYER e ILAYER se expandem para acomodar a altura e largura das camadas filhas Como utilizar as camadas 237 238 Cap tulo 9 O c digo HT ML a seguir um exemplo de uma camada aninhada lt div id Parent style position absolute left 56px top 54px width 124px height 158px z index 1 gt Conte do da camada m e lt div id Nested style position absolute left 97px top 114px width 54px height 69px z index 1 gt Conte do da camada aninhada lt div gt lt div gt Ao desenhar camadas utilize as prefer ncias de camadas para que uma camada criada dentro de outra seja aninhada Escolha Editar gt Prefer ncias selecione Camadas e clique na caixa de sele o Aninhamento Consulte Como definir as prefer ncias de camadas na p gina 239 Para criar uma camada aninhada siga um dos procedimentos abaixo e Para inserir uma camada aninhada posicione o ponto de inser o dentro de uma camada existente e escolha Inserir gt Camada e Para arrastar e soltar uma camada aninhada arraste o bot o Camada da paleta de objetos e em seguida solte o dentro de uma camada existente e Para desenhar uma camada aninhada cliq
92. de lista desejado Lista n o ordenada com marcadores Lista ordenada numerada ou Lista de defini es 3 Inicie digitando a lista e pressione a tecla Enter no Windows ou Return no Macintosh para passar a um novo item 4 Para completar a lista pressione duas vezes Enter no Windows ou Return no Macintosh Para criar uma lista utilizando um texto existente 1 Selecione uma s rie de par grafos para convert los em uma lista 2 Clique no bot o Lista com marcadores ou Lista numerada no inspetor de propriedades ou escolha Texto gt Lista e selecione o tipo de lista desejado Lista n o ordenada com marcadores Lista ordenada numerada ou Lista de defini es Para criar uma lista aninhada 1 Selecione os itens da lista que ser o aninhados 2 Clique no bot o Recuo no inspetor de propriedades ou escolha Texto gt Recuo Como formatar o texto 183 184 Cap tulo 6 Como formatar o texto com os estilos HTML Um estilo HTML definido por um ou mais r tulos HTML como B FONT e CENTER que aplicam formata o ao texto A especifica o HTML 4 0 lan ada pelo World Wide Web Consortium W3C no in cio de 1998 recomenda a utiliza o dos r tulos de formata o HTML em vez das folhas de estilos CSS Entretanto na pr tica os r tulos de formata o HTML embora proporcionem um controle mais limitado sobre a apar ncia que as folhas de estilos CSS contam com o suporte de um n mero maior de
93. de propriedades Consulte Sobre as propriedades das molduras e conjuntos de molduras na p gina 272 O inspetor de molduras mostra a hierarquia da estrutura do conjunto de molduras de uma maneira que n o poder estar vis vel na janela do documento No inspetor de molduras uma borda tridimensional larga circunda um conjunto de molduras as molduras s o envoltas por uma linha fina cinza e cada moldura identificada por um nome topFrame mainFrame leftFrame Para exibir o inspetor de molduras siga um dos procedimentos abaixo Escolha Janela gt Molduras e Pressione as teclas Ctrl e F10 no Windows ou Command e F10 no Macintosh Para selecionar uma moldura no inspetor de molduras Clique na moldura no inspetor de molduras Para selecionar um conjunto de molduras no inspetor de molduras Clique na borda que circunda as molduras no inspetor de molduras Como utilizar as molduras 269 270 Cap tulo 10 Como selecionar uma moldura ou um conjunto de molduras na janela do documento Na janela do documento quando uma moldura for selecionada suas bordas estar o marcadas com uma linha pontilhada quando um conjunto de molduras for escolhido todas as bordas das molduras nesse conjunto estar o marcadas com uma linha pontilhada Selecione as molduras ou os conjuntos de molduras para alterar suas propriedades O inspetor de propriedades exibir as propriedades da moldura ou conjunto de moldu
94. definir a largura da coluna 1 Clique em qualquer uma das c lulas da coluna ou selecione a mesma 2 Escolha Janela gt Propriedades para abrir o inspetor de propriedades 3 No campo L siga um dos procedimentos abaixo e Digite um n mero para definir a largura da coluna com o n mero de pixels especificado e Digite um n mero seguido de um sinal de percentual para definir a largura da coluna como sendo uma percentagem da largura da tabela e Deixe o campo em branco o padr o para que o navegador e o Dreamweaver possam determinar a largura adequada de acordo com o conte do da c lula e as larguras das outras colunas Normalmente o espa o alocado com base na linha mais longa ou na imagem mais larga Esta a raz o pela qual uma coluna s vezes torna se mais larga do que as outras na tabela quando nela for adicionado o conte do Como limpar as larguras das colunas e as alturas das linhas A maneira mais simples de definir as larguras das colunas e as alturas das linhas arrastar as bordas da tabela Quando uma coluna ou linha for arrastada automaticamente ser o definidos valores espec ficos para todas as linhas e colunas em pixels ou como percentagens das dimens es da tabela dependendo da maneira como a largura da tabela for especificada Se o resultado desejado n o puder ser obtido arrastando as bordas da tabela poss vel limpar as larguras das colunas e recome ar Para alterar as larguras e alturas sig
95. desses sistemas de markup a fim de informar ao Dreamweaver como exibir os r tulos Nota Esta se o explica como definir a apar ncia de um r tulo personalizado no Dreamweaver mas n o como editar o seu conte do ou propriedades Para obter informa es sobre a cria o de um inspetor de propriedades para verificar e alterar as propriedades de um r tulo personalizado consulte Inspetor de propriedades em Extens o dos recursos do Dreamweaver Cada arquivo de banco de dados de r tulos define o nome tipo modelo do conte do esquema de interpreta o e cone para um ou mais r tulos personalizados Pode ser criado qualquer n mero de arquivos de banco de dados de r tulos mas todos devem residir na pasta Configuration ThirdParty Tags para que sejam lidos e processados pelo Dreamweaver Os arquivos de banco de dados de r tulos t m a extens o xml Se voc estiver trabalhando simultaneamente em diversos sites diferentes e sem rela o por exemplo como um programador independente coloque todas as especifica es de r tulos relativos a um determinado site em um nico arquivo Em seguida basta incluir esse arquivo de banco de dados de r tulos nos cones personalizados e inspetores de propriedades que ser o enviados para a equipe que far a manuten o do site Uma especifica o de r tulo definida com um r tulo XML denominado TAGSPEC por exemplo o c digo abaixo descreve a especifica o para o r tulo
96. diversas imagens para um bot o da barra de navega o 1 Selecione a imagem da barra de navega o a ser editada e abra o inspetor de comportamentos 2 Na coluna A es do inspetor de comportamentos clique duas vezes na a o Definir a imagem da barra de navega o associada ao evento que estiver alterando 3 Clique na guia Avan ado da caixa de di logo Definir a imagem da barra de navega o 4 No menu pop up Quando o elemento estiver sendo exibido escolha um estado para a imagem e Escolha Imagem inativa se desejar alterar a exibi o de uma outra imagem depois que um usu rio tiver clicado na imagem selecionada e Escolha Imagem sobreposta ou Imagem sobreposta enquanto estiver inativa se desejar alterar a exibi o de uma outra imagem quando o ponteiro estiver sobre a imagem selecionada Exemplo 5 Nalista Definir tamb m a imagem selecione uma outra imagem a ser definida na p gina 6 Clique em Procurar para selecionar o arquivo de imagem a ser exibido ou digite o caminho e nome do arquivo de imagem no campo Para o arquivo de imagem 7 Se tiver selecionado Imagem sobreposta ou Imagem sobreposta enquanto inativa na etapa 4 ainda h uma op o adicional Clique em Procurar no campo de texto Se inativa o arquivo de imagem para selecionar o arquivo de imagem ou digite o caminho e nome do arquivo de imagem a ser exibido Definir o texto da moldura A a o Definir o texto da moldura permite definir dinam
97. do Fireworks importa o c digo de origem de HTML e as imagens resultantes da divis o de uma imagem utilizando o Fireworks O Macromedia Fireworks pode ser iniciado a partir do Dreamweaver para editar uma imagem PNG de origem Consulte Como trabalhar com os arquivos HTML do Fireworks na p gina 209 Iniciar e editar a m dia cada tipo de arquivo aberto em um editor externo adequado clicando duas vezes em qualquer imagem ou arquivo de m dia na janela do site Consulte Como utilizar um editor de imagens externo na p gina 205 Compatibilidade aprimorada com Macintosh possibilita uma melhor experi ncia do usu rio com o Macintosh O Dreamweaver oferece agora suporte aos Servi os de navega o interpreta imagens utilizando o QuickTime e fornece v rios outros aprimoramentos Como personalizar e estender os recursos do Dreamweaver Menus e atalhos personaliz veis permitem editar personalizar e expandir os menus e atalhos de teclado do Dreamweaver Consulte Como personalizar os menus do Dreamweaver na p gina 391 Extensibilidade do Dreamweaver fornece 300 novas fun es de API que permitem ao usu rio criar suas extens es em JavaScript para o Dreamweaver inclusive paletas flutuantes personalizadas e conversores de atributos Consulte o manual Extens o dos recursos do Dreamweaver Recursos de tecnologias de Web e HTML Abaixo est o alguns recursos teis dispon veis na Web A especifica o HTML 4 0 http ww
98. dos recursos do Dreamweaver cont m informa es para os programadores de JavaScript e C no Modelo de objeto de documento do Dreamweaver e nas APIs interfaces de programa o de aplicativos que permitem criar objetos comandos inspetores de propriedades comportamentos e conversores Centro de suporte do Dreamweaver O site do Centro de suporte do Dreamweaver na Web atualizado regularmente com as informa es mais recentes sobre o Dreamweaver al m de conter recomenda es de usu rios experientes informa es sobre os t picos avan ados exemplos dicas e atualiza es Verifique o site da Web com freq ncia para ler as not cias mais recentes sobre o Dreamweaver e saber como obter o melhor rendimento do programa em hrtp www macromedia com support dreamweaver Guia de introdu o 13 14 Introdu o Onde iniciar Este guia da Ajuda do cont m informa es para os leitores em v rios n veis A fim de tirar o melhor proveito desta documenta o comece lendo as partes mais relevantes para o seu n vel de experi ncia Para os iniciantes no HTML 1 2 Inicie visualizando o Tour guiado Em seguida trabalhe utilizando o Tutorial do Dreamweaver Prossiga Princ pios b sicos do Dreamweaver na p gina 61 Como criar sites e documentos na p gina 73 V nculos e navega o na p gina 109 e Gerenciamento de sites na p gina 139 Para aprender a formatar o texto e incluir as imagens
99. e colar sequ ncias de anima o 1 Clique em uma barra de anima o para selecionar uma segii ncia Para selecionar v rias segi ncias pressione a tecla Shift enquanto clica ou pressione a teclas Control e A no Windows ou Command e no Macintosh para selecionar todas as segii ncias 2 Copie ou recorte a sele o 3 Siga um dos procedimentos abaixo e Mova o cabe ote de execu o para um outro ponto da linha de tempo e Selecione uma outra linha de tempo no menu pop up Linha de tempo e Abra outro documento ou crie um novo e em seguida clique no inspetor de linhas de tempo Cole a sele o na linha de tempo As barras de anima o de um mesmo objeto n o podem se sobrepor porque uma camada n o pode ocupar dois lugares simultaneamente nem uma imagem pode ter duas origens diferentes ao mesmo tempo Se a barra de anima o a ser colada se sobrepuser a uma outra do mesmo objeto o Dreamweaver acomodar automaticamente a sele o at o primeiro quadro sem sobreposi o H dois princ pios a serem levados em conta quando forem coladas seq ncias de anima o em um outro documento Se voc copiar uma seq ncia de anima o de uma camada e o novo documento j contiver uma camada com o mesmo nome o Dreamweaver aplicar as propriedades da anima o camada existente no novo documento Se voc copiar uma sequi ncia de anima o de uma camada e o novo documento n o contiver uma camada com o mesmo
100. e indicadores de conte do apenas da sua home page Os elementos da se o HEAD podem ser exibidos utilizando o menu Exibir ou o inspetor de origem de HTML Para exibir os elementos da se o HEAD de um documento Escolha Exibir gt Conte do do cabe alho Para cada elemento do conte do do HEAD aparecer um cone na parte superior da janela do documento Para inserir elementos na se o HEAD de um documento 1 Siga um dos procedimentos abaixo e Escolha Cabe alho no menu pop up situado no alto da paleta de objetos e clique em um dos bot es desta paleta e Escolha um item no submenu Inserir gt Cabe alho 2 Insira as op es para o elemento na caixa de di logo que aparecer ou no inspetor de propriedades Para editar os elementos na se o HEAD de um documento 1 Clique em um dos cones na se o HEAD para selecion lo 2 Defina ou modifique as propriedades do elemento no inspetor de propriedades Para obter informa es sobre as propriedades de determinados elementos do HEAD consulte os seguintes t picos na Ajuda do Dreamweaver e propriedades do r tulo META e propriedades do t tulo e propriedades da palavra chave e propriedades da descri o e propriedades de atualiza o e Como definir as propriedades de roteiros e propriedades b sicas e propriedades do v nculo Como criar sites e documentos 107 108 Cap tulo 3 CAP TULO 4 V nculos e navega o Ap s especificar um site local para
101. elementos de formul rios ou qualquer um dos v rios elementos HTML O navegador determinar os elementos que poder o aceitar comportamentos O Internet Explorer 4 0 por exemplo disp e de um conjunto muito maior de eventos para cada elemento do que o Netscape Navigator 4 0 ou qualquer navegador da vers o 3 0 poss vel especificar mais de uma a o por evento As a es ocorrem na ordem em que aparecem na lista da coluna A es do inspetor de comportamentos Para obter mais informa es sobre como alterar a ordem das a es consulte Como alterar um comportamento na p gina 305 Como utilizar os comportamentos 303 304 Cap tulo 12 Para anexar um comportamento 1 Selecione um objeto Para anexar um comportamento p gina inteira clique no r tulo lt body gt no seletor de r tulos situado no canto inferior esquerdo da janela do documento 2 Escolha Janela gt Comportamentos para abrir o inspetor de comportamentos ou clique no bot o Comportamentos no Iniciador O r tulo HTML do objeto selecionado aparecer na barra de t tulo do inspetor de comportamentos 3 Clique no bot o com o sinal de adi o e escolha uma a o no menu pop up A es As a es que estiverem esmaecidas no menu n o poder o ser escolhidas porque n o funcionar o no documento selecionado Por exemplo a a o Executar a linha de tempo estar esmaecida se o documento n o possuir linhas de tempo Se n o houver qualquer ev
102. em seguida selecione Criar item de biblioteca e Clique no cone de Novo item de biblioteca na rea inferior direita da paleta de bibliotecas e Escolha Modificar gt Biblioteca gt Adicionar objeto biblioteca 3 Digite um nome para o novo item de biblioteca Como definir as prefer ncias de biblioteca A cor de realce dos itens de biblioteca pode ser personalizada al m de mostrada ou ocultada nas prefer ncias de realce Para alterar a cor de realce de itens de biblioteca 1 Escolha Editar gt Prefer ncias e selecione Realce 2 Clique na caixa de cores para selecionar uma cor para os itens de biblioteca 3 Selecione Mostrar para alternar a exibi o da cor de realce da biblioteca A op o Exibir gt Elementos invis veis tamb m dever estar ativa para que a cor de realce da biblioteca fique vis vel na janela do documento 4 Clique em OK para fechar a caixa de di logo Prefer ncias Modelos e bibliotecas 373 374 Cap tulo 14 Como adicionar um item de biblioteca a uma p gina Quando um item de biblioteca for adicionado a uma p gina o conte do atual ser inserido no documento junto com uma refer ncia ao item original Ap s a inser o do conte do n o necess rio que o item original esteja presente para que o conte do seja exibido Para adicionar um item de biblioteca 1 Coloque o ponto de inser o na janela do documento 2 Escolha Janela gt Biblioteca ou clique no bot o Biblioteca
103. es ocorrer o O Dreamweaver inclui v rias a es relacionadas a comportamentos outras a es podem ser encontradas no site do Dreamweaver na Web assim como em sites de programa o de outros fabricantes Consulte Como descarregar e instalar os comportamentos de outros fabricantes na p gina 306 Se souber utilizar os recursos JavaScript voc tamb m poder gravar as suas pr prias a es relacionadas a comportamentos Para obter mais informa es sobre a grava o de a es de comportamentos consulte Extens o dos recursos do Dreamweaver 299 300 Cap tulo 12 Como utilizar o inspetor de comportamentos Utilize o inspetor de comportamentos para anexar comportamentos aos objetos e modificar os par metros dos comportamentos previamente anexados Os comportamentos s o listados alfabeticamente segundo os eventos Se houver diversas a es para o mesmo evento estas aparecer o na ordem na qual ser o executadas Os r tulos selecionados aparecer o no alto do inspetor Para abrir o inspetor de comportamentos escolha Janela gt Comportamentos ou clique no bot o Comportamentos no Iniciador A es exibe uma lista de a es que podem ocorrer A escolha de uma a o acarretar o aparecimento da caixa de di logo Par metros Excluir remove uma determinada a o e o evento a ela associado da lista do inspetor de comportamentos Eventos de especifica os navegadores nos quais o comportamento dever
104. escolha as op es que indicam as a es a serem tomadas se a vers o do navegador corresponder ou for mais avan ada do que a especificada e como proceder no caso contr rio As op es s o Ir para a URL Ir para a URL Alt e Continuar nesta p gina Especifique uma vers o do Microsoft Internet Explorer Nos menus pop up adjacentes escolha as op es que indicam as a es a serem tomadas se a vers o do navegador corresponder ou for mais avan ada do que a especificada e como proceder no caso contr rio As op es s o Ir para a URL Ir para a URL Alt e Continuar nesta p gina No menu pop up Outros navegadores escolha uma op o para especificar as a es a serem tomadas se o navegador n o for o Netscape Navigator ou o Microsoft Internet Explorer Continuar nesta p gina a melhor op o para os navegadores diferentes do Navigator e IE porque a maioria n o oferece suporte ao JavaScript e se n o puderem ler este comportamento eles permanecer o na p gina de qualquer maneira Digite os caminhos e nomes de arquivos da URL e da URL alternativa nos campos de texto situados na parte inferior da caixa de di logo Se digitar uma URL remota digite tamb m o prefixo http al m do endere o www 10 Clique em OK Como utilizar os comportamentos 311 312 Cap tulo 12 11 Verifique se o evento padr o corresponde ao desejado Se n o corresponder escolha um outro evento no menu pop up Se os eventos desejados
105. especificar as propriedades do conjunto de molduras 1 2 Selecione um conjunto de molduras No menu pop up Bordas selecione se as bordas ser o exibidas em volta das molduras quando o documento for exibido em um navegador Se desejar exibir as bordas selecione Sim Se n o desejar exibir as bordas selecione N o Caso o navegador do usu rio deva determinar como as bordas ser o exibidas selecione Padr o No campo Largura da borda digite um n mero para especificar a largura das bordas no conjunto de molduras Digite 0 para especificar sem borda No campo Cor da borda digite um valor hexadecimal correspondente a uma cor ou utilize o seletor de cores para selecionar uma cor para a borda Para selecionar as op es de tamanho de moldura clique nas guias na caixa Sele o de lin col para escolher uma linha ou nas guias situadas no alto para selecionar uma coluna Em seguida no campo Valor digite um n mero para definir o tamanho da linha ou coluna selecionada e no menu pop up Unidades especifique a unidade de medida para o n mero no campo Valor Como denominar um documento com um conjunto de molduras Adicione um t tulo a uma p gina com um conjunto de molduras atrav s da op o de propriedades da p gina Para denominar uma p gina com um conjunto de molduras 1 Selecione um conjunto de molduras seguindo um dos procedimentos abaixo Clique na borda do conjunto de molduras no inspetor de molduras
106. evento padr o corresponde ao desejado Se n o corresponder escolha um outro evento no menu pop up Se os eventos desejados n o estiverem listados altere o navegador de destino no menu pop up Eventos de Como utilizar os comportamentos 321 Exemplo 322 Cap tulo 12 Executar o som Utilize a a o Executar o som para executar um som Por exemplo poss vel executar um efeito sonoro sempre que o ponteiro do mouse for passado sobre um v nculo ou executar um clipe de m sica quando a p gina for carregada Nota poss vel que os navegadores exijam algum tipo de suporte de udio como um plug in de udio para que possam executar sons Para poder utilizar a a o Executar o som 1 Selecione um objeto e abra o inspetor de comportamentos 2 Clique no bot o com o sinal de adi o e escolha Executar o som no menu pop up A es 3 Clique em Procurar para selecionar um arquivo de som ou digite o caminho e nome do arquivo no campo Executar o som 4 Clique em OK 5 Verifique se o evento padr o corresponde ao desejado Se n o corresponder escolha um outro evento no menu pop up Se os eventos desejados n o estiverem listados altere o navegador de destino no menu pop up Eventos de Mensagem pop up A a o Mensagem pop up exibe um alerta em JavaScript com a mensagem por voc especificada Como os alertas em JavaScript possuem apenas um bot o OK utilize esta a o para fornecer informa es ao usu r
107. for FALSE o cone aparecer da mesma forma que em um r tulo vazio Por exemplo o r tulo HAPPY definido acima dever aparecer no HTML da seguinte maneira lt P gt Este um par grafo que inclui uma inst ncia do r tulo lt CODE gt HAPPY lt CODE gt lt HAPPY gt Jo o lt HAPPY gt lt P gt e na janela do documento aparecer desta forma M happydoc avocado8 happuy html 35 his is a paragraph that includes an instance of the HAPPY tag 85 271 x 186 Rj Como personalizar o Dreamweaver 405 406 Cap tulo 16 Nos r tulos n o vazios com um valor TRUE para RENDER CONTENTS o conte do entre os r tulos de abertura e finaliza o por exemplo o texto entre os r tulos lt MYTAG gt este o conte do entre os r tulos de abertura e finaliza o lt MYTAG gt aparecer na janela do documento em vez do cone Se a op o Exibir gt Elementos invis veis estiver ativada o conte do ser real ado utilizando a cor para os r tulos de outros fabricantes especificada nas prefer ncias de realce Observe que o realce se aplica apenas aos r tulos definidos nos arquivos de banco de dados de r tulos Para alterar a cor de realce dos r tulos de outros fabricantes 1 Escolha Editar gt Prefer ncias 2 Selecione Realce na lista de categorias 3 Clique na caixa de cores R tulos de outros fabricantes para exibir a paleta de cores 4 Escolha uma cor e em seguida clique em OK para sair da caixa de di
108. gina 86 Durante a inclus o do conte do os objetos podem ser selecionados e modificados diretamente na janela do documento Em alguns casos talvez seja preciso selecionar os marcadores que representem os elementos da p gina que n o est o vis veis na janela do documento Consulte Como selecionar os elementos na janela do documento na p gina 89 Para auxili lo a gerenciar o seu site o Dreamweaver exibe os arquivos do site como uma lista de arquivos ou como um mapa do site poss vel utilizar o mapa do site para criar e exibir rapidamente os prot tipos de seus sites da Web Consulte Como trabalhar com os arquivos do site na p gina 82 e Como exibir a estrutura do site na p gina 127 Quando j houver alguns documentos no site poss vel criar v nculos para conect los a outros documentos do site ou de sites remotos a endere os eletr nicos ou roteiros Consulte Como criar os v nculos na p gina 113 Por ltimo defina um site remoto que corresponda ao site local e carregue para ele os arquivos locais a fim de tornar as p ginas vis veis aos visitantes Consulte Como configurar um site remoto na p gina 140 Sobre o planejamento de sites No Dreamweaver o termo site pode se referir a um site da Web ou a um local de armazenamento de documentos pertencentes a um site da Web A maneira usual de se configurar um site envolve a cria o de uma pasta no disco local que cont m todos os a
109. gina ou moldura selecionada atualmente em um documento enquanto que a rea branca representa a s nova s moldura s Para inserir um conjunto de molduras predefinido 1 Coloque o ponto de inser o no documento que o conjunto de molduras ir circundar 2 Siga um dos procedimentos abaixo e No painel de molduras da paleta de objetos selecione um conjunto de molduras predefinido Para inserir o conjunto de molduras clique em um cone ou arraste o diretamente para o documento e Para selecionar um conjunto de molduras predefinido escolha Inserir gt Molduras gt Esquerda Direita Superior Inferior Esquerda e superior Superior esquerda Esquerda superior Dividir Como utilizar as molduras 267 268 Cap tulo 10 Como criar um conjunto aninhado de molduras Um conjunto de molduras que estiver dentro de outro denominado um conjunto aninhado de molduras Cada novo conjunto de molduras criado inclui o seu documento HTML com um conjunto de molduras e documentos com molduras Utilize as molduras aninhadas para configurar v rias molduras para um documento Por exemplo um documento com tr s molduras poder exibir o logotipo de uma empresa em uma moldura no alto do documento os controles de navega o em uma moldura no lado esquerdo de um documento e o conte do em uma terceira moldura Para criar um conjunto aninhado de molduras 1 Coloque o ponto de inser o na moldura onde dever ser inserido um conjunto aninha
110. ginas existentes podem ser vinculadas para serem abertas em uma moldura e pode ser configurado um comportamento que altere o conte do em v rias molduras O que o usu rio percebe como uma nica p gina da Web com duas molduras constitui na verdade tr s arquivos distintos o arquivo do conjunto de molduras e dois arquivos com o conte do que aparece dentro das molduras A altera o das propriedades das molduras e dos conjuntos de molduras permite redimensionar as molduras e utilizar os v nculos e os destinos para controlar o conte do de uma moldura 265 266 Cap tulo 10 Quando a op o Exibir gt Bordas da moldura estiver desativada o conjunto de molduras ter exatamente a mesma apar ncia que em um navegador Quando as bordas da moldura forem exibidas o Dreamweaver adicionar espa o ao redor do documento para a borda e aumentar a largura das bordas estreitas Isto facilita a maneira de arrastar e selecionar uma moldura Como criar as molduras As molduras podem ser criadas modificando um documento existente do Dreamweaver dividindo o em reas de documento adicionais H v rias maneiras de criar um conjunto de molduras voc pode desenh lo ou selecionar entre v rios conjuntos de molduras predefinidos Como criar um conjunto de molduras Antes de criar um conjunto de molduras ou trabalhar com molduras torne vis veis as bordas da moldura na janela do documento Para exibir as bordas da moldura em um document
111. gt Alinhar com a sele o O canto superior esquerdo da imagem de rastreamento ser alinhado com o canto superior esquerdo do objeto selecionado Sobre a interatividade e anima o Muitas p ginas da Web s o est ticas contendo apenas texto e imagens Atrav s do uso de interatividade e anima o o Dreamweaver permite avan ar em rela o s p ginas est ticas a fim de capturar o interesse dos visitantes Forne a coment rios aos visitantes medida que eles se movem e clicam demonstre conceitos valide os dados do formul rio sem entrar em contato com o servidor em suma aumente as chances dos visitantes examinarem e fazerem mais coisas sem deixar a p gina H diversas maneiras de adicionar interatividade e anima o s p ginas utilizando o Dreamweaver Utilize os comportamentos para realizar tarefas em resposta a determinados eventos como o realce de um bot o quando o visitante passar o ponteiro sobre ele a valida o de um formul rio quando o visitante clicar no bot o Enviar ou a abertura de uma segunda janela do navegador quando a p gina principal tiver terminado de ser carregada Consulte Como utilizar os comportamentos na p gina 299 Utilize as linhas de tempo para criar anima es que dispensam plug ins controles ActiveX ou Java As linhas de tempo utilizam HTML din mico para alterar a posi o de uma camada ou a origem de uma imagem ao longo do tempo ou para chamar certas a es de compor
112. gt Importar o HTML do Word e selecione um arquivo a ser aberto O Dreamweaver abrir o arquivo e em seguida a caixa de di logo Limpar o HTML do Word automaticamente e Escolha Arquivo gt Abrir e selecione um arquivo a ser aberto gerado automaticamente um arquivo de registro de corre es de HTML Isso n o faz parte do recurso Limpar o HTML do Word Clique em Continuar para sair da caixa de di logo No Dreamweaver escolha Comandos gt Limpar o HTML do Word 3 Qualquer um dos m todos produzir uma pequena demora enquanto o Dreamweaver tenta determinar a vers o do Word utilizada para salvar o arquivo Se o Dreamweaver n o puder detect la selecione a vers o correta utilizando o menu pop up Escolha quais op es o recurso Limpar o HTML do Word deve utilizar A guia B sica exibe as seguintes op es Remover todo o markup espec fico ao Word remove todo o HTML espec fico ao Word inclusive o XML dos r tulos lt html gt os dados meta personalizados do Word e os r tulos de v nculos no cabe alho do documento o markup XML do Word os r tulos condicionais e seus conte dos al m dos par grafos vazios e margens dos estilos poss vel optar por selecionar cada uma dessas op es individualmente utilizando a guia Detalhado Limpar CSS remove todas as CSS espec ficas do Word incluindo os estilos CSS de entrada linear quando for poss vel nos casos em que o estilo pai tiver as mesmas propriedades do est
113. gt Objetos Para inserir um objeto clique no bot o correspondente da paleta de objetos ou arraste o cone do bot o at a janela do documento Mantenha pressionada a tecla Control no Windows ou Option no Macintosh enquanto insere um objeto a fim de ignorar a caixa de di logo de inser o de objetos e inserir um objeto vazio alocador de espa o do tipo especificado Por exemplo para inserir um alocador de espa o de uma imagem sem especificar um arquivo de imagem mantenha pressionada a tecla Control ou Option e clique no bot o Imagem Como padr o a paleta de objetos cont m seis pain is Caracteres Comuns Formul rios Molduras Cabe alho e Invis veis Utilize o menu pop up situado no alto da paleta para alternar entre os pain is Voc pode modificar qualquer objeto da paleta ou criar novos consulte Como alterar a paleta de objetos na p gina 388 Para obter informa es sobre as op es de cada painel consulte os t picos relacionados na Ajuda do Dreamweaver 1 EEE Caracteres Gsm E Comuns e Comuns Formul rios E 1 Head Invis veis E E Molduras s E a EE 4 uy 26 2a A paleta de objetos cont m os seguintes pain is e O painel Comuns cont m os objetos mais comumente utilizados como Imagem Tabela e Camada e O painel Caracteres cont m caracteres especiais como os s mbolos de copyright e marca registrada al m de aspas curvas Observe que poss vel que este
114. gt Visualizar no navegador e em seguida selecione um navegador com o qual deseja exibir a home page da Scaal Utilize um navegador 4 0 para exibir este site our story products this week 5 Mova o ponteiro sobre os tr s itens no lado esquerdo da p gina Our Story Products e This Week e observe que estes ser o real ados para indicar que s o v nculos ativos Clique nos v nculos para poder explorar o site Para retornar home page clique no logotipo da Scaal que est localizado na parte superior de cada p gina 6 Feche o navegador quando terminar de examinar o site 7 Feche o Dreamweaver Tutorial do Dreamweaver 23 24 Cap tulo 1 Como est o organizados os arquivos do tutorial Tanto os arquivos de HTML conclu dos quanto os parcialmente conclu dos que foram utilizados neste tutorial est o localizados na pasta Scaal site na pasta Tutorial As imagens e os outros arquivos associados ao site est o nas subpastas de Scaal site O caminho completo para a pasta Scaal site ir variar dependendo de onde o Dreamweaver 3 0 for instalado Cada arquivo tem um nome significativo por exemplo o arquivo HTML para a p gina conclu da dos produtos Scaal chama se products index html Os arquivos parcialmente conclu dos nos quais voc ir trabalhar t m denomina es semelhantes s de seus correspondentes no site conclu do por m iniciam com DW3_ A vers o parcialmente conclu da de products index
115. hist rico Observe que as etapas executadas novamente ser o aquelas que tiverem sido selecionadas e n o necessariamente a etapa indicada pelo polegar Como aplicar etapas a outros objetos poss vel aplicar um conjunto de etapas da paleta de hist rico a qualquer objeto na janela do documento Para aplicar as etapas da paleta de hist rico a um novo objeto 1 Selecione o objeto 2 Selecione a etapa ou etapas relevantes na paleta de hist rico e em seguida clique em Executar novamente Se forem selecionados diversos objetos em um documento aos quais se aplicar o as etapas da paleta de hist rico os objetos ser o tratados como uma nica sele o N o poss vel selecionar cinco imagens por exemplo e aplicar a mesma altera o de tamanho a todas elas simultaneamente Para aplicar uma s rie de etapas a cada objeto em um conjunto de objetos certifique se de que a ltima eteapa da s rie selecionar o pr ximo objeto do conjunto O procedimento abaixo um exemplo de defini o de espa amento vertical e horizontal de uma s rie de imagens Para definir o espa amento vertical e horizontal de uma s rie de imagens 1 Inicie com um documento no qual cada linha consiste de uma pequena imagem como um marcador gr fico seguida de texto O objetivo manter as imagens afastadas do texto e de outras imagens acima e abaixo Selecione a primeira imagem No inspetor de propriedades clique no bot o Expandir a seta
116. imagem cuja origem seja images myPhoto gif e images tamb m contenha um arquivo chamado myPhoto png o Fireworks abrir o arquivo PNG Como formato de arquivo original do Fireworks os arquivos PNG ret m todas as informa es sobre camadas vetores cores e efeitos originais e sempre todos os elementos s o edit veis Os arquivos devem ter a mesma extens o png para que possam ser reconhecidos como PNG pelo Dreamweaver Caso seja escolhido qualquer outro aplicativo como editor de imagens externo e iniciado a partir do Dreamweaver o aplicativo abrir a imagem selecionada images myPhoto gif por exemplo Se voc preferir abra manualmente o arquivo original a partir do qual o GIF foi gerado por exemplo myPhoto psd deve ser o arquivo original do Photoshop fa a as altera es e regenere a imagem GIF O Dreamweaver ainda atualizar a imagem quando esta for aberta na janela do documento no retorno ao programa Para iniciar o editor de imagens externo siga um dos procedimentos abaixo e Mantenha pressionada a tecla Control no Windows ou Command no Macintosh e clique duas vezes na imagem a ser editada e Clique com o bot o direito do mouse no Windows ou pressione a tecla Control no Macintosh e clique na imagem a ser editada e em seguida escolha Editar no menu contextual e Clique com o bot o direito do mouse no Windows ou pressione a tecla Control no Macintosh e clique na imagem a ser editada e em seguida esco
117. inspetor de origem de HTML Como utilizar o BBEdit com o Dreamweaver apenas no Macintosh Quando a integra o com o BBEdit estiver ativada uma vez que um documento estiver aberto no BBEdit e no Dreamweaver a altern ncia de um aplicativo para outro atualizar automaticamente o documento com as altera es mais recentes Al m disso ambos os programas controlam a sele o por exemplo poss vel fazer uma sele o no Dreamweaver e em seguida alternar para o BBEdit onde o mesmo elemento estar selecionado A integra o com o BBEdit pode ser desativada se for mais conveniente trabalhar com uma vers o mais antiga do BBEdit ou um outro editor de texto HTML As sele es n o ser o controladas se a integra o com o BBEdit estiver desativada Para utilizar o BBEdit com o Dreamweaver 1 Siga um dos procedimentos abaixo e Escolha Editar gt Iniciar o editor externo e Clique em Editor externo no canto superior esquerdo do inspetor de origem de HTML 2 Edite o documento no BBEdit 3 Clique no bot o Dreamweaver na paleta de ferramentas de HTML no BBEdit para retornar ao Dreamweaver Para desativar a integra o com o BBEdit 1 Escolha Editar gt Prefer ncias 2 Escolha Editores externos na lista de categorias esquerda 3 Cancele a sele o de Ativar a integra o com o BBEdit e clique em OK Como editar o HTML 355 356 Cap tulo 13 Como editar os arquivos ColdFusion e Active Server no Dreamweaver
118. logo Verificar a ortografia para verificar a ortografia no documento Para exibir a caixa de di logo escolha Texto gt Verificar a ortografia Adicionar ao dicion rio pessoal adiciona a palavra n o reconhecida ao seu dicion rio pessoal Para remover as palavras do dicion rio pessoal edite o arquivo Personal dat em um editor de texto Ignorar ignora a ocorr ncia de uma palavra n o reconhecida Ignorar todas ignora todas as ocorr ncias de uma palavra n o reconhecida Alterar substitui a ocorr ncia da palavra n o reconhecida pelo texto digitado na caixa Alterar para ou pela sele o na lista Sugest es Alterar todas substitui todas as ocorr ncias da palavra n o reconhecida CAP TULO 7 Como inserir imagens O Dreamweaver como a maioria dos navegadores pode exibir imagens nos formatos JPEG e GIF O Dreamweaver o Microsoft Internet Explorer 4 0 ou mais avan ado e o Netscape Navigator 4 04 ou mais avan ado tamb m oferecem suporte s imagens no formato PNG Em geral JPEG o formato de alto n vel para imagens fotogr ficas ou de tons cont nuos e GIF preferido para as imagens de tons descont nuos ou aquelas com extensas reas de cores s lidas O formato PNG um substituto livre de patentes ao GIF que inclui suporte para as imagens que tiverem as cores indexadas escala de cinza e true color Ele tamb m oferece suporte ao canal alfa para transpar ncia PNG o formato de arquivo original do Macromedia Fire
119. n o funcionem adequadamente mesmo se os objetos estiverem em formul rios diferentes Observe que no Dreamweaver 2 os nomes exclusivos de objetos de formul rios em formul rios diferentes da mesma p gina n o eram necess rios Se houver alguma p gina que tenha sido criada no Dreamweaver 2 com elementos de diversos formul rios com o mesmo nome modifique a p gina a fim de poder associar os comportamentos a ela Como criar formul rios 385 386 Cap tulo 15 Duas outras diretrizes para a nomea o de objetos e Os nomes de objetos dos formul rios assim como outros objetos devem se iniciar com uma letra e n o com um n mero e N o utilize palavras reservadas a JavaScript como top ou navigator como nomes de objetos Os dois comportamentos espec ficos aos formul rios s o explicados abaixo Para obter informa es sobre outros comportamentos consulte Como utilizar os comportamentos na p gina 299 Validar o formul rio verifica o conte do de determinados campos de texto a fim de garantir que o usu rio tenha digitado o tipo correto de dados Consulte Validar o formul rio na p gina 334 Definir o texto do campo de texto substitui o conte do de um campo de texto pelo conte do especificado Consulte Definir o texto do campo de texto na p gina 328 CAP TULO 16 Como personalizar o Dreamweaver O Dreamweaver pode ser personalizado de v rios modos permitindo que voc trabalhe da m
120. n o estiverem listados altere o navegador de destino no menu pop up Eventos de Lembre se de que o objetivo deste comportamento o de verificar as diversas vers es de navegadores portanto recomend vel escolher um evento que funcione tanto na vers o 3 0 quanto nas posteriores dos navegadores Verificar o plug in Utilize a a o Verificar o plug in para enviar os visitantes a outras p ginas dependendo da ocorr ncia de um determinado plug in instalado Por exemplo poss vel optar por enviar os usu rios para uma p gina se eles possu rem o Shockwave ou para outra p gina se eles n o o possu rem Nota N o poss vel detectar determinados plug ins no Microsoft Internet Explorer IE utilizando o JavaScript Contudo a sele o de Flash ou Director adicionar o c digo de VBScript apropriado p gina a fim de detectar os plug ins no IE do Windows Para poder utilizar a a o Verificar o plug in 1 2 Selecione um objeto e abra o inspetor de comportamentos Clique no bot o com o sinal de adi o e escolha Verificar o plug in no menu pop up A es No menu pop up Plug in escolha um plug in ou clique em Enter e digite o nome exato do plug in no campo adjacente Utilize o nome exato do plug in conforme o especificado em negrito na p gina Sobre os plug ins no Netscape Navigator No Windows escolha Ajuda do Navigator gt comando Sobre os plug ins no Macintosh escolha Sobre os plug ins no menu
121. n o o abra no Dreamweaver 4 Localize o r tulo MENUITEM adequado e altere o valor de seu atributo NAME N o modifique o atributo ID do item Como personalizar a apar ncia das caixas de di logo Os layouts das caixas de di logo para objetos comandos e comportamentos s o especificados como formul rios HT ML nos arquivos HTML do diret rio Configuration no diret rio do aplicativo do Dreamweaver Os formul rios podem ser editados com o Dreamweaver consulte Como criar formul rios na p gina 381 Para alterar a apar ncia de uma caixa de di logo 1 Localize o arquivo htm adequado em Configuration Objects Configuration Commands ou Configuration Behaviors 2 Fa a uma c pia do arquivo em um local diferente da pasta Configuration 3 Abraa c pia no Dreamweaver edite o formul rio e salve a c pia Como personalizar o Dreamweaver 395 396 Cap tulo 16 4 Saia do Dreamweaver 5 Transfira essa c pia modificada de volta para a pasta Configuration substituindo a original conveniente fazer primeiro uma c pia de seguran a da original para que possa ser restaurada posteriormente se for necess rio 6 Reinicie o Dreamweaver para examinar as altera es Apenas a apar ncia da caixa de di logo deve ser modificada mas n o o seu funcionamento ela dever conter ainda os mesmos tipos e nomes dos elementos de formul rio a fim de que as informa es obtidas pelo Dreamweaver na caixa de di logo possam ser
122. na Web que oferecem roteiros CGI para utiliza o gratuita ou para serem modificados de acordo com as suas necessidades Consulte Recursos de tecnologias de Web e HTML na p gina 19 Tamb m poss vel perguntar ao provedor de servi os da Internet ou equipe da Web se h qualquer roteiro CGI dispon vel que j esteja configurado para a execu o no seu servidor Para examinar uma introdu o cria o de roteiros CGI consulte os recursos CGI listados em Recursos de tecnologias de Web e HTML na p gina 19 Como utilizar os comportamentos com formul rios poss vel anexar comportamentos aos formul rios e objetos de formul rios utilizando qualquer um dos comportamentos que aparecem no inspetor de comportamentos quando o formul rio ou objeto de formul rios for selecionado Os comportamentos Validar o formul rio e Definir o texto do campo de texto estar o dispon veis apenas se tiver sido inserido um campo de texto no documento Ao anexar o comportamento Validar o formul rio a um objeto de formul rio necess rio especificar o campo de texto que dever ser validado Por exemplo se for anexado Validar o formul rio ao bot o Enviar especifique um campo de texto criado para Nome Ao aplicar comportamentos necess rio se assegurar que todos os objetos do formul rio no documento tenham um nome exclusivo Se for utilizado o mesmo nome para dois objetos diferentes poss vel que os comportamentos
123. navega o 125 caixa de di logo Inserir ncora com nome 119 caixa de di logo Inserir o menu de salto 122 caixa de di logo Inserir o v nculo de correio eletr nico 120 caixa de di logo Par metros 297 caixa de di logo Verificador de v nculos 169 caixa de di logo Vincular a folha de estilos externa 190 caixas de di logo como personalizar 395 camadas arrast veis 317 atalhos 414 como alinhar 246 como alterar a ordem de empilhamento 248 como alterar a visibilidade com a paleta de camadas 249 como alterar a visibilidade com os comportamentos 329 como aninhar 237 como ativar 243 como converter em tabelas 250 como converter para navegadores 3 0 252 como criar 236 como desenhar v rias 236 como encaixar na grade 247 como evitar sobreposi es 251 como inserir 236 como manipular 243 como mover 246 como posicionar 239 como redimensionar 245 como selecionar 244 como selecionar m ltiplas 242 marcadores como exibir 237 na cria o de tabelas 250 pontos de ancoragem 90 prefer ncias 239 propriedades 239 propriedades de m ltiplas 242 vis o geral 235 visibilidade 249 caminhos absolutos 110 relativos a documento 110 relativos raiz 112 Consulte tamb m v nculos caminhos absolutos 110 caminhos relativos a documento como definir 115 sobre 110 caminhos relativos raiz como definir 115 prefer ncia Visualizar utilizando o servidor local 113 sobre 112 caminhos relativos raiz do site Consulte caminhos rela
124. navegadores que as folhas de estilos CSS e provavelmente far o parte das ferramentas dos programadores da Web enquanto as vers es 3 0 e anteriores dos navegadores se constitu rem em uma parte consider vel do tr fego de rede Para obter informa es espec ficas sobre a formata o com os r tulos HTML consulte um dos seguintes t picos e Como alterar as caracter sticas da fonte na p gina 179 e Como alterar a cor do texto na p gina 181 e Como alinhar o texto e os elementos na p gina 182 Os r tulos HTML que definem a estrutura do documento em vez da sua apar ncia cabe alhos par grafos e listas por exemplo ainda s o uma parte importante da especifica o HTML De fato caso voc esteja planejando utilizar as folhas de estilos CSS para definir as caracter sticas das fontes da p gina importante utilizar os r tulos de cabe alho padr o pois eles ajudam a preservar a estrutura da p gina nos navegadores que n o oferecem suporte s folhas de estilos CSS Para examinar um exemplo de como isto funciona experimente exibir as p ginas da Ajuda do Dreamweaver em um navegador da vers o 3 0 Consulte Como aplicar os r tulos de par grafo e cabe alho na p gina 178 Como utilizar os estilos HTML Utilize os estilos HTML para salvar a formata o de texto e par grafos que dever ser reutilizada em outra parte de seus documentos Uma vez criado um estilo HTML com base em um ou mais r t
125. no canto inferior direito se desejar examinar todas as propriedades da imagem Digite n meros nos campos de texto Espa o V e Espa o H a fim de definir o espa amento entre as imagens Clique na barra de t tulo da janela do documento em vez de clicar dentro da mesma para retornar o foco do teclado a esta janela Pressione a tecla de seta esquerda para mover o ponto de inser o para a esquerda da imagem Em seguida pressione a tecla de seta abaixo para mover o ponto de inser o uma linha abaixo deixando o esquerda da segunda imagem da s rie Pressione as teclas Shift e seta direita para selecionar a segunda imagem Nota N o selecione a imagem clicando na mesma sen o n o ser poss vel executar as etapas novamente Selecione as etapas da paleta de hist rico que correspondem altera o do espa amento da imagem e sele o da pr xima imagem Clique no bot o Executar novamente para executar estas etapas novamente O espa amento da imagem atual ser alterado e a pr xima imagem ser selecionada Continue a clicar em Executar novamente at que todas as imagens tenham sido espa adas corretamente Para aplicar as etapas a um objeto em outro documento utilize Copiar as etapas consulte Como copiar e colar as etapas entre documentos na p gina 100 Como criar sites e documentos 99 100 Cap tulo 3 Como copiar e colar as etapas entre documentos Cada documento aberto possui o seu pr pri
126. no documento externamente e lhe avisa para recarreg lo ao retornar Se o BBEdit for utilizado no Macintosh siga as etapas em Como utilizar o BBEdit com o Dreamweaver apenas no Macintosh na p gina 355 em vez das expostas abaixo Para configurar os editores externos para os tipos de arquivos diferentes de texto e HTML consulte Como iniciar um editor externo de m dia na p gina 284 Para escolher um editor de HTML externo 1 Escolha Editar gt Prefer ncias 2 Seleciones Editores externos na lista de categorias esquerda 3 Apenas no Macintosh cancele a sele o da op o Ativar a integra o com o BBEdit para poder utilizar um outro editor de HTML Para utilizar o BBEdit mantenha selecionada a op o Ativar a integra o com o BBEdit e ignore as etapas restantes 4 Clique no bot o Procurar ao lado da caixa Editor de HTML para escolher um editor de texto 5 Na op o Recarregar os arquivos modificados especifique o que o Dreamweaver dever fazer ao detectar altera es externas em um documento aberto no Dreamweaver 6 Na op o Salvar na inicia o especifique se o Dreamweaver deve sempre salvar o documento antes de iniciar o editor nunca salvar o documento ou lhe perguntar se salvar ou n o o documento quando o editor de texto externo for iniciado Para iniciar o editor de HTML externo Escolha Editar gt Iniciar o editor externo ou clique em Editor externo no canto superior esquerdo do
127. no inspetor de propriedades Para alterar as prefer ncias dos elementos invis veis 1 Escolha Editar gt Prefer ncias e em seguida clique em Elementos invis veis 2 Selecione os elementos que dever o se tornar vis veis A marca de sele o ao lado do nome do elemento na caixa de di logo significa que ele estar vis vel 8 8 q quando a op o Fxibir gt Elementos invis veis for selecionada Para obter uma explica o de cada prefer ncia dos elementos invis veis consulte a Ajuda do Dreamweaver Como escolher as cores No Dreamweaver muitas caixas de di logo assim como o inspetor de propriedades de muitos elementos de p ginas cont m uma caixa de cores que abre uma paleta de cores Utilize essa paleta para escolher a cor de um elemento Para escolher uma cor no Dreamweaver 1 Escolha uma caixa de cores em qualqualquer caixa de di logo ou no inspetor de propriedades Caixa de cores HCCOOFF Paleta Conta gotas aceito pela Web Apagador Siga um dos procedimentos abaixo Utilize o conta gotas para selecionar uma amostra de cor na paleta Todas as cores na paleta s o aceitas pela Web Utilize o conta gotas para selecionar uma cor de qualquer lugar do monitor do computador inclusive fora das janelas do Dreamweaver Se voc clicar na rea de trabalho ou em outro aplicativo o Dreamweaver selecionar a cor do local clicado por m poss vel alternar para o outro aplicativo neste
128. nomes maior parte dos navegadores exibe a maioria das entidades num ricas comumente utilizadas por m mais dif cil se lembrar do n mero de uma entidade do que de seu nome Para obter uma lista de nomes e n meros de entidades consulte a URL com a tabela de entidades apresentada em Recursos de tecnologias de Web e HTML na p gina 19 Como criar sites e documentos 87 88 Cap tulo 3 Como inserir caracteres especiais poss vel inserir diversos caracteres especiais no formato de entidades HTML utilizando o painel Caracteres da paleta de objetos Para inserir um caractere especial em um documento 1 Na janela do documento coloque o ponto de inser o onde deseja inserir o caractere especial 2 Siga um dos procedimentos abaixo e Escolha o nome do caractere no submenu Inserir gt Caracteres e Abra a paleta de objetos escolhendo Janela gt Objetos selecione o painel Caracteres e escolha um caractere na lista Existem muitos outros caracteres especiais dispon veis para poder selecion los escolha Inserir gt Caracteres gt Mais selecione um caractere e clique em OK Como utilizar as r guas horizontais As r guas horizontais linhas s o teis para organizar as informa es Em uma p gina poss vel separar visualmente o texto e os objetos com uma ou mais r guas Para criar uma r gua horizontal 1 Na janela do documento coloque o ponto de inser o onde deseja inserir a r gua h
129. o Texto mas n o os r tulos Para anular a cor da op o Texto de um r tulo espec fico selecione a op o Incluir o conte do Coment rios especifica a cor dos r tulos dos coment rios lt gt e seus conte dos Padr o de r tulo especifica a cor de todos os r tulos exceto aqueles de coment rios Para ignorar a cor em Padr o de r tulo defina a cor de r tulos espec ficos Espec fica ao r tulo as defini es em Padr o de r tulo e Cor do texto podem ser ignoradas ao especificar cores para determinados r tulos Como editaro HTML 349 350 Cap tulo 13 Para definir uma cor de um r tulo espec fico 1 Selecione um r tulo na caixa Espec fica ao r tulo Pressione a tecla Shift e clique para selecionar v rios r tulos adjacentes ou pressione a tecla Control e clique no Windows ou pressione a tecla Command e clique no Macintosh para selecionar diversos r tulos n o adjacentes Clique no bot o de op o ao lado da amostra de cor na parte inferior do painel e utilize um dos seguintes m todos para escolher um novo valor de cor No campo de texto ao lado da amostra digite um valor hexadecimal Clique na amostra de cor e selecione outra cor na paleta de cores aceitas pelo navegador ou no seletor de cores do sistema Para colorir o texto entre os r tulos de abertura e de finaliza o selecione Aplicar a cor ao conte do do r tulo Limpar o HTML Utilize o comando Limpar o HT ML
130. o lt tr gt HTML edit vel lt td width 149 height 45 gt enhsp lt td gt pode ser lt td width 5 bgcolor CCCC99 gt enbsp lt td gt dificado lt td wvidth 367 bgcolor CCCC99 height 45 gt lt font face Verdana Ar Moal product name lt EndEditable gt lt font gt lt font gt lt td gt lt tr gt lt tr gt lt td width 149 gt enhsp lt td gt lt td width 5 bgcolor fCCCC99 gt enhsp lt td gt lt td width 367 hbgcolor fCcCcccas gt lt font face Verdana Arial Helvetii production description lt fEndEditable gt lt font gt lt td gt lt tr gt lt tr gt lt td wvidth 149 gt enhsp lt td gt lt td width 5 bgcolor fCCCC99 gt enhsp lt td gt Como desmarcar uma regi o Caso voc marque uma regi o como edit vel e depois queira bloque la torn la n o edit vel novamente utilize o comando Desmarcar a regi o edit vel Para desmarcar uma regi o torn la n o edit vel 1 Escolha Modificar gt Modelos gt Desmarcar a regi o edit vel 2 Selecione o nome da regi o na lista e clique em OK A regi o ser bloqueada 366 Cap tulo 14 Como utilizar os estilos as linhas de tempo e os comportamentos nos modelos Os estilos linhas de tempo e comportamentos personalizados contam com suporte amplo nos modelos Para poder utilizar os estilos linhas de tempo e comportamentos em um modelo eles dever o ser definidos em uma regi o edit vel de um documento que
131. o 4 0 ou mais avan ada e 32 MB de mem ria de acesso aleat rio RAM mais 20 MB de espa o dispon vel em disco e Um monitor colorido com resolu o de 800 x 600 pixels e Uma unidade de CD ROM 10 Introdu o Para o Macintosh e Um Power Macintosh executando o Mac OS 8 1 ou mais avan ado e 32 MB de mem ria de acesso aleat rio RAM mais 20 MB de espa o dispon vel em disco e Um monitor colorido com resolu o de 800 x 600 pixels e Uma unidade de CD ROM Como instalar o Dreamweaver Siga estas etapas para instalar o Dreamweaver em um computador com o sistema Windows ou Macintosh Para instalar o Dreamweaver 1 Insira o CD do Dreamweaver na unidade de CD ROM do computador 2 Escolha uma dentre as seguintes op es e No Windows escolha Iniciar gt Executar Clique em Procurar e escolha o arquivo Setup exe no CD do Dreamweaver Clique em OK na caixa de di logo Executar para iniciar a instala o e No Macintosh clique duas vezes no cone do Instalador do Dreamweaver 3 Siga as instru es na tela 4 Se for solicitado reinicie o computador Introdu o ao Dreamweaver O pacote do Dreamweaver cont m v rios recursos para ajud lo a conhecer o programa rapidamente e tornar se um experiente criador de suas p ginas e sites da Web Esses recursos incluem p ginas de ajuda on line em HTML que aparecem no navegador filmes Show Me um tutorial e um manual impresso Al m disso o site do Dreamweave
132. o Definir o texto da camada 1 Selecione um objeto e abra o inspetor de comportamentos 2 Clique no bot o com o sinal de adi o e escolha Definir o texto gt Definir o texto da camada no menu pop up A es 3 Na caixa de di logo Definir o texto da camada utilize o menu pop up Camada para escolher a camada de destino 4 Digite uma mensagem no campo Novo HT ML e em seguida clique em OK 5 Verifique se o evento padr o corresponde ao desejado Se n o corresponder escolha um outro evento no menu pop up Se eventos desejados n o forem exibidos altere o navegador de destino no menu pop up Eventos de Exemplo Definir a mensagem de status A a o Definir a mensagem de status mostra uma mensagem na barra de status na parte inferior esquerda da janela do navegador Por exemplo poss vel utilizar esta a o para descrever o destino de um v nculo na barra de status em vez de mostrar a URL a ele associada Para examinar um exemplo de mensagem de status passe o mouse sobre qualquer um dos bot es de navega o na Ajuda do Dreamweaver poss vel incorporar qualquer chamada v lida de fun o JavaScript propriedade vari vel global ou outra express o no texto Para incorporar uma express o JavaScript coloque a entre chaves Para exibir um sinal de chaves preceda o por uma barra invertida A URL desta p gina window location e hoje new Date Para poder utilizar a a o Definir a mensag
133. o Dreamweaver carregue previamente as imagens no cache do navegador selecione a op o Pr carregar as imagens 4 Clique em OK Para testar uma imagem cambi vel 1 Escolha Arquivo gt Visualizar no navegador 2 No navegador passe o cursor sobre a imagem prim ria A exibi o alternar para a imagem cambi vel Pode ser criada tamb m uma barra de navega o utilizando o comando Inserir gt Barra de navega o Consulte Como inserir uma barra de navega o na p gina 125 Como trabalhar com os arquivos HTML do Fireworks O Dreamweaver facilita a colagem ou importa o do c digo de origem de HTML criado no Fireworks 3 para os documentos do Dreamweaver Se voc for propriet rio e utilizar o Fireworks poder copiar o HTML diretamente para a rea de transfer ncia no Fireworks e col lo em um documento do Dreamweaver Caso os arquivos HTML do Fireworks tenham sido enviados por outro designer poder ser utilizado Inserir objeto HTML do Fireworks para importar o HTML Nota O c digo de origem de HTML criado no Fireworks 2 tamb m pode ser importado para um documento do Dreamweaver Contudo se esse documento contiver o comportamento Imagem cambi vel simples ou Alternar os grupos o Dreamweaver n o os reconhecer e reportar um erro Como colar o HTML do Fireworks Se o Fireworks e o Dreamweaver forem utilizados simultaneamente na cria o de documentos a maneira mais f cil de inserir HTML do Fireworks n
134. o Dreamweaver com outros aplicativos O Dreamweaver adapta o seu desenho da Web e o processo de desenvolvimento facilitando assim o trabalho com outros aplicativos Para obter informa es sobre o trabalho com outros aplicativos como navegadores editores de HTML e de imagens e ferramentas de anima o consulte os seguintes t picos Para obter informa es sobre a utiliza o do Dreamweaver com outros editores de HTML como HomeSite ou BBEdit consulte Como utilizar os editores de HTML externos na p gina 354 e Podem ser especificados os navegadores preferidos para visualizar o site Consulte Como visualizar em navegadores na p gina 170 e O editor de imagens externo como Macromedia Fireworks pode ser iniciado no Dreamweaver Consulte Como utilizar um editor de imagens externo na p gina 205 e E poss vel configurar o Dreamweaver para que inicie um editor diferente de acordo com o tipo de arquivo Consulte Como iniciar um editor externo de m dia na p gina 284 Para obter informa es sobre a inclus o de anima o no seu site com os filmes Flash consulte Como inserir filmes Flash na p gina 288 e Para saber como tornar o site interativo utilizando os filmes Shockwave po consulte Como inserir filmes Shockwave na p gina 286 CAP TULO 3 Como criar sites e documentos Um site da Web um conjunto de documentos vinculados com atributos compartilhados co
135. o estilo do par grafo e Limpar o estilo da sele o para remover qualquer formata o independentemente de como a formata o original tenha sido aplicada atrav s da paleta de estilos HTML ou do inspetor de propriedades por exemplo Para remover um estilo da paleta de estilos HTML 1 Na paleta de estilos HTML desmarque a caixa de sele o para desativar a op o Aplica o autom tica 2 Selecione um estilo HTML 3 Clique no cone de Excluir o estilo lata de lixo no canto inferior direito da paleta Para criar um novo estilo HTML com base em texto j existente 1 No documento selecione ou crie um texto com a formata o a ser utilizada como base para o novo estilo HTML O inspetor de propriedades pode ser utilizado para exibir e aplicar a formata o 2 Na paleta de estilos HT ML clique no cone de Novo estilo no canto inferior direito 3 Na caixa de di logo Definir o estilo HT ML denomine o estilo e ajuste a formata o se for necess rio e Escolha se deseja aplicar o estilo HTML ao texto selecionado ou ao par grafo inteiro Observe que o estilo de par grafo ser aplicado ao bloco inteiro de texto onde estiver o ponto de inser o independentemente do texto selecionado Escolha se o estilo HTML ser adicionado ao estilo HTML existente CSS ou HTML do texto ou par grafo selecionado ou se substituir a formata o da sele o ou par grafo pelo novo estilo HTML Observe que as op es de f
136. o poder ser criada na frente de movida ou redimensionada sobre ou aninhada dentro de uma camada existente Se esta op o for ativada depois da cria o de camadas sobrepostas arraste a camada sobreposta e afaste a da outra camada Quando essa op o e o encaixe estiverem ativados a camada n o se encaixar na grade se isto acarretar a sobreposi o de duas camadas Em vez disso ela se encaixar na margem da camada mais pr xima Nota Certas a es n o impedir o que as camadas se sobreponham mesmo quando a op o Evitar sobreposi es estiver ativada Se inserir uma camada a partir do menu digite n meros no inspetor de propriedades ou reposicione as camadas editando o c digo de origem de HTML no inspetor de HTML poss vel provocar a sobreposi o ou o aninhamento de camadas enquanto a op o estiver ativada Se isto ocorrer arraste as camadas sobrepostas at a janela do documento a fim de separ las Como utilizar as camadas 251 252 Cap tulo 9 Como converter para obter compatibilidade com a vers o 3 0 Utilize as op es de convers o no menu Arquivo para criar uma vers o de uma p gina que utiliza camadas compat vel com navegadores 3 0 ou para converter um documento que usa tabelas em um outro que utiliza camadas Em cada uma destas situa es o Dreamweaver criar um outro documento convertido preservando o original Em geral estas convers es dever o ser efetuadas apenas quando voc estiver i
137. o utilizando e se disp em de um plug in instalado Para obter mais informa es sobre os comportamentos consulte Como utilizar os comportamentos na p gina 299 Verificar o navegador envia os visitantes a outras p ginas dependendo da marca e vers o do navegador Por exemplo poss vel optar por enviar os usu rios para uma p gina se eles estiverem utilizando a vers o 4 0 ou mais avan ada do Netscape Navigator para outra p gina se utilizarem a vers o 4 0 ou mais avan ada do Microsoft Internet Explorer 4 0 ou por mant los na mesma p gina caso estiverem utilizando qualquer outro navegador Consulte Verificar o navegador na p gina 310 Verificar o plug in envia os visitantes a outras p ginas dependendo da ocorr ncia de um determinado plug in instalado Por exemplo poss vel optar por enviar os usu rios para uma p gina se eles possu rem o Shockwave ou para outra p gina se n o o tiverem Consulte Verificar o plug in na p gina 312 Gerenciamento desites 165 166 Cap tulo 5 Como testar o site Antes de carregar o seu site em um servidor e declar lo pronto para a exibi o recomend vel test lo localmente Certifique se de que a apar ncia e o funcionamento das p ginas nos navegadores de destino estejam de acordo com o esperado que n o haja v nculos rompidos e que as p ginas n o demorem demais a serem descarregadas As seguintes diretrizes o auxiliar o a criar uma experi nci
138. os campos Borda clara e Borda escura para definir as cores das bordas que tenham um efeito de realce e de sombreado respectivamente o que conferir uma apar ncia tridimensional borda Para retornar ao sombreado em tons de cinza padr o remova os valores das cores e mantenha os campos em branco e Utilize o campo Borda para selecionar uma cor de borda para a tabela inteira e Utilize as op es de Fundo para definir a imagem ou a cor do fundo para a tabela Como criar tabelas 223 224 Cap tulo 8 Como definir as propriedades das colunas linhas e c lulas Selecione qualquer combina o de c lulas e em seguida utilize o inspetor de propriedades para alterar a apar ncia de c lulas linhas e colunas individuais Para selecionar as c lulas linhas e colunas consulte Como selecionar os elementos da tabela na p gina 219 Para aplicar a formata o a uma tabela inteira consulte Como definir as propriedades da tabela na p gina 222 Para formatar uma linha coluna ou c lula 1 2 Selecione qualquer combina o de c lulas na tabela Escolha Janela gt Propriedades para abrir o inspetor de propriedades e clique na seta de expans o no canto inferior direito para examinar todas as propriedades Formato Nenhum z Fonte padr o R Tam Nenhum EA B V nculo z Soa Destino z FS DE Linha Horiz Padr o z L Sem guebra Fundo mpl IL ver Padr o z u Cabe alho Fundo E
139. os visitantes localizem qualquer informa o que desejarem com facilidade Coment rios Forne a uma maneira atrav s da qual os visitantes possam entrar em contato com o webmaster quando necess rio e com outras pessoas relevantes associadas empresa ou ao site caso haja qualquer problema com o site Utilize as ferramentas de navega o do Dreamweaver para auxili lo a criar o site ga Go A E Consulte V nculos e navega o na p gina 109 para obter mais informa es ga Como planejar a utiliza o de modelos e bibliotecas Os modelos e bibliotecas do Dreamweaver permitem a reutiliza o de layouts e elementos de p gina em v rios tipos de documentos Contudo mais dif cil aplicar layout e elementos reutiliz veis a um conjunto de p ginas j existentes do que criar novas p ginas utilizando estes elementos desde o in cio Utilizar os modelos Se muitas p ginas forem utilizar o mesmo layout planeje e desenhe um modelo para este layout Em seguida voc poder criar novas p ginas com base neste modelo e se decidir alterar o layout de todas estas p ginas basta alterar o modelo Nota Existem algumas restri es quanto s altera es que podem ser feitas nos documentos que se baseiam em modelos O melhor aproveitamento que se pode dar aos modelos ocorre em ambientes de colabora o para garantir que todos estejam utilizando o mesmo layout de p gina poss vel que os itens de biblioteca ofere
140. ou mais vezes O caractere precedente no m ximo uma vez isto indica que o caractere precedente opcional Qualquer caractere exceto nova linha xou y Exatamente n ocorr ncias do caractere precedente Pelo menos n e no m ximo m ocorr ncias do caractere precedente Qualquer um dos caracteres dentro dos colchetes Especifique uma faixa de caracteres com um h fen a f equivale a abcdef por exemplo T coincidir com T em Terracota mas n o em Cabana do Pai Tom s uam o coincidir com o em n mero mas n o em n meros um coincidir com um em rum umi em luminoso e u em azul um coincidir com um em rum e umi em luminoso por m n o coincidir com qualquer ocorr ncia de azul re ta coincidir com rta em curta e reta em preta por m n o coincidir com qualquer ocorr ncia de caneta ou brotar pr coincidir com propriedades e programa na frase propriedades do programa FF0000 0000FF coincidir com FF0000 em BGCOLOR FFO000 e 0000FF em FONT COLOR 0000FF r 2 coincidir com rr em carro e com os primeiros dois erres em brrrrrr por m n o coincidir com qualquer ocorr ncia de for F 2 4 coincidir com FF em FF0000 e com os primeiros quatro efes em am
141. ou pressione Esc no Windows ou Command ponto no Macintosh poss vel que a transfer ncia n o pare imediatamente O Dreamweaver registra todas as atividades de transfer ncia de arquivos atrav s de FTP Se ocorrer um erro durante a transfer ncia de um arquivo com o FTP o Registro de FTP do site poder auxili lo a determinar o problema Para exibir o registro escolha Janela gt Registro do FTP na janela do site no Windows ou Site gt Registro do FTP no Macintosh Como colocar os arquivos em um servidor remoto A coloca o de arquivos os copia do site local para o remoto geralmente sem alterar o seu status de retirada H duas situa es comuns nas quais Colocar utilizado em vez de Devolver quando voc n o estiver em um ambiente com muitos usu rios e n o estiver utilizando o sistema de devolu o retirada ou quando desejar colocar a vers o atual do arquivo no servidor mas continuar a edit lo Nota Caso seja colocado um arquivo que ainda n o existia no site remoto e se for utilizado o sistema de devolu o retirada o arquivo ser copiado no site remoto e em seguida ser retirado para voc a fim de poder continuar a edi o Se desejar colocar um arquivo em um servidor remoto e devolv lo utilize o comando Devolver Consulte Como devolver e retirar os arquivos de um servidor remoto na p gina 150 Para colocar apenas os arquivos cuja vers o local mais recente do que a remota cons
142. p gina tiver sido carregada tanto no Netscape Navigator quanto no Microsoft Internet Explorer fun o getPos layername var layerRef MM findObj layername var curVertPos layerRef MM UPDOWN document tracking curPosField value curVertPos Em vez de exibir o valor de MM UPDOWN ou MM LEFTRIGHT em um campo de formul rio grave uma fun o que exiba uma mensagem no campo de formul rio dependendo de qu o pr ximo o valor estiver da zona de soltura ou chame outra fun o que mostre ou oculte uma camada dependendo do valor Os limites de sua imagina o e a sua habilidade de lidar com os recursos JavaScript ditar o como voc reagir aos valores de MM UPDOWN ou MM LEFTRIGHT especialmente til ler a propriedade MM SNAPPED quando houver v rias camadas na mesma p gina Todas estas camadas dever o alcan ar os seus destinos para que o usu rio possa avan ar at a pr xima p gina ou tarefa Por exemplo grave uma fun o que conte quantas camadas possuem um valor de MM SNAPPED correspondente a true e chame a sempre que uma camada for solta Quando a contagem de camadas encaixadas atingir o n mero desejado envie o usu rio para a pr xima p gina ou exiba uma mensagem parabenizando o Se voc tiver utilizado o evento onMouseOver para anexar a a o Arrastar a camada a v nculos localizados em diversas camadas ser necess rio efetuar uma pequena altera o fun o MM draglayer para evitar que a proprieda
143. p ginas para que caibam 65 tempo de descarga 64 texto alinhamento 182 atalhos de formata o 412 como adicionar a documentos 86 como alterar as combina es de fontes 180 como buscar nos documentos 157 como editar os atalhos 411 como formatar 177 como formatar com estilos HTML 184 como recuar 182 cor padr o nas p ginas 94 cor como alterar 181 editores externos Consulte editores externos texto em negrito 179 tipo de arquivo padr o como alterar 390 Tour guiado 11 U URLs Consulte caminhos v VBScript 357 v nculos a ncoras 119 a folhas de estilos 190 a um documento 113 arquivo de cache 134 atalhos 415 como abrir a origem 131 como ajustar 169 como alterar as molduras com 279 como alterar no site inteiro 135 como atualizar 134 como criar 114 como criar com o cone do indicador de arquivos 116 como designar 113 como especificar 183 como remover 131 como testar 136 como verificar 168 mapa do site 131 relativos a documento 115 relativos raiz do site 115 v nculos de correio eletr nico como alterar 135 como criar 120 121 v nculos de roteiros como alterar 135 como criar 121 v nculos nulos como alterar 135 como criar 121 vis o geral do Dreamweaver 9 ndice remissivo 441 XML em modelos 370 nota es de r tulos para a exporta o 372 r tulo TAGSPEC 403 r tulos 338 vis o geral 371 442 ndice remissivo
144. para o processamento Por exemplo imagine que voc esteja lidando com um pequeno formul rio situado na parte inferior de uma p gina que cont m apenas dois bot es de op o identificados por Sim e N o al m de um bot o Enviar poss vel que a a o do formul rio seja uma fun o JavaScript definida na se o HEAD do documento que exibir um alerta se o usu rio selecionar Sim e outro alerta se o usu rio selecionar N o fun o processForm if document forms 0 elements 0 checked f alert Sim yelse alert N o Para poder utilizar uma fun o JavaScript do cliente como a a o do formul rio 1 Selecione um bot o Enviar em um formul rio 2 Anexe o comportamento Call JavaScript ao bot o Consulte Chamar o JavaScript na p gina 309 3 Na caixa de texto JavaScript que aparecer durante a anexa o do comportamento digite processForm 4 Adicione uma fun o JavaScript processForm como a mostrada acima se o HEAD do documento poss vel lidar com muitas tarefas de processamento de formul rios utilizando os recursos de cria o de roteiros do cliente por m n o poss vel salvar os dados digitados pelo usu rio ou envi los a terceiros Para esta finalidade necess rio utilizar um aplicativo do servidor como o roteiro Common Gateway Interface CGI por exemplo Os roteiros CGI podem ser escritos em Perl C Java ou outra linguagem de programa o H v rios sites
145. pios b sicos 401 Como personalizar a interpreta o e a apar ncia dos r tulos de outros fabricantes ccccccccciescerrescersero 402 ndice 7 8 ndice AP NDICE A PAM CE O E A EE pueda bss ads 409 menti APQUIVO 2 sc duas otra apare Lp ai e SU O Sd 409 menu Editar asas paia SL Ea pg add Read ia 410 Quick Tag Editor so iati cius taaskaan o aa EEE S 410 Paleta de hist rico spi Lupas big ed eoi e Sa aid 411 Como editar O texto ciccciiiiic isca 411 Como formatar O texto eis seipi esaea Ea aa aea Da 412 Como localizar e substituir o texto ssunu suureen 412 Como trabalhar com tabelas o o nunnuuuna eener 413 Como trabalhar com as molduras ccciiiciiciiciio 413 Como trabalhar com as camadas iccciiiiciiiiicio 414 Como trabalhar com as linhas de tempo ccccccci 415 Como trabalhar com as imagens iccciiiiciicciciis 415 Como gerenciar os hiperv nculos iccciiiiciiciicio 415 Como designar e visualizar nos navegadores ccccioo 416 Gerenciamento de sites e FTPs cciicccci ncia 416 Mapa do Site als pes E perda Palas DES das da ey 417 Como executar os plug ins cciccciccicicics cics 417 Como exibir os elementos da p gina cciiciiciicioo 418 Como trabalhar com os modelos cccciiiciiciicio 418 Como inserit Objetos spas areri E age E pars ars 418 Como abrir e fechar as paletas cicciciiiciiccicio 419 C
146. posi o Como a inclus o de texto fora de um elemento HEAD v lido cria um HTML incorreto utilize head model em vez de marker model se desejar usar um r tulo personalizado contento texto na se o HEAD Utilize marker model nos r tulos que precisam ser exibidos linearmente dentro de um elemento em n vel de bloco como P ou DIV em vez de produzir uma quebra de p gina script model permite que o r tulo seja colocado em qualquer posi o entre os r tulos HTML de abertura e finaliza o de um documento Quando o Dreamweaver se deparar com um r tulo com esse modelo todo o conte do do r tulo ser ignorado Utilizado para markups de outros fabricantes como determinados Tatulos ColdFusion que o Dreamweaver n o deve analisar Especifica um delimitador que marca o in cio de um r tulo delimitado por sequ ncias de caracteres Os r tulos delimitados por sequ ncias de caracteres podem aparecer em qualquer posi o no documento onde pode haver um coment rio O Dreamweaver n o realiza a an lise de r tulos e nem decodifica qualquer entidade ou URL entre START STRING e END STRING Necess rio se END STRING for especificado Atributo Valor Descri o END STRING endOfTag Especifica um delimitador que marca o final de um r tulo delimitado por sequ ncias de caracteres Necess rio se START STRING for especificado DETECT IN ATTRIBUTE TRUE ou FALSE Indicam se deve ser ignorado tudo que estiver entre START STRING
147. procedimentos abaixo e Escolha Arquivo gt Novo a partir de modelo Na caixa de di logo que aparecer escolha um modelo e clique em Selecionar e Escolha Arquivo gt Novo para criar um novo documento e em seguida aplique nele um modelo arrastando o da paleta de modelos Para aplicar um novo modelo a um documento j existente do Dreamweaver Abra o documento Siga um dos procedimentos abaixo e Escolha Modificar gt Modelos gt Aplicar o modelo p gina Escolha um modelo na lista e clique em Selecionar e Arraste o modelo da paleta de modelos para a janela do documento e Selecione o modelo na paleta de modelos e clique em Aplicar p gina Quando um modelo for aplicado a um documento existente o conte do do modelo ser adicionado ao documento Se um modelo j houver sido aplicado ao documento O Dreamweaver comparar os nomes das regi es edit veis dos dois modelos e inserir o conte do do novo modelo nos nomes das regi es que coincidirem no modelo mais antigo Caso n o haja correspond ncias nos nomes das regi es edit veis ou se uma regi o edit vel no modelo anterior n o coincidir com a regi o correspondente no novo uma caixa de di logo solicitar a exclus o das regi es n o coincidentes ou a transfer ncia delas para o novo modelo Se houver mais regi es edit veis no novo modelo do que no antigo elas aparecer o nos documentos como alocadores de espa o Como localizar as regi es edit veis d
148. propriedades que aparecer o no inspetor de propriedades Para obter informa es sobre as op es espec ficas selecione um elemento na janela do documento e em seguida clique no cone da Ajuda no canto superior direito do inspetor de propriedades O inspetor de propriedades inicialmente exibir as propriedades mais comumente utilizadas do elemento selecionado Clique na seta de expans o localizada no canto inferior direito do inspetor de propriedades para examinar outras propriedades do elemento Em alguns casos poss vel que certas propriedades pouco conhecidas n o apare am mesmo no inspetor de propriedades expandido Como utilizar o Iniciador O Iniciador cont m bot es para abrir e fechar v rias paletas janelas e inspetores Para mostrar ou ocultar o Iniciador escolha Janela gt Iniciador a m Bo p l FTP do site Biblioteca Estilos HTML Estilos Comportamentos Hist rico Orig de HTML Para alternar a orienta o do Iniciador de horizontal para vertical clique no cone de orienta o situado no canto inferior direito Para obter mais informa es sobre os bot es padr o do Iniciador consulte Sobre a janela do site na p gina 144 Como utilizar a paleta de bibliotecas na p gina 378 Como formatar o texto com os estilos HTML na p gina 184 Como utilizar a paleta de estilos CSS na p gina 195 Como utilizar o inspetor de comportamentos na p gina 300 Sobre a pa
149. que anima as camadas ser removido O c digo de linhas de tempo que n o estiver relacionado s camadas comportamentos ou altera es origem da imagem por exemplo ser executado no momento certo conforme o planejado A linha de tempo ser automaticamente rebobinada at o quadro 1 Sobre as linhas de tempo O HTML din mico ou DHTML refere se possibilidade de alterar as propriedades de estilo ou posicionamento com uma linguagem de cria o de roteiros As linhas de tempo utilizam o HT ML din mico para alterar as propriedades de camadas e imagens em uma s rie temporal de quadros Utilize as linhas de tempo para criar anima es que dispensem quaisquer controles ActiveX plug ins ou applets de Java As linhas de tempo criam anima es alterando com o tempo a posi o tamanho visibilidade e ordem de empilhamento de uma camada As linhas de tempo tamb m s o teis para outras a es que dever o ocorrer ap s o final da carga da p gina Por exemplo as linhas de tempo podem alterar o arquivo de origem de uma imagem e executar comportamentos em determinados momentos As fun es de camadas das linhas de tempo funcionam apenas nos navegadores das vers es 4 0 ou mais avan adas Abra o inspetor de HTML para examinar o c digo de JavaScript gerado por uma linha de tempo O c digo da linha de tempo est na fun o MM initTimelines dentro de um r tulo SCRIPT no HEAD do documento Ao editar o HTML de um documento que co
150. que possua um comportamento a ele anexado 2 Escolha Janela gt Comportamentos para abrir o inspetor de comportamentos Os comportamentos aparecer o no inspetor em ordem alfab tica segundo o evento Se houver diversas a es para o mesmo evento estas aparecer o na ordem na qual ser o executadas 3 Escolha dentre as seguintes op es e Para editar uma a o clique duas vezes no nome do comportamento ou selecione o e pressione a tecla Enter no Windows ou Return noMacintosh e em seguida altere os par metros na caixa de di logo e clique em OK e Para alterar a ordem das a es de um determinado evento selecione o comportamento e clique no bot o de seta acima ou abaixo e Para excluir um comportamento selecione o e clique no bot o com o sinal de subtra o ou pressione a tecla Delete Como utilizar os comportamentos 305 306 Cap tulo 12 Como criar novas a es As a es s o elementos de JavaScript Se estiver bastante familiarizado com JavaScript voc poder escrever novas a es e faz las aparecer no menu pop up A es no inspetor de comportamentos Para obter mais informa es consulte Extens o dos recursos do Dreamweaver Como descarregar e instalar os comportamentos de outros fabricantes Um dos aspectos mais teis do Dreamweaver a possibilidade de estender os seus recursos ou seja ele oferece aos usu rios que j est o familiarizados com JavaScript a oportunidade de escre
151. r tulo utilizado para editar um r tulo existente e Colocar o r tulo ao redor utilizado para envolver com um novo r tulo a sele o Na janela do documento a sele o determinar o modo padr o de abertura do Quick Tag Editor Nota Quando o Quick Tag Editor estiver aberto poss vel alternar entre os modos com o mesmo atalho de teclado que tiver sido utilizado para abri lo Nos tr s modos a opera o b sica do Quick Tag Editor a mesma abra o editor digite ou edite os r tulos e atributos e em seguida feche o A diferen a entre os modos est no que o Dreamweaver far com os r tulos ap s a edi o Para obter detalhes sobre os modos consulte Sobre o modo Inserir o HTML na p gina 344 Sobre o modo Editar o r tulo na p gina 344 e Sobre o modo Colocar o r tulo ao redor na p gina 344 Nota Quando o Quick Tag Editor estiver em exibi o em qualquer modo poss vel arrastar a al a do editor onde aparece o nome do modo para mover o editor em volta dos r tulos Para executar uma edi o de HTML mais extensa utilize o inspetor de origem de HTML Para inserir ou editar os r tulos e atributos no Quick Tag Editor 1 Siga um dos procedimentos abaixo e Selecione um objeto algum texto ou um r tulo e Clique na janela do documento para colocar o ponto de inser o sem fazer qualquer sele o ZZ 2 Pressione as teclas Control e T no Windows ou as teclas Command e T no
152. r tulo na folha de estilos CSS e Para alterar o estilo da fonte clique em Negrito ou It lico no inspetor de propriedades ou escolha um estilo de fonte Negrito It lico Sublinhado etc no submenu Texto gt Estilo e Para alterar o tamanho da fonte escolha um tamanho 1 a 7 no inspetor de propriedades ou no submenu Texto gt Tamanho Os tamanhos de fontes HTML s o pontos com tamanhos n o especificados e relativos Os usu rios definem o tamanho do ponto da fonte padr o para os seus navegadores Esse o tamanho da fonte que ser exibido quando for escolhido Padr o ou 3 no inspetor de propriedades ou no submenu Texto gt Tamanho Os tamanhos 1 e 2 parecer o menores que o da fonte padr o e os tamanhos 4 a 7 parecer o maiores Para que o seu texto apare a sempre com um tamanho de ponto espec fico utilize as folhas de estilos CSS e Para aumentar ou diminuir o tamanho do texto selecionado escolha um tamanho relativo ou 1 ou 7 no inspetor de propriedades ou no menu Texto gt Aumento do tamanho ou Texto gt Redu o do tamanho Os n meros indicam uma diferen a relativa do tamanho da BASEFONT O valor padr o da BASEFONT 3 Assim um valor 4 resulta em um tamanho de fonte 7 O Dreamweaver n o exibe o r tulo BASEFONT que colocado na se o HEAD CABE ALHO embora o tamanho da fonte deva ser exibido corretamente no navegador Como formatar o texto 179 180 Cap tulo 6 Como modific
153. r tulos lt MENU gt e lt MENU gt Um menu cont m um ou mais itens de menu e cada um dos quais descrito por um r tulo MENUITEM e seus atributos Um menu podem conter tamb m separadores e submenus Por exemplo a seguir est parte de uma defini o da barra de menus principal janela do documento lt menubar name Main Window id DWMainWindow gt lt menu name File id DWMenu File gt lt menuitem name New key Cmd N enabled true command dw createDocument gt outros itens de menu separadores e submenus aqui lt menu gt outros itens de menu aqui lt menubar gt Como reorganizar os menus Os itens de menu podem ser movidos em um menu ou de um menu para outro a ordem dos menus pode ser alterada em uma barra de menus e os separadores podem ser adicionados ou removidos dos menus Observe que os itens podem ser inseridos ou removidos dos menus contextuais utilizando o mesmo procedimento empregado para outros menus Para mover um item de menu 1 Saia do Dreamweaver 2 Fa a uma c pia de seguran a do arquivo menus xml 3 Abra o arquivo menus xml em um editor de texto como BBEdit HomeSite ou Wordpad n o o abra no Dreamweaver 4 Recorte um r tulo MENUITEM inteiro de lt menuitem no in cio at gt no final 5 Coloque o ponto de inser o na nova localiza o 6 Cole o item de menu nesse local Verifique se ele est entre um r tulo lt MENU gt e seu correspondente lt MENU gt
154. r tulos Active Server Pages ASP e ColdFusion da Microsoft poss vel incluir facilmente suporte para os r tulos de outros fabricantes Al m disso as novas op es de regrava o do HTML permitem controlar se o Dreamweaver codificar caracteres espec ficos em determinados contextos Consulte Como definir as prefer ncias de regrava o de HTML na p gina 346 e Como impedir a regrava o de r tulos de outros fabricantes na p gina 407 Adicionar remover o ajuste do redimensionamento da Netscape permite adicionar automaticamente o JavaScript para corrigir problemas nas camadas CSS ao redimensionar uma janela de navegador Consulte Como definir as prefer ncias de camadas na p gina 239 Como gerenciar os sites Sincronizar os arquivos permite sincronizar rapidamente as c pias local e do servidor de um site garantindo que a vers o mais recente de cada arquivo estar nos sites local e remoto Este recurso tamb m pode ser definido para excluir arquivos indesejados Consulte Como sincronizar os arquivos nos sites local e remoto na p gina 154 Acesso f cil ao sistema de devolu o retirada permite obter colocar devolver e retirar arquivos diretamente em qualquer janela de documento Consulte Como utilizar o sistema de devolu es e retiradas na p gina 148 Salvar os arquivos antes de coloc los solicita o salvamento de um arquivo antes de transferi lo para o servidor remoto Consulte
155. rf os poss vel ajustar os v nculos e refer ncias a imagens que tiverem sido rompidos diretamente na caixa de di logo Verificador de v nculos ou abrir os arquivos da lista e ajustar os v nculos no inspetor de propriedades Para ajustar os v nculos na caixa de di logo Verificador de v nculos 1 Selecione o v nculo rompido na caixa de di logo Verificador de v nculos 2 Clique no cone correspondente pasta para chegar ao arquivo ou digite o caminho correto e o nome do arquivo 3 Pressione a tecla Tab ou Enter Se houver outras refer ncias rompidas a este mesmo arquivo aparecer uma caixa de di logo que o solicitar a ajustar as refer ncias tamb m nos outros arquivos Clique em Sim para que o Dreamweaver atualize todos os documentos da lista que fizerem refer ncia a este arquivo Clique em N o para que o Dreamweaver atualize apenas a refer ncia atual Nota Se a op o Ativar a devolu o e retirada de arquivos estiver ativada neste site o Dreamweaver tentar retirar os arquivos que precisarem ser alterados Se n o conseguir retirar um arquivo o Dreamweaver exibir uma caixa de di logo de advert ncia e manter inalteradas as refer ncias rompidas Consulte Como utilizar o sistema de devolu es e retiradas na p gina 148 Gerenciamento de sites 169 170 Cap tulo 5 Para ajustar os v nculos no inspetor de propriedades 1 Clique duas vezes em uma entrada da coluna Arquivo na caixa de di
156. selecione aqueles que ser o verificados 4 Clique em Efetuar a verifica o O relat rio do navegador de destino ser aberto no navegador prim rio e este ser iniciado se j n o estiver aberto Gerenciamento de sites 167 168 Cap tulo 5 5 Para salvar o relat rio para refer ncia futura escolha Arquivo gt Salvar no navegador O relat rio de verifica o do navegador de destino um arquivo tempor rio armazenado na pasta Temp do Windows e na raiz de documentos no Macintosh O arquivo ser perdido se n o for salvo antes da visita a outro site Como verificar os v nculos entre os documentos Utilize o recurso Verificar os v nculos para procurar v nculos que tenham sido rompidos e arquivos sem refer ncias em um arquivo aberto em uma parte do site ou no site local inteiro O Dreamweaver verificar apenas os v nculos e refer ncias aos documentos dentro do site e compilar uma lista de v nculos externos que aparecem no documento ou documentos selecionados por m n o os verificar Quando o Dreamweaver terminar de verificar os v nculos nos arquivos especificados ele abrir a caixa de di logo Verificador de v nculos Essa caixa de di logo exibir uma lista de v nculos rompidos v nculos externos imposs veis de serem verificados pelo Dreamweaver por estarem fora do site e arquivos rf os arquivos aos quais n o h outros documentos vinculados Consulte Como ajustar os v nculos rompidos n
157. seus arquivos ser o carregados para o local incorreto e n o estar o vis veis para os visitantes do site N o deveria ser o Diret rio do host neste caso login directory local site root folder E E public htrl E assels EF assets 7 html E html N o deveria ser o Diret rio do host Deveria ser o Diret rio do host Nota necess rio que o diret rio raiz remoto exista para que o Dreamweaver possa se conectar a ele Caso n o haja um diret rio raiz para o seu site no servidor remoto crie o antes de tentar estabelecer a conex o ou pe a ao administrador do servidor para criar um diret rio raiz se n o puder faz lo Se estiver em d vida sobre o que digitar no campo Diret rio do host deixe o em branco Em alguns servidores o seu diret rio raiz ser id ntico quele com o qual voc estabeleceu a primeira conex o com o FTP Para descobrir isso conecte se ao servidor Se aparecer uma pasta com um nome semelhante a public html ou www ou o seu nome de login no painel remoto este ser provavelmente o diret rio a ser utilizado no campo Diret rio do host Anote o nome do diret rio desconecte se e reabra a caixa de di logo Defini o do site Em seguida digite o nome do diret rio no campo Diret rio do host e conecte se de novo Como resolver problemas de configura o do site remoto Um servidor da Web pode ser configurado de v rias maneiras Esta se o cont m informa es sobre algumas quest
158. sobre a formata o da tabela r tulo TABLE No entanto se for especificado azul para a cor do fundo de uma nica c lula e em seguida definido amarelo para o fundo da tabela inteira a c lula azul n o se tornar amarela pois o r tulo TD prevalece sobre o r tulo TABLE No exemplo seguinte o r tulo TABLE define uma cor de fundo amarela FFFF99 para a tabela inteira O primeiro r tulo TR altera estas c lulas para verde 433FF66 e o segundo r tulo TD modifica a c lula central do alto para azul 4333399 Os r tulos TR e TD na linha inferior n o foram alterados por isso estas c lulas adquirem a cor da tabela amarelo lt TABLE BORDER 1 WIDTH 75 BGCOLOR HFFFF99 gt lt TR BGCOLOR 33FF66 gt lt TD gt amp nbsp lt TD gt lt TD BGCOLOR 333399 gt amp nbsp lt TD gt lt TD gt amp nbsp lt TD gt lt TR gt lt TR gt lt TD gt amp nbsp lt TD gt lt TD gt amp nbsp lt TD gt lt TD gt amp nbsp lt TD gt lt TR gt lt TABLE gt Como criar tabelas 221 222 Cap tulo 8 Como definir as propriedades da tabela O inspetor de propriedades exibe as propriedades da tabela quando esta for selecionada O comando Formatar a tabela tamb m pode ser utilizado para aplicar rapidamente um desenho predefinido a uma tabela selecionada Consulte Como formatar uma tabela com um desenho predefinido na p gina 225 Para especificar as propriedades da tabela 1 Selecione a tabela 2 Escolha
159. trabalhar apenas com um dos arquivos ou pastas do site localize o no painel Remoto da janela do site e clique em Obter para descarreg lo no disco local O Dreamweaver automaticamente duplica o quanto for poss vel a estrutura do site posicionando o arquivo descarregado na por o direita da hierarquia do site Ao editar apenas uma parte de um site opte preferencialmente por descarregar os arquivos dependentes 5 Prossiga como se estivesse criando um site a partir do zero edite os documentos visualize e teste os e carregue os novamente para o site remoto Como exibir e abrir os arquivos na janela do site Utilize a janela do site para exibir os sites locais e remotos adicionar ou remover documentos do site ou para estabelecer a estrutura navegacional do site segundo um mapa do site Para obter mais informa es consulte Sobre a janela do site na p gina 144 poss vel definir cada um dos dois pain is da janela do site para que mostrem o site local o site remoto ou um mapa gr fico do site local Por exemplo poss vel exibir o site local em um painel e o site remoto em outro ou o site local em exibi o de arquivos em um painel e em exibi o de mapa no outro painel Para obter mais informa es sobre a exibi o de mapas de sites consulte Como exibir a estrutura do site na p gina 127 Como criar sites e documentos 79 80 Cap tulo 3 Como exibir os sites locais A janela do site pode exibir o
160. um modelo para que voc possa trabalhar com este conte do fora do Dreamweaver ou mesclar o conte do de um documento XML com um modelo j existente do Dreamweaver Para exportar as regi es edit veis do documento como XML 1 Escolha Arquivo gt Abrir e abra um documento que utilize um modelo e tenha regi es edit veis Escolha Arquivo gt Exportar gt Exportar as regi es edit veis como XML Na caixa de di logo de XML escolha uma nota o de r tulo e clique em OK Consulte Como utilizar as nota es de r tulos XML na p gina 372 Na caixa de di logo que aparecer digite um nome para o arquivo XML e clique em Salvar Quando o documento for exportado o arquivo XML gerado conter o nome do modelo que o documento est utilizando e todos os nomes das regi es edit veis Para importar um conte do XML 1 Escolha Arquivo gt Importar XML para o modelo 2 Selecione o arquivo XML e clique em Abrir Quando o arquivo XML for importado o Dreamweaver mesclar o conte do XML com o modelo especificado no arquivo XML e exibir o resultado em uma nova janela do documento Se o modelo especificado n o for localizado o Dreamweaver solicitar a escolha de outro modelo a ser utilizado Sobre o XML XML significa Extensible Markup Language uma linguagem de markup para documentos estruturados XML deriva se de SGML a linguagem padr o de markup generalizado assim como SGML XML uma linguagem para definir r t
161. um site local que ser associado ao site remoto Consulte Como criar um site local na p gina 77 A pr xima etapa da configura o de um site remoto determinar a sua localiza o isto qual servidor se ocupar desse site O seu cliente empregador ou provedor de servi os da Internet j tem provavelmente um servidor configurado para trabalhar com p ginas da Web na Internet ou intranet pergunte ao administrador de sistemas ou ao cliente qual o nome desse servidor e descubra como transferir os arquivos para ele Em particular determine se o FTP ser utilizado para estabelecer conex o ao servidor ou se o servidor poder ser montado em sua rea de trabalho como uma unidade de disco acess vel atrav s da rede Se a conex o for estabelecida com o FTP procure saber o nome do servidor de FTP Ao reunir essas informa es utilize o comando Definir os sites para associar o servidor ao seu site local Caso surjam problemas na configura o do site remoto consulte Como resolver problemas de configura o do site remoto na p gina 143 Depois que o site remoto estiver configurado os arquivos poder o ser carregados ou descarregados dele caso haja arquivos no site Consulte Como utilizar o sistema de devolu es e retiradas na p gina 148 e Como obter e colocar os arquivos na p gina 151 Como associar um servidor remoto a um site local Ap s criar um site local utilize o comando Defini
162. utiliza o modelo Para obter mais informa es consulte Como formatar o texto com as folhas de estilos CSS na p gina 188 Sobre as linhas de tempo na p gina 253 e Como utilizar os comportamentos na p gina 299 Como utilizar a paleta de modelos Utilize a paleta de modelos para criar novos modelos e gerenciar os existentes Para abrir a paleta de modelos Escolha Janela gt Modelos ainel superior da paleta de modelos cont m uma lista dos modelos dispon veis O da paleta d del t lista d delos d para um site local O painel inferior exibe o conte do do modelo selecionado Para editar um modelo Selecione um modelo na lista e clique em Abrir ou clique duas vezes no nome do modelo na lista Para renomear um modelo Clique uma vez no nome do modelo para selecion lo e em seguida clique novamente Quando o nome se tornar um campo edit vel digite um novo nome Quando um modelo for renomeado as refer ncias a esse modelo n o ser o atualizadas automaticamente necess rio reaplicar o modelo com o novo nome aos documentos aos quais ele serve de refer ncia Consulte Como criar documentos com base em modelos na p gina 368 Modelos e bibliotecas 367 368 Cap tulo 14 Como criar documentos com base em modelos O modelo pode ser utilizado como ponto de partida para um novo documento ou para ser aplicado a um documento existente Para criar um documento com base em um modelo siga um dos
163. utilizadas da mesma forma Por exemplo o objeto de coment rio obt m a entrada de texto em uma rea de texto numa caixa de di logo em seguida utiliza uma fun o JavaScript simples para transform lo em um coment rio em HTML que ser inserido no documento O formul rio que descreve a caixa de di logo est no arquivo Configuration Objects Invisibles Comment htm poss vel abrir e alterar o tamanho e outros atributos da rea do texto mas se for removido todo o r tulo TEXTAREA ou alterado o valor do seu atributo NAME o objeto de coment rio deixar de funcionar corretamente Como editar o perfil de formata o da origem de HTML O perfil de formata o da origem de HTML determina como o Dreamweaver formata o c digo de origem de HTML de um documento O perfil inclui as prefer ncias de formata o dos r tulos individuais e dos grupos de r tulos juntamente com as prefer ncias de formato HTML definidas com o comando Editar gt Prefer ncias O arquivo SourceFormat txt pode ser editado em um editor de texto para que se tenha controle preciso sobre a maneira atrav s da qual o Dreamweaver grava o HTML O perfil um arquivo de texto salvo na pasta Configuration contida na pasta do aplicativo do Dreamweaver As prefer ncias de formato HTML definidas com o comando Prefer ncias ser o salvas no arquivo SourceFormat txt quando o Dreamweaver for fechado e as altera es feitas no perfil n o ter o efeito at que o pro
164. utilizar as camadas 255 Clique no marcador da camada para selecion la 256 Cap tulo 9 3 Selecione a camada a ser animada Certifique se de ter selecionado o elemento desejado Clique no marcador da camada ou utilize a paleta de camadas para selecionar uma camada Consulte tamb m Como manipular as camadas na p gina 243 Quando a camada estiver selecionada aparecer o al as ao seu redor como mostra a seguinte ilustra o Scaal Home Page Scaal site scaal home html Dreamweaver Arquivo Editar Exibir Inserir Modificar Texto Comandos Site Janela Ajuda S Bot o Desenhar a camada Camada selecionada contendo umi imagem this week Ez Ld 598 450 2K78 seg sh EL T O SDd 4 Ao clicar na camada surgir um ponto de inser o piscando dentro da mesma por m isto n o indica que ela esteja selecionada Escolha Modificar gt Linha de tempo gt Adicionar objeto linha de tempo ou simplesmente arraste o objeto selecionado at o inspetor de linhas de tempo Aparecer uma barra no primeiro canal da linha de tempo O nome da camada aparecer na barra Se estiver trabalhando com uma imagem a nica propriedade que poder ser alterada o arquivo de origem da imagem no inspetor de propriedades As etapas restantes n o se aplicam Consulte Como alterar as propriedades das imagens e camadas com as linhas de tempo na p gina 259 5 Clique no marcador do quadro prim rio
165. vetores O Flash Player est dispon vel tanto como um plug in do Netscape Navigator quanto um controle ActiveX para o Internet Explorer tendo sido inclu do nas vers es mais atuais do Netscape Navigator Microsoft Windows 98 e America Online Utilize o Macromedia Flash para criar filmes Flash Se voc utiliza o Flash 3 utilize o Aftershock para adicionar a detec o de roteiros e da vers o de plug ins ao filme consulte Como inserir e editar os objetos Aftershock na p gina 290 Se voc utilizar o Flash 4 utilize o comando Publicar com a mesma finalidade Quando voc inserir um filme Flash em um documento o Dreamweaver utilizar os r tulos OBJECT definido pela Microsoft para os controles ActiveX e EMBED definido pela Netscape a fim de obter os melhores resultados em todos os tipos de navegadores Quando voc fizer altera es ao filme no inspetor de propriedades o Dreamweaver mapear as entradas dos par metros apropriados aos r tulos OBJECT e EMBED Nota Se voc tiver inserido um filme atrav s da utiliza o do objeto Flash o filme poder ser exibido apenas com o Flash Player 4 mesmo se tiver sido criado com o Flash 3 A vers o 3 e mais antigas do Flash Player s o incapazes de exibir filmes inseridos atrav s da utiliza o do objeto Flash Os visitantes sua p gina que utilizarem a vers o 3 ou anteriores do Flash Player ser o solicitados a atualiz la para a vers o 4 do Flash Player Para inserir u
166. 0 255 00FF33 0 255 51 e 33FF00 51 255 0 Todos os seletores de cores no Dreamweaver utilizam a paleta de 212 cores aceitas pela Web a escolha de uma cor exibir o seu valor hexadecimal Enquanto as quatro cores mencionadas anteriormente n o est o na paleta aceita pela Web do Dreamweaver o valor hexadecimal de cada cor pode ser editado manualmente em qualquer campo de cor caso seja conveniente utiliz la Para escolher uma cor fora do intervalo aceito pela Web clique no bot o Paleta no canto inferior direito do seletor de cores do Dreamweaver para abrir o seletor de cores do sistema O seletor de cores do sistema n o se limita s cores aceitas pela Web As vers es para UNIX do Netscape Navigator utilizam uma paleta de cores diferente daquela das vers es para Windows e Macintosh Se a programa o for exclusiva para as m quinas com o UNIX instalado ou se o p blico alvo for composto por usu rios do Windows ou Macintosh com monitores de 24 bits e usu rios do UNIX com monitores de 8 bits considere a possibilidade de utilizar os valores hexadecimais que combinam os pares 00 40 80 BF ou FF que produzem as cores aceitas pela Web no SunOS Como definir as propriedades do documento Os t tulos de p ginas as cores e imagens de fundo al m das cores do texto e dos v nculos s o propriedades b sicas dos documentos HTML Os t tulos das p ginas identificam e denominam os documentos As cores e imagens de fundo define
167. 01 Para alterar os nomes dos comandos criados ou exclu los do menu Comandos escolha Comandos gt Editar a lista de comandos Observe que quando um comando for exclu do do menu utilizando esse m todo o arquivo que cont m o comando ser tamb m removido Nota Para reordenar os itens no menu Comandos ou para mover os itens entre os menus o arquivo menus xml deve ser editado O termo comando tem dois significados no Dreamweaver Um comando um tipo espec fico de extens o no sentido estrito e do ponto de vista de um programador de extens es Contudo em determinados contextos a palavra comando utilizada como sin nimo de item de menu significando qualquer item que apare a em um menu do Dreamweaver sem levar em conta a sua fun o ou como implementado Como personalizar o Dreamweaver 391 392 Cap tulo 16 Sobre a sintaxe de menus Tenha cuidado ao modificar os menus O Dreamweaver ignora qualquer menu ou item de menu que contenha um erro de sintaxe XML O arquivo menus xml cont m uma lista estruturada de menus barras de menus e itens de menu Uma barra de menus marcada com r tulos de abertura e finaliza o MENUBAR um menu individual ou um conjunto de menus Por exemplo h uma barra de menus principal uma barra de menus espec fica janela do site apenas no Windows e uma barra de menus para cada menu contextual Cada barra de menus cont m um ou mais menus um menu envolvido pelos
168. 2 products ed html 5KB Microsoft 19 E products index html SKB Microsoft 19 E products mints html 5KB Microsoft 19 products mug html SKB Microsoft 19 B scaal home html 7KB Microsoft 19 B thisweek html 7KB Microsoft 19 4 body lt table gt lt 204 4519 286 7 B seg sia O I O A POOE T tulo Ou Story Data 19 11 89 16 51 Tamanho 4KB Z Tutorial do Dreamweaver 49 7 Na janela do documento clique na imagem Products para selecion la 8 No inspetor de propriedades arraste o cone indicador de arquivos localizado ao lado do campo V nculo at a janela do site e indique o arquivo DW3 products index html ome do arquivo aparecer no campo V nculo no inspetor de propriedades O nome d i recer n V ncul inspetor de propriedad da imagem Products En T Site scaal Arquivo Editar Exibir Inserir Modificar Texto Comandos Site Janela Ajuda a E Liba E Templates Pasta 07 our story O DW3 copytst 1KB Test Docu 18 iadan Mimi E DW3 oustory word html KB Microsoft 19 E DW3 products cd html 5KB Microsoft 19 EB DW3 products index html 9KB Microsoft 19 DW3 products mug html SKB Microsoft 19 E DW3 scgal home himl 7KB Microsoft 29 DW3 thiswesk html TKB Microsoft 19 gifts html 1KB Microsoft 28 home html index html 1KB Microsoft 28 1KB Microsoft 29 inspiration Ptml 1KB Microsoft 28 my ourstonAhtml 7KB Microsof
169. 258 como repetir as etapas 97 como repetir as linhas de tempo continuamente 258 como reutilizar buscas 161 itens de biblioteca 374 modelos 368 como salvar arquivos em molduras e conjuntos de molduras 271 buscas 161 430 ndice remissivo como selecionar camadas 244 molduras e conjuntos de molduras 268 objetos na janela do documento 89 como sincronizar os sites local e remoto 154 como testar os sites 166 como transferir arquivos resolu o de problemas 153 como verificar os v nculos 168 como visualizar em navegadores atalhos 416 vis o geral 170 comportamentos a es como criar 306 como alterar 305 como anexar 303 como desencadear 303 como excluir 305 compatibilidade com os navegadores 307 de outros fabricantes 306 definidos 299 e formul rios 385 e imagens 214 e itens de biblioteca 376 e linhas de tempo 305 e m dia 298 e modelos 367 conjuntos de molduras aninhados 268 bordas 278 como designar v nculos em 114 como nomear 273 como salvar arquivos em 271 como selecionar 268 predefinidos como inserir 267 propriedades 275 Consulte tamb m molduras conta gotas 90 conte do NOFRAMES 280 conte do como adicionar a tabelas 217 controles ActiveX como inserir 283 como redimensionar 203 propriedades 295 vis o geral 294 controles deslizantes como criar 314 conven es 15 conven es tipogr ficas 15 cor aceita pela Web 92 como escolher 90 conta gotas como utilizar 90 fundo da moldura 279 fundo da p gina 94
170. 999 Limpar os resultados de HTML do Word Cor do fundo definida como ffffff Formata o de origem aplicada 6 Clique em OK Voc ver um documento em branco Este o novo documento criado antes da importa o do documento em HTML do Word O documento importado est atr s do documento em branco 7 Feche o documento em branco 8 Clique no documento Our Story para torn lo a janela ativa 9 Escolha Arquivo gt Salvar como para salvar o documento Our Story nomeie o como my_ourstory Observe que o documento Our Story mant m a formata o de tabelas e os atributos de fontes do arquivo original em HTML do Word Tutorial do Dreamweaver 43 44 Cap tulo 1 Formatar o texto utilizando os estilos HTML Agora que j importou o documento Our Story voc far altera es na formata o do texto A utiliza o dos estilos HTML constitui uma maneira f cil de aplicar formata o a um documento Um estilo HTML consiste de um ou mais r tulos HTML e pode incluir cores fontes tamanho e assim por diante Os estilos HTML podem ser criados e aplicados a um par grafo inteiro ou a um texto selecionado Depois de criar um estilo HTML voc poder aplic lo a qualquer p gina do site Ao contr rio dos estilos CSS que aderem especifica o Cascading Style Sheets a formata o dos estilos HT ML afetar apenas o texto ao qual aplicado ou que houver sido criado atrav s da utiliza o de um estil
171. ALT do r tulo APPLET Se voc escolher uma imagem o Dreamweaver inserir um r tulo IMG entre os r tulos APPLET de abertura e fechamento Nota Para especificar um conte do alternativo que possa ser exibido tanto no Netscape Navigator com o Java desativado como no Lynx um navegador com base em texto selecione uma imagem e adicione manualmente um atributo ALT ao r tulo IMG no inspetor de origem de HTML Espa o V e Espa o H especificam o n mero de pixels de espa o em branco acima abaixo e em ambos os lados do applet Par metros abre uma caixa de di logo na qual podem ser digitados par metros adicionais a serem passados ao applet Consulte Sobre os par metros na p gina 297 Muitos applets respondem a par metros especiais Sobre os par metros Utilize a caixa de di logo Par metros para digitar valores relacionados aos par metros especiais definidos para os filmes Shockwave e Flash controles ActiveX plug ins do Netscape Navigator e applets de Java Consulte a documenta o do objeto que estiver utilizando para obter informa es sobre os par metros que ele requer Nota N o h um padr o universalmente aceito para identificar os arquivos de dados dos controles ActiveX Consulte a documenta o relativa ao controle ActiveX a ser utilizado para estabelecer os par metros a serem empregados Como inserir m dia 297 298 Cap tulo 11 Para abrir a caixa de di logo Par metros 1 Selecione um objeto
172. Ajuda 11 atalhos 419 al as de redimensionamento 204 alinhamento direita 203 alinhamento esquerda 203 alinhamento Alto do texto 203 alinhamento Embaixo absoluto 203 alinhamento Meio 203 alinhamento Meio absoluto 203 alinhamento No alto 203 alinhamentos Linha de Base e Embaixo 203 ambientes com m ltiplos usu rios 148 ambientes de equipe 148 ncoras com nome como criar 119 como exibir o marcador na janela do documento 119 ncoras com nome 119 anima es ao longo de um caminho complexo 257 como aplicar a objetos 261 como copiar e colar 260 como criar 255 como melhorar 262 linhas de tempo 253 vis o geral 105 aplicativos como utilizar com o Dreamweaver 72 applets Consulte applets de Java applets de Java como inserir 283 296 como redimensionar 203 propriedades 296 vis o geral 296 rea de trabalho 61 arquivo de registro de corre es de HTML 352 arquivo SourceFormat txt 346 425 arquivos como buscar 156 como carregar 153 como colocar 153 como descarregar 151 como devolver e retirar 148 como exibir na janela do site 82 como gerenciar 144 como obter 151 como sincronizar os sites local e remoto 154 como transferir com FTP 141 tipos padr o 390 arquivos dependentes como colocar 153 como mostrar e ocultar 132 como obter 152 arquivos ocultos como mostrar e ocultar 132 ASP r tulos como personalizar a an lise e a apar ncia 402 ASP Consulte Active Server Pages atalhos 409 atalhos de teclado 409 como alter
173. Aninhar sempre quando criada dentro de uma camada existente 239 op o Ao criar os estilos utilizar o formato abreviado de 195 op o Ao editar os estilos existentes utilizar o formato abreviado 195 op o Aplica o autom tica paleta de estilos HTML 185 op o Arquivos locais 81 op o Arquivos remotos 81 op o Ativar a devolu o e retirada de arquivos 149 op o Atualizar a lista de arquivos locais automaticamente 77 436 ndice remissivo op o Atualizar as p ginas paleta de bibliotecas 378 op o Cache 78 op o caixa de cores 90 op o Caixa do atributo 348 op o Caixa do r tulo 348 op o Centraliza o 349 op o Coincidir mai sc min sc 158 op o Colocar os arquivos mais novos no remoto 155 op o Combinar os r tulos aninhados sempre que poss vel 351 op o Coment rios Cores HTML 349 op o Cor do fundo Cores HTML 349 op o Cor do texto 94 op o Cor do v nculo 94 op o Corrigir os r tulos aninhados incorretamente Limpar o HTML do Word 353 op o Definir a cor do fundo Limpar o HTML do Word 353 op o Desanexar do original 376 op o Espa amento da c lula 216 op o Espec fica ao r tulo 349 op o Execu o autom tica 253 op o Ignorar a caixa de 349 op o Ignorar os diferentes espa os em branco 158 op o ndice Z como alterar a ordem de empilhamento 248 op o Limpar CSS 353 op o Limpar o estilo da sele o 186 op o
174. DE gt do r tulo lt CODE gt APPLET lt CODE gt Code Codebase Height HSpace Class Warning htmlmsg Este navegador ignora o atributo lt CODE gt ID lt CODE gt do r tulo lt CODE gt APPLET lt CODE gt Utilize em seu lugar lt CODE gt NAME lt CODE gt Name Style Warning htmlmsg Este navegador ignora o atributo lt CODE gt STYLE lt CODE gt do r tulo lt CODE gt APPLET lt CODE gt VSpace Width Como personalizar o Dreamweaver 399 400 Cap tulo 16 Como criar um perfil de navegador Um perfil de navegador pode ser criado atrav s da modifica o de um perfil existente Por exemplo para criar um perfil para o Netscape Navigator 5 0 pode se abrir o do Navigator 4 0 adicionar novos r tulos ou atributos da vers o 5 0 e salvar o perfil como Netscape Navigator 5 0 Para criar um perfil de navegador 1 Utilizando um editor de texto abra o perfil mais parecido ao que se deseja criar ou abra o que ser alterado 2 Altere o nome do perfil O nome do perfil aparecer na primeira linha Dois perfis n o podem ter o mesmo nome 3 Adicione novos r tulos ou atributos que contem com suporte do navegador de acordo com a sintaxe mostrada em Sobre a formata o dos perfis de navegadores na p gina 398 Se n o desejar receber mensagens de erro sobre um determinado r tulo que n o conta com suporte adicione o lista de r tulos aos quais oferecido suporte Caso os r tulos que n o contam com
175. Exibir gt Grade gt Defini es para abrir a caixa de di logo 2 Selecione as op es desejadas e Grade vis vel torna a grade vis vel Essa op o funciona em conjunto com o comando Mostrar Exibir gt Grade gt Mostrar e Espa amento define a dist ncia entre os marcadores da grade Digite um n mero e em seguida no menu pop up Unidades escolha pixels polegadas ou cent metros A unidade m nima 25 pixels e Cor especifica a cor dos marcadores da grade A cor padr o azul claro e Exibir especifica se a grade ser exibida como linhas ou pontos e Encaixamento ativa e desativa o encaixe Essa op o funciona em conjunto com o comando Encaixar Exibir gt Grade gt Encaixar e Encaixar a cada especifica a unidade de encaixe Digite um n mero na caixa Encaixar a cada e no menu pop up Unidades escolha pixels polegadas ou cent metros O valor padr o 5 pixels Para que as camadas se encaixem na grade vis vel as unidades da grade e de encaixe expressas em pixels dever o ser id nticas Por exemplo se o Espa amento estiver definido com 50 pixels defina Encaixar a cada com 50 pixels 3 Clique em OK Como utilizar as camadas 247 248 Cap tulo 9 Como alterar a ordem de empilhamento de camadas Utilize o inspetor de propriedades ou a paleta de camadas para alterar a ordem de empilhamento das camadas A camada na parte superior da paleta de camadas est situada no alto da ordem de empilhamento
176. HAPPY lt TAGSPEC TAG NAME happy TAG TYPE nonempty RENDER CONTENTS false CONTENT MODEL marker model ICON happy gif ICON WIDTH 18 ICON HEIGHT 18 gt lt TAGSPEC gt H dois tipos de r tulos que podem ser definidos utilizando TAGSPEC r tulos em estilo HTML normal e r tulos delimitados por segii ncias de caracteres que iniciam com uma segii ncia e terminam com outra Os r tulos delimitados por segii ncias de caracteres se parecem com os r tulos HTML vazios por exemplo IMG porque eles n o envolvem o conte do e n o cont m r tulos de finaliza o O r tulo HAPPY mostrado acima um r tulo em estilo HTML normal ele inicia com um r tulo de abertura lt HAPPY gt envolve o conte do e termina com outro de finaliza o lt HAPPY gt Um r tulo ASP que inicia com a segii ncia de caracteres lt e termina com gt um r tulo delimitado por segii ncias de caracteres Como personalizar o Dreamweaver 403 404 Cap tulo 16 A tabela abaixo descreve os atributos e os poss veis valores de TAGSPEC Atributo Valor Descri o TAG NAME TAG TYPE RENDER CONTENTS CONTENT MODEL START STRING tagName empty ou nonempty TRUE ou FALSE block model head model marker model ou script model beginningOfTag O nome do r tulo personalizado Necess rio nos r tulos delimitados por sequ ncias de caracteres TAG NAME utilizado apenas para determinar se um inspetor de prop
177. J NoFrames aparecer o no alto da rea do corpo do documento 2 Para criar o conte do NoFrames siga um dos procedimentos abaixo e Na janela do documento digite ou insira o conte do e Escolha Janela gt Origem de HTML e entre os r tulos lt noframes gt digite o conte do ou o c digo HTML para o conte do 3 Escolha novamente Modificar gt Conjunto de molduras gt Editar o conte do NoFrames para retornar exibi o normal do documento com o conjunto de molduras Como utilizar os comportamentos com molduras poss vel aplicar v rios comportamentos que se valem do modo de opera o das molduras Geralmente as molduras s o utilizadas quando o designer da p gina da Web deseja controlar a exibi o de seu conte do H v rios comportamentos que facilitam a altera o do conte do de uma moldura e Definir o texto da moldura substitui o conte do e a formata o de uma moldura pelo conte do especificado O conte do pode incluir qualquer HTML v lido Utilize esta a o para exibir informa es dinamicamente Consulte Definir o texto da moldura na p gina 325 e A a o Ir para a URL abre uma nova p gina na janela ou na moldura especificada Esta a o particularmente til para alterar o conte do de duas ou mais molduras com um clique Consulte Ir para a URL na p gina 318 e Inserir a barra de navega o utilizada para direcionar um usu rio a p ginas espec ficas em um site da We
178. Limpar o estilo do par grafo 186 op o Limpar os r tulos lt font gt 353 op o Linhas e colunas 216 op o Linhas e colunas da tabela 347 op o Loop 253 op o Molduras e conjuntos de molduras 348 op o Mostrar o Mini iniciador na barra de status 66 op o Mostrar o registro quando concluir 351 353 op o N meros de linhas 339 op o Nunca regravar o HTML em arquivos com as extens es 347 op o Obter e colocar os arquivos mais novos 155 op o Obter os arquivos mais novos do remoto 155 op o Origem de HTML 158 op o Padr o de r tulo 349 op o Padr o do navegador Alinhamento 203 op o Pr carregar as imagens 208 op o Preenchimento da c lula 216 op o Quebra autom de linha 339 op o Quebra autom tica de linha 348 op o Quebras de linha formato HTML 348 op o Recuo prefer ncias 347 op o Redefinir o r tulo HTML 192 op o Remover coment rios de HTML n o pertencentes ao Dreamweaver 350 op o Remover os coment rios de HTML pertencentes ao Dreamweaver 351 op o Remover os r tulos adicionais de finaliza o 347 op o Remover os r tulos aninhados redundantes 350 op o Remover os r tulos vazios 350 op o Remover r tulo s espec fico s 351 op o Remover todo o markup espec fico ao Word 353 op o Renomear paleta de bibliotecas 378 op o Retirar os arquivos na abertura 149 op o Selecionar na janela do site paleta de bibliotecas 378 op o Ta
179. ML determinam quais altera es se houver o Dreamweaver far no c digo de origem de HT ML quando um documento HT ML for aberto Consulte Como definir as prefer ncias de regrava o de HTML na p gina 346 e As prefer ncias de formato HTML determinam as op es comuns de formata o de HTML como tamanho e recuo da linha Consulte Como definir as prefer ncias de formato HTML na p gina 347 Essas prefer ncias fornecem uma interface de usu rio para alterar o arquivo SourceFormat txt e As prefer ncias de cores HTML controlam como os r tulos HTML e o texto entre eles ser o codificados utilizando cores no inspetor de origem de HTML Consulte Como definir as prefer ncias de cores HTML na p gina 349 e As prefer ncias de fontes codifica o permitem especificar a fonte com a qual o c digo de origem de HT ML aparecer no inspetor de origem de HTML Consulte Como definir as prefer ncias de fontes codifica o na p gina 71 Finalmente o arquivo SourceFormat txt na pasta Dreamweaver Configuration fornece especifica es precisas para a formata o de HTML A edi o desse arquivo em um editor de texto lhe possibilita o mais alto grau de controle sobre a maneira pela qual o Dreamweaver grava o HTML voc poder alterar determinadas op es espec ficas a r tulos nesse arquivo que n o poderiam ser modificadas utilizando as prefer ncias de formato HT ML Contudo recomendamos que apenas os usu
180. Por exemplo se a sele o for uma imagem ou um r tulo FONT e o r tulo correspondente FONT al m do texto entre eles o Quick Tag Editor iniciar no modo Editar o r tulo A maneira mais f cil de garantir que a sele o iniciar e terminar com r tulos correspondentes escolhendo um r tulo no seletor de r tulos na parte inferior esquerda da janela do documento O Quick Tag Editor tamb m inicia no modo Editar o r tulo quando a sele o incluir r tulos de abertura e finaliza o n o correspondentes Nesse caso a sele o ser expandida incluindo o seu r tulo pai e seus conte dos Por exemplo se o par grafo consistir do HT ML lt p gt Eles estavam lendo lt cite gt Esa e Jac lt cite gt na sala de aula lt p gt e a sele o for lendo lt cite gt Esa sem o r tulo lt cite gt de fechamento o Quick Tag Editor iniciar no modo Editar o r tulo com o par grafo inteiro selecionado No modo Editar o r tulo pode ser editado apenas um r tulo de abertura Caso o ponto de inser o seja movido para depois do final do r tulo e mais outros sejam inclu dos aparecer uma mensagem de erro e tudo o que for digitado ser ignorado Sobre o modo Colocar o r tulo ao redor Quando a sele o n o consistir de um r tulo completo um r tulo de abertura e outro correspondente de finaliza o se for aplic vel e o conte do do r tulo se houver o Quick Tag Editor iniciar normalmente no modo Colocar o r tul
181. S inspetor de s ii id origem de molduras HTML F11 Camadas x paleta de a j modelos F12 Exibir no Exibir no a ii navegador navegador prim rio secund rio Atalhos de teclado 423 424 Ap ndice A NDICE REMISSIVO A a o Abrir a janela do navegador 320 a o Alterar a propriedade 309 a o Arrastar a camada 314 a o Chamar o JavaScript 309 a o Controlar o Shockwave ou Flash 313 a o Definir a imagem da barra de navega o 324 a o Definir a mensagem de status 327 a o Definir o texto da camada 326 a o Definir o texto da moldura 325 a o Definir o texto do campo de texto 328 a o Executar a linha de tempo 333 a o Executar o som 322 a o Ir do menu de salto 319 a o Ir para a URL 318 a o Ir para o quadro da linha de tempo 332 a o Mensagem pop up 322 a o Menu de salto 319 a o Mostrar ocultar as camadas 329 a o Parar a linha de tempo 333 a o Permutar a imagem 331 a o Pr carregar as imagens 323 a o Restaurar a imagem permutada 332 a o Validar o formul rio 334 a o Verificar o navegador 310 a o Verificar o plug in 312 a es como alterar em comportamentos 305 como controlar as linhas de tempo 263 como criar 306 como escolher no inspetor de comportamentos 303 compatibilidade com os navegadores 307 definidas 299 inclu das com o Dreamweaver 307 Consulte tamb m a es individuais pelo nome Active Server Pages ASP como editar 356 sobre 406
182. Tabela Arraste o bot o Tabela da paleta de objetos at o local escolhido na p gina Aparecer a caixa de di logo Inserir tabela Nessa caixa de di logo aceite os valores ou digite novos valores Nota A caixa de di logo Inserir tabela ret m os valores das defini es mais recentes digitadas para uma tabela No campo Linhas especifique o n mero de linhas da tabela No campo Colunas especifique o n mero de colunas da tabela No campo Preenchimento da c lula especifique o n mero de pixels entre o conte do da c lula e os seus limites ou parede No campo Espa amento entre as c lulas especifique o n mero de pixels entre cada c lula da tabela No campo Largura especifique a largura da tabela em pixels ou como um percentual da janela do navegador No campo Borda especifique a largura em pixels da borda da tabela Digite 0 para que n o haja borda Clique em OK para criar a tabela Se desejar inserir uma tabela sem ter que especificar inicialmente essas op es desative a op o Mostrar a caixa de di logo quando inserir objetos nas prefer ncias gerais Consulte Como definir as prefer ncias na p gina 71 Como adicionar o conte do a uma c lula da tabela Podem ser adicionados texto e imagens s c lulas da tabela Podem ser definidas tamb m as propriedades de uma imagem inserida em uma tabela Para adicionar texto a uma tabela 1 Clique em uma c lula na qual o texto ser inc
183. Um site local criado no Dreamweaver criando se uma pasta raiz local para ele ou tornando uma pasta existente a raiz local utilizando o comando Novo site consulte Como criar um site local na p gina 77 Em seguida associe este site local a um servidor remoto atrav s do comando Definir os sites consulte Como associar um servidor remoto a um site local na p gina 140 Quando os arquivos s o transferidos entre os sites locais e remotos o Dreamweaver mant m paralelas as estruturas de pastas e arquivos entre os sites locais e remotos Se as pastas necess rias ainda n o existirem no site para o qual os arquivos est o sendo transferidos o Dreamweaver as criar automaticamente Os arquivos tamb m podem ser sincronizados entre os sites locais e remotos o Dreamweaver copia os arquivos em ambos os diret rios conforme a necessidade e opcionalmente remove os arquivos in teis se houver algum O Dreamweaver conta com alguns recursos para estruturar um site e transferir arquivos de e para um servidor remoto Para facilitar trabalhos com m ltiplos usu rios em um site da Web poss vel devolver e retirar arquivos do servidor remoto desta maneira as outras pessoas poder o ver quando voc est trabalhando com um arquivo evitando edit lo simultaneamente Contudo observe que o Dreamweaver n o executa o controle de vers o 139 140 Cap tulo 5 Como configurar um site remoto Antes de configurar um site remoto crie
184. a apar ncia como ser visualizado em um navegador da Web A barra de t tulo na janela do documento exibe o t tulo da p gina e entre par nteses o nome do arquivo e um asterisco caso o arquivo contenha altera es n o salvas Os r tulos que controlam o texto ou objeto selecionado aparecem no seletor de r tulos na parte inferior esquerda da janela do documento Clique em um destes r tulos para real ar o seu conte do na janela do documento Clique em lt body gt para selecionar o conte do do corpo inteiro do documento O conjunto de bot es na parte inferior direita da janela do documento denominado Mini iniciador que uma vers o menor do Iniciador Os bot es que aparecem como padr o no Mini iniciador s o id nticos aos que aparecem no Iniciador eles abrem a janela do site paleta de bibliotecas paleta de estilos HTML paleta de estilos CSS inspetor de comportamentos paleta de hist rico e o inspetor de origem de HTML A estimativa de tamanho do documento o tempo de descarga da p gina incluindo todos os elemntos dependentes como as imagens e os filmes Shockwave aparecer o esquerda do Mini iniciador Consulte Como verificar o tempo e o tamanho da descarga na p gina 172 O menu pop up Tamanho da janela permite redimensionar a janela do p up J J documento de acordo com dimens es pr determinadas ou personalizadas Consulte Como redimensionar a janela do documento na p gina 65 J 8 Tamanho d
185. a raiz do site Um caminho relativo raiz normalmente o melhor modo de especificar v nculos em um site da Web no qual os arquivos HTML precisam ser movidos com frequ ncia de uma pasta para outra Quando um documento que cont m v nculos relativos raiz for movido n o necess rio alter los por exemplo quando os arquivos HTML utilizam v nculos relativos raiz para os arquivos dependentes como as imagens se um arquivo HTML for movido os seus v nculos dos arquivos dependentes ainda ser o v lidos Contudo quando os v nculos dos documentos forem relativos raiz e estes forem movidos ou renomeados absolutamente necess rio atualizar esses v nculos mesmo que os caminhos dos documentos relativos entre si n o tenham sido alterados Por exemplo se uma pasta for movida todos os v nculos relativos raiz a arquivos nessa pasta devem ser atualizados Se os arquivos forem movidos ou renomeados utilizando a janela do site o Dreamweaver ajudar a atualizar todos os v nculos relevantes Defina um site local no Dreamweaver escolhendo uma pasta raiz local que seja equivalente raiz do documento em um servidor Consulte Como criar um site local na p gina 77 O Dreamweaver utiliza essa pasta para determinar os caminhos relativos raiz para os arquivos Os v nculos relativos raiz s o interpretados pelos servidores e n o pelos navegadores por isso se for aberta uma p gina que utiliza v nculos relativo
186. a 150 Devolver transfere uma c pia do arquivo local para o servidor remoto tornando o dispon vel para edi o por outros usu rios O arquivo local se tornar somente de leitura Esta op o n o estar dispon vel se Ativar a devolu o e retirada de arquivos estiver desativada no site atual Consulte Como devolver e retirar os arquivos de um servidor remoto na p gina 150 Parar a tarefa atual abandona a atividade em curso inclusive a obten o e coloca o de arquivos O bot o aparece como um sinal de parada em vermelho com um X branco no canto inferior direito Observe que talvez haja uma demora at que o servidor processe a solicita o de parada por isso a transfer ncia do arquivo poder n o ser interrompida imediatamente Como definir as prefer ncias de FTP do site Escolha Editar gt Prefer ncias FTP do site e em seguida selecione uma dentre as seguintes prefer ncias de FTP do site para controlar os recursos de transfer ncia de arquivos dispon veis na janela do site Mostrar sempre especifica qual site remoto ou local ser sempre mostrado e em qual painel da janela do site esquerdo ou direito os arquivos locais e remotos aparecer o Como padr o o site local aparecer sempre direita O painel que n o for escolhido o padr o o da esquerda ser o painel mut vel este poder exibir o mapa do site ou os arquivos do outro site o padr o o site remoto Arquivos dependentes exibe um
187. a agrad vel aos visitantes do seu site e Certifique se de que as p ginas funcionam conforme o esperado nos navegadores de destino e de que elas n o apresentem muitos problemas nos outros navegadores As p ginas dever o ser leg veis e funcionais nos navegadores que n o oferecerem suporte aos estilos camadas ou ao JavaScript Consulte Como verificar uma p gina quanto compatibilidade com os navegadores de destino na p gina 167 No caso das p ginas que funcionarem muito mal nos navegadores mais antigos considere a possibilidade de utilizar o comportamento Verificar o navegador para redirecionar os visitantes automaticamente at uma outra p gina Consulte Verificar o navegador na p gina 310 e Verifique o site quanto a poss veis v nculos rompidos e ajuste os O Dreamweaver tamb m gerar uma lista de v nculos a sites externos quando for executada uma verifica o de v nculos siga os periodicamente para certificar se de que ainda continuam v lidos Como os outros sites tamb m sofrem reformas e reorganiza es a p gina qual est vinculando o seu site pode ter sido transferida ou exclu da Consulte Como verificar os v nculos entre os documentos na p gina 168 e Como ajustar os v nculos rompidos na p gina 169 e Visualize as suas p ginas no maior n mero poss vel de navegadores e plataformas diferentes Este procedimento possibilitar a observa o de diferen as no layout cores
188. a caixa de di logo Inserir o menu de salto e digite o nome da moldura Para obter mais informa es sobre a maneira de designar uma moldura consulte Como definir as propriedades das molduras na p gina 273 6 Em Op es escolha um dos seguintes itens e Para adicionar um bot o Ir marque a caixa de sele o Inserir o bot o Ir ap s o menu e Para configurar um aviso de sele o marque a caixa de sele o Selecionar o primeiro item ap s a altera o da URL Nota Escolha apenas uma op o em cada menu de salto Essas op es se aplicam a um menu de salto inteiro 7 Para adicionar itens de menu adicionais clique no bot o com o sinal de adi o e repita as etapas 2 a 5 desse procedimento 8 Clique em OK Como editar os itens do menu de salto Podem ser feitas altera es nos itens do menu de salto no inspetor de propriedades ou no inspetor de comportamentos poss vel alterar a ordem da lista ou o arquivo ao qual um item est vinculado ou adicionar excluir ou renomear um item Para alterar a localiza o na qual um arquivo vinculado aberto ou para adicionar ou alterar um aviso de sele o no menu deve ser utilizado o inspetor de comportamentos Para obter informa es sobre a maneira como utilizar o inspetor de comportamentos a fim de editar um menu de salto consulte Menu de salto na p gina 319 Para editar um item do menu de salto com o inspetor de propriedades 1 No inspeto
189. a da fonte tamanho da fonte estilo de fonte obl quo estilo de fonte it lico peso da fonte ipo de estilo de ipo de estilo de ipo de estilo de ipo de estilo de ipo de estilo de ipo de estilo de ipo de estilo de estilo de lista alinhamento do ista ista ista ista ista ista ista exto quadrado c rculo disco romano mai sculo romano min sculo alfabeto mai sculo alfabeto min sculo decora o do texto sublinhado decora o do texto riscado FONT COLOR FONT FACE FONT SIZE 1 7 l N UL TYPE quadrado UL TYPE c rculo UL TYPE disco OL TYPE OL TYPE i OL TYPE A OL TYPE a UL ou OL com TYPE conforme for adequado P ALIGN ou DIV ALIGN conforme for adequado U STRIKE Como formatar o texto 197 198 Cap tulo 6 Como verificar a ortografia Utilize o comando Verificar a ortografia no menu Texto para corrigir a ortografia no documento Esse comando ignora os r tulos HTML e valores de atributos Como padr o a verifica o ortogr fica utiliza o dicion rio ortogr fico de ingl s dos EUA Para alterar o dicion rio escolha Editar gt Prefer ncias gt Geral e selecione um dicion rio diferente no menu pop up Os dicion rios dos idiomas adicionais est o dispon veis para descarga no Centro de programadores do Dreamweaver Caixa de di logo Verificar a ortografia Utilize as seguintes op es da caixa de di
190. a de caracteres mais longa em cada coluna e Selecione Definir para especificar a largura da tabela como uma percentagem da janela do navegador ou como um n mero de pixels 5 Selecione as op es de formata o da tabela e No campo Preenchimento da c lula especifique o n mero de pixels entre o conte do da c lula e os seus limites ou parede e No campo Espa amento entre as c lulas especifique o n mero de pixels entre cada c lula da tabela e No campo Formatar a linha do alto selecione uma das quatro op es de formata o sem formata o negrito it lico ou negrito it lico e No campo Borda especifique a largura em pixels da borda da tabela Digite 0 para que n o haja borda 6 Clique em OK Como selecionar os elementos da tabela Basta um gesto para selecionar uma tabela inteira uma linha ou coluna ou uma faixa de c lulas cont guas na tabela Depois da sele o da tabela ou de c lulas individuais poss vel e Modificar a apar ncia das c lulas selecionadas ou do texto nelas contido Consulte Como formatar as tabelas na p gina 221 e Copie e cole as c lulas adjacentes Consulte Como copiar e colar c lulas na p gina 226 Podem ser escolhidas c lulas descont guas em uma tabela para alterar as suas propriedades As sele es de c lulas descont guas n o podem ser copiadas ou coladas Para selecionar a tabela inteira siga um dos procedimentos abaixo e Clique no
191. a de estilos 191 comando Editar a lista de fontes 180 comando Editar o conte do NoFrames 280 comando Evitar sobreposi es de camadas 251 comando Excluir paleta de bibliotecas 378 comando Exportar a tabela 234 comando Formatar a tabela 225 comando Formul rio 382 comando Gravar o caminho da camada 257 comando Importar o HTML do Word 352 comando Importar os dados da tabela 218 comando Inserir dados tabulares 218 comando Limpar o HTML 350 comando Limpar o HTML do Word 352 comando Mesclar as c lulas 231 comando Novo a partir de modelo 85 368 comando Obter 151 comando Obter mais comportamentos 306 comando Otimizar a imagem no Fireworks 207 comando Redefinir a origem 103 comando Redefinir a posi o 104 comando Remover a linha de tempo 260 comando Remover o quadro 255 comando Salvar como modelo 361 comando Salvar os conjuntos de molduras 271 comando Salvar todos 271 comando Selecionar um local mais novo 155 comando Selecionar um remoto mais novo 155 comando Tornar edit vel 376 comando Verificar a ortografia 198 comando Verificar os navegadores de destino 167 comando V nculo a um arquivo existente 130 comando V nculo a um novo arquivo 130 comando Visualizar no navegador 171 comando Visualizar utilizando o servidor local 113 comandos como acessar a partir de menus contextuais 70 como criar a partir das etapas do hist rico 101 como gravar 102 como renomear 395 comandos Dividir a moldura 266 coment rios como inserir
192. a especificar explicitamente os editores externos que dever o ser iniciados para um determinado tipo de arquivo escolha Editar gt Prefer ncias e na lista de categorias selecione Editores externos As extens es dos nomes de arquivos como gif wav e mpg encontram se listadas esquerda abaixo de Extens es Os editores associados extens o selecionada encontram se listados direita abaixo de Editores Para iniciar o editor prim rio de uma imagem inclu da em um documento HTML pressione a tecla Control enquanto clica duas vezes na imagem no Windows ou pressione a tecla Command enquanto clica duas vezes na imagem no Macintosh na janela do documento Observe que este m todo de iniciar um editor funciona apenas para as imagens e n o para outros tipos de m dia incorporada em um documento Para adicionar um tipo de arquivo lista de extens es nas prefer ncias dos Editores externos 1 Clique no bot o de adi o situado acima da lista de extens es 2 Digite a extens o do nome de arquivo incluindo o ponto no in cio da extens o ou diversas extens es relacionadas separadas por espa os Para adicionar um editor a um determinado tipo de arquivo 1 Selecione a extens o do tipo de arquivo na lista de extens es 2 Clique no bot o de adi o situado acima da lista de editores 3 Na caixa de di logo que aparecer escolha o aplicativo a ser adicionado lista de editores Para remover um tipo de arqui
193. a exibir o inspetor de propriedades se este j n o estiver aberto Campos de texto aceitam qualquer tipo de texto alfab tico ou num rico O texto digitado pode ser exibido como uma linha simples linhas m ltiplas marcadores ou asteriscos com a finalidade de proteger as senhas Consulte Propriedades de campos de texto na Ajuda do Dreamweaver Bot es realizam tarefas quando forem clicados como o envio e redefini o dos formul rios poss vel digitar um identificador personalizado para um bot o ou utilizar um dos identificadores predefinidos Consulte Propriedades dos bot es na Ajuda do Dreamweaver Campos de imagens podem ser utilizados no lugar dos bot es Enviar Consulte Propriedades de campos de imagens na Ajuda do Dreamweaver Caixas de sele o permitem m ltiplas respostas em um nico grupo de op es Consulte Propriedades das caixas de sele o na Ajuda do Dreamweaver Bot es de op o representam op es exclusivas A sele o de um dos bot es do grupo cancela a sele o de todos os outros Consulte Propriedades dos bot es de op o na Ajuda do Dreamweaver Menus de lista apresentam um conjunto de valores que os usu rios poder o escolher O objeto poder apresentar um menu pop up que aparecer apenas quando o usu rio clicar no nome do objeto e aceitar apenas uma op o ou uma caixa de listagem que sempre exibir os valores em uma lista de rolagem e aceitar mais de uma op o Con
194. a janela do documento o texto Home Page e em seguida for criado um v nculo a um arquivo denominado home htm o c digo de origem de HTML para o v nculo deve ter a apar ncia abaixo lt a href home htm gt Home Page lt a gt Antes de criar os v nculos certifique se de ter compreendido como funcionam os caminhos relativos a documento relativos raiz e absolutos Consulte Sobre as localiza es e os caminhos dos documentos na p gina 110 Podem ser criados diversos tipos de v nculos em um documento e Um v nculo a outro documento ou arquivo como um arquivo de imagem filme ou som e Um v nculo de ncora com nome que salta para uma localiza o espec fica em um documento e Um v nculo de correio eletr nico que abre um formul rio de correio eletr nico com o endere o do destinat rio j preenchido e Um v nculo nulo ou v nculo de roteiro que permite anexar comportamentos a um objeto ou criar um v nculo que execute c digo JavaScript V nculos e navega o 113 114 Cap tulo 4 Com o Dreamweaver h diversas maneiras de criar facilmente v nculos entre os documentos e Utilize a janela do mapa do site para exibir criar alterar ou excluir v nculos e Utilize Modificar gt Criar v nculo para selecionar um arquivo a ser vinculado e Utilize o inspetor de propriedades para estabelecer o v nculo a um arquivo utilizando o cone da pasta para procurar e selecionar um arquivo usando o
195. a janela do documento quando a p gina for exibida em um navegador os outros elementos aparecer o em suas posi es corretas Sobre a paleta de camadas A paleta de camadas um mapa visual das camadas do documento Escolha Janela gt Camadas ou pressione F11 para abrir a paleta de camadas As camadas s o exibidas como uma lista empilhada de nomes a primeira camada criada est na parte de baixo da lista enquanto que a camada criada mais recentemente est no alto da lista As camadas aninhadas s o exibidas como nomes conectados s camadas m e Clique na seta de expans o para mostrar ou ocultar as camadas aninhadas Utilize a paleta de camadas para evitar sobreposi es alterar a visibilidade das camadas aninhar ou empilhar camadas e selecionar uma ou mais camadas e Para aninhar uma camada dentro de outra consulte Como aninhar as camadas na p gina 237 e Para selecionar uma ou mais camadas consulte Como manipular as camadas na p gina 243 e Para alterar a ordem de empilhamento de uma camada consulte Como alterar a ordem de empilhamento de camadas na p gina 248 Para alterar a visibilidade de uma camada consulte Como alterar a visibilidade de uma camada na p gina 249 e Para evitar sobreposi es de camadas consulte Como evitar as sobreposi es de camadas na p gina 251 Como aninhar as camadas Uma camada aninhada se situa dentro de uma outra camada Utilize a paleta
196. a janela do site O campo V nculo ser atualizado para mostrar o v nculo 3 Solte o bot o do mouse Imagem Lise Orig stoutt_products_oft gif C Alinhar Pad do navegad u22 v noulo product resutshml Gy At 2 Mapa Espa o Dsn Borda 0 DOS mi orgia Site scaal3 Arquivo Editar Exibir Site Janela Ajuda dg ssaa TE S Conecta E Atuaiza o 0a 6 Colocar o EM Unstesiscaaj ste E images Templates business html extranet_login htmi extranet neves html gifts html home html inspiration html ourstory html product blends html product foods html product page html Toproduct resulte html product search html product tools html product wear html spring template html thisweek html untitled htm winter_template html oi Z D O itens remotos selecionados totalizando O bytes Como arrastar o cone do indicador de arquivos do inspetor de propriedades at um arquivo na janela do site Para criar um v nculo a partir de uma sele o em um documento aberto 1 Selecione o texto na janela do documento 2 Mantenha a tecla Shift pressionada e arraste a partir da sele o O cone do indicador de arquivos aparecer medida que o cursor for arrastado 3 Indique um outro documento aberto uma ncora vis vel de um documento aberto ou um documento na janela do site 4 Solte o bot o do mouse amp rquivo Editar Exibir Inserir Modifi
197. a p gina 169 para obter mais informa es Para verificar os v nculos no documento 1 Salve o arquivo em uma parte de um site local 2 Escolha Arquivo gt Verificar os v nculos Para verificar os v nculos em uma parte de um site local 1 Escolha Janela gt Arquivos do site para abrir a janela do site 2 Escolha um site no menu pop up Lista de sites 3 No painel local selecione os arquivos ou pastas a serem verificados 4 Inicie a verifica o utilizando um dos seguintes m todos e Clique com o bot o direito do mouse no Windows ou clique mantendo a tecla Control pressionada no Macintosh e no menu contextual escolha Verificar os v nculos gt Arquivos pastas selecionadas e Escolha Arquivo gt Verificar os v nculos Para verificar os v nculos no site inteiro Escolha Site gt Alterar os v nculos no site inteiro Para alternar as listas de relat rios do verificador de v nculos Ap s realizar uma verifica o de v nculo escolha V nculos rompidos V nculos externos ou Arquivos rf os no menu pop up Mostrar Para salvar o relat rio inteiro como um arquivo de texto delimitado por tabula es Clique em Salvar Como ajustar os v nculos rompidos Quando voc verificar os v nculos no Dreamweaver ser exibida a caixa de di logo Verificador de v nculos que apresentar um relat rio de v nculos rompidos externos e quando selecionado verificar o site inteiro quanto a arquivos
198. a poder editar o conte do associado a este arquivo inclu do abra o arquivo Para editar uma server side include 1 Selecione uma server side include na janela do documento ou no inspetor de origem de HTML e em seguida clique em Editar no inspetor de propriedades O arquivo inclu do ser aberto na janela do documento Edite o arquivo e salve o As altera es s o transpostas imediatamente para o documento atual e em qualquer documento subsegiiente que seja aberto e inclua esse arquivo CAP TULO 15 Como criar formul rios Os formul rios permitem coletar informa es dos usu rios Entre os usos mais comuns dos formul rios destacam se as pesquisas formul rios de pedidos e interfaces de busca Os formul rios necessitam de dois componentes O c digo de origem de HTML que o descreve e um aplicativo do servidor ou roteiro do cliente que possa processar as informa es digitadas pelo usu rio nos campos do formul rio criados pelo HTML Utilize o Dreamweaver para criar formul rios adicionar objetos a eles e atrav s da utiliza o de comportamentos para validar as informa es digitadas pelo usu rio necess rio utilizar um editor de texto para gravar um roteiro ou aplicativo para processar os dados do formul rio Perl a linguagem mais comum de cria o de roteiros para o processamento de formul rios C Java e at mesmo JavaScript s o outras op es poss veis Os formul rios do Dreamweaver podem
199. a qual evento dever ser procurado e qual 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 o Dreamweaver inserir automaticamente as fun es na se o HEAD CABE ALHO do documento atual caso ainda n o existam quando o item de biblioteca for inserido no documento As fun es JavaScript n o s o armazenadas com o item de biblioteca porque s o elementos do HEAD e os itens de biblioteca podem conter apenas elementos do BODY Por isso o inspetor de comportamentos n o estar dispon vel durante a edi o de um item de biblioteca pois apenas a metade do c digo de comportamento estar dispon vel para inspe o preciso inicialmente tornar o item de biblioteca edit vel para poder edit lo em seguida recrie o item ap s fazer as altera es 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 os r tulos exatos que ele cont m Essas 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 anexo de comportamento 4 Escolha Janela gt Comportamentos para abrir o inspetor de comportamentos e em seguida clique duas vezes na a o a ser alterada Na caixa de di lo
200. a salvar um comando gravado 1 Escolha Comandos gt Executar o comando gravado para executar o comando Aparecer uma etapa denominada Executar o comando na lista de etapas da paleta de hist rico Selecione a etapa Executar o comando e clique no bot o Salvar como comando Digite o nome do comando e clique em OK O comando aparecer no menu Comandos Como utilizar as guias visuais no processo de desenho O Dreamweaver cont m muitos recursos que o ajudam a desenhar os documentos e prever que apar ncia ter o nos navegadores Siga o procedimento abaixo Encaixe instantaneamente a janela do documento no tamanho desejado para ver como os elementos se ajustam p gina Consulte Como redimensionar a janela do documento na p gina 65 Utilize as r guas para que sirvam como um guia visual ao posicionar e redimensionar as camadas ou tabelas Utilize uma imagem de rastreamento como fundo da p gina para ajud lo a duplicar um desenho criado em um aplicativo de edi o de imagens ou ilustra es Utilize a grade para posicionar e redimensionar as camadas com precis o As marcas da grade na p gina ajudam a alinhar as camadas e quando o encaixe for ativado as camadas se encaixar o automaticamente no ponto de grade mais pr ximo ao serem criadas ou movidas Outros objetos como as imagens e par grafos n o se encaixam na grade O encaixe funcionar independentemente da visibilidade da grade Consulte Como enca
201. a selecionada como um valor absoluto Esta a melhor op o para as molduras que dever o ter sempre o mesmo tamanho como uma barra de navega o Se for definida uma op o de Unidades diferente para as outras molduras o espa o reservado a elas ser definido apenas depois que as molduras especificadas em pixels tiverem assumido o seu tamanho total Percentagem especifica que a moldura dever assumir um valor percentual do conjunto de molduras do qual faz parte Para as molduras especificadas com unidades como percentagens o espa o ser alocado ap s o das molduras definidas em pixels por m antes das molduras definidas como relativas Relativa especifica que o espa o destinado moldura dever ser proporcional ao das outras molduras O espa o reservado s molduras especificadas com unidades relativas definido ap s as molduras definidas em pixels e percentagens por m elas consumir o todo o espa o restante na janela do navegador Como utilizar as molduras 277 278 Cap tulo 10 Como definir as bordas de molduras e conjuntos de molduras poss vel especificar a apar ncia das bordas de molduras e conjuntos de molduras em um documento Ao especificar as op es de bordas de uma moldura a op o do conjunto de molduras correspondente ser ignorada Para definir as bordas de molduras 1 Selecione a moldura clicando e mantendo pressionada a tecla Alt no Windows ou as teclas Option e Shift no Macintosh o
202. a solicita o para transferir os arquivos dependentes como imagens folhas de estilos externas e outros arquivos mencionados no arquivo de HTML que o navegador carrega junto com o arquivo de HTML Como padr o as op es Notificar na obten o retirada e Notificar na coloca o devolu o est o selecionadas Nota Para for ar a solicita o Incluir os arquivos dependentes a aparecer quando essas op es estiverem desmarcadas pressione a tecla Alt no Windows ou a tecla Option no Macintosh enquanto escolhe os comandos Obter Colocar Devolver ou Retirar Conex o de FTP determina se a conex o ao site remoto ser terminada ap s o n mero especificado de minutos sem atividade Tempo limite de FTP especifica o n mero de segundos durante os quais o Dreamweaver tentar estabelecer uma conex o com o servidor remoto Se n o houver resposta ap s o tempo especificado o Dreamweaver exibir uma caixa de di logo de advert ncia alertando o para esse fato Host da firewall especifica o endere o do servidor proxy no qual ser estabelecida a conex o se voc estiver atr s de uma firewall Caso contr rio deixe esse espa o em branco Nota No caso de estar atr s de uma firewall selecione a op o Utilizar a firewall na caixa de di logo Defini o do site Consulte Como associar um servidor remoto a um site local na p gina 140 Porta da firewall especifica a porta atrav s da qual voc se conectar ao servidor
203. a um dos procedimentos abaixo e Selecione a tabela escolha Modificar gt Tabela e selecione Limpar as alturas das c lulas ou Limpar as larguras das c lulas e Escolha Janela gt HTML e altere as larguras e alturas diretamente no inspetor de origem de HTML e No inspetor de propriedades digite valores espec ficos para a largura e altura nas caixas L e U Como adicionar e remover as linhas e colunas Utilize os comandos no submenu Modificar gt Tabela ou os do menu contextual para adicionar e remover linhas e colunas de uma tabela Para adicionar linhas ou colunas 1 Clique em uma c lula na qual dever aparecer a nova linha ou coluna 2 Siga um dos procedimentos abaixo e Para adicionar uma linha escolha Modificar gt Tabela gt Inserir linha ou escolha Tabela gt Inserir linha no menu contextual e Para adicionar uma coluna escolha Modificar gt Tabela gt Inserir coluna ou escolha Tabela gt Inserir coluna no menu contextual e Para adicionar linhas e colunas escolha Modificar gt Tabela gt Inserir linhas ou colunas ou escolha Tabela gt Inserir linhas ou colunas no menu contextual 3 Na caixa de di logo que aparecer digite o n mero de linhas ou colunas a serem adicionadas Especifique se as novas linhas ou colunas dever o aparecer antes ou depois da linha ou coluna selecionada 4 Clique em OK Como criar tabelas 229 230 Cap tulo 8 Para excluir uma linha ou coluna Clique em uma c
204. abela e em seguida pressione a tecla Control no Windows ou Command no Macintosh e clique nas c lulas linhas ou colunas para cancelar a sele o das c lulas individuais 220 Cap tulo 8 Como formatar as tabelas A apar ncia das tabelas pode ser alterada pela defini o de propriedades da tabela e c lulas ou pela aplica o de um desenho predefinido tabela Consulte Como definir as propriedades da tabela na p gina 222 Como definir as propriedades das colunas linhas e c lulas na p gina 224 e Como formatar uma tabela com um desenho predefinido na p gina 225 Para formatar o texto nas tabelas aplique a formata o ao texto selecionado ou utilize os estilos Consulte Como formatar o texto na p gina 177 Sobre os r tulos de tabelas Quando as tabelas forem formatadas na janela do documento poss vel definir as propriedades que se aplicam tabela inteira ou s linhas colunas ou c lulas selecionadas na tabela Ao definir uma propriedade como a cor do fundo ou o alinhamento de uma maneira para a tabela inteira e de outra para c lulas individuais conveniente compreender como o Dreamweaver interpreta o c digo de origem de HTML Quando uma propriedade for definida mais de uma vez em uma tabela ela ser interpretada desta maneira a formata o da c lula que faz parte do r tulo TD prevalece sobre a formata o das linhas da tabela r tulo TR que por sua vez prevalece
205. ada com frequ ncia crie um novo comando que realiza a tarefa automaticamente Alguns movimentos do mouse como o ato de clicar ou arrastar para selecionar um elemento na janela do documento n o poder o ser executados novamente ou salvos como parte dos comandos salvos Ao realizar um destes movimentos aparecer uma linha preta na paleta de hist rico embora a linha n o esteja bvia at que uma outra a o seja efetuada Para evitar isso utilize as teclas de seta em vez do movimento do mouse para mover o ponto de inser o na janela do documento Certas outras etapas tamb m n o podem ser repetidas como arrastar um elemento para outro local na p gina Ao efetuar uma destas etapas aparecer um cone de comando de menu com um pequeno X vermelho na paleta de hist rico Ao se executarem as etapas novamente estas coincidir o exatamente com as etapas efetuadas anteriormente n o ser poss vel modificar as etapas quando forem executadas novamente Por exemplo se a cor de uma c lula de tabela tiver sido anteriormente alterada para vermelho a aplica o da mesma etapa a uma outra c lula de tabela tamb m alterar a cor da mesma para vermelho n o poss vel especificar uma cor diferente quando a etapa de defini o de cor do fundo for aplicada a uma nova imagem Como repetir as etapas Para repetir a ltima etapa efetuada utilize o comando Editar gt Repetir O nome deste comando do menu Editar ser alterado refletin
206. ainel que exibe o site local como um mapa identificado por Navega o no site o outro painel exibe os arquivos do site local identificado por Pasta local ou os arquivos do site remoto identificado por Site remoto dependendo das prefer ncias Mostrar sempre que tiverem sido definidas Para exibir apenas o mapa do site Mantenha pressionado o bot o do mouse com o ponteiro sobre o bot o Mapa do site e no menu pop up selecione Apenas o mapa Como alterar as exibi es de sites Como padr o o site remoto ou o mapa do site local aparecer no painel esquerdo da janela do site enquanto que o site local aparecer no painel direito poss vel alternar entre estas exibi es Para definir em quais pain is aparecer o os sites local e remoto 1 Escolha Editar gt Prefer ncias e selecione a categoria de FTP do site 2 Siga um dos procedimentos abaixo e No menu Mostrar sempre selecione Arquivos locais e em seguida escolha se deseja exibir os arquivos locais no painel direito ou esquerdo da janela do site O site local aparecer no painel selecionado e o site remoto ou o mapa do site aparecer no painel oposto Quando esta op o for escolhida os arquivos do site local ser o sempre mostrados na janela do site mesmo quando a janela for reduzida a um painel e No menu Mostrar sempre selecione Arquivos remotos e em seguida escolha se deseja exibir os arquivos remotos no painel direito ou esquerdo da j
207. aixo e em ambos os lados do objeto Dados especifica um arquivo de dados a ser carregado pelo controle ActiveX Muitos controles ActiveX como o Shockwave e o RealPlayer n o utilizam este par metro Ident define o par metro opcional Ident do ActiveX Este par metro utilizado mais frequentemente para passar informa es entre os controles ActiveX Bordas especifica a largura da borda ao redor do objeto Par metros abre uma caixa de di logo na qual poder o ser digitados par metros adicionais a serem passados ao objeto ActiveX Consulte Sobre os par metros na p gina 297 Muitos controles ActiveX respondem a par metros especiais Como inserir um applet de Java Java uma linguagem de programa o que permite o desenvolvimento de aplicativos pequenos applets que podem ser incorporados s p ginas da Web Depois de criar o applet de Java poss vel inseri lo em um documento HTML atrav s do Dreamweaver O Dreamweaver utiliza o r tulo APPLET para marcar a refer ncia ao arquivo do applet Para inserir um applet de Java 1 Na janela do documento coloque o ponto de inser o onde deseja inserir o applet 2 Clique no bot o Applet na paleta de objetos 3 Na caixa de di logo que aparecer selecione um arquivo que contenha o applet de Java Propriedades dos applets de Java Ap s ter inserido um appletde Java utilize o inspetor de propriedades para definir os par metros Para exibir as seguintes propr
208. ajustar a posi o de todos os quadros prim rios Qualquer tipo de altera o feita com uma barra inteira selecionada modificar todos os quadros prim rios Para adicionar ou remover quadros da linha de tempo escolha Modificar gt Linha de tempo gt Adicionar quadro ou Modificar gt Linha de tempo gt Remover o quadro Para que a linha de tempo seja executada automaticamente quando a p gina for aberta em um navegador clique em Execu o autom tica Esta op o anexar um comportamento p gina que executa a a o Executar a linha de tempo quando a p gina for carregada Para que a linha de tempo seja repetida continuamente clique em Loop Esta op o inserir a a o Ir para o quadro da linha de tempo no canal de comportamentos ap s o ltimo quadro da anima o poss vel editar os par metros relacionados a esse comportamento para definir o n mero de repeti es Como alterar as propriedades das imagens e camadas com as linhas de tempo Al m de mover as camadas com as linhas de tempo poss vel alterar o arquivo de origem de uma imagem e a visibilidade tamanho e ordem de empilhamento de uma camada Para alterar as propriedades de imagens e camadas com uma linha de tempo 1 No inspetor de linhas de tempo siga um dos procedimentos abaixo e Selecione um quadro prim rio na barra que controla o objeto a ser alterado Os quadros inicial e final s o prim rios e Para criar um novo quadro prim ri
209. am uma maior flexibilidade de uso fora dos ambientes de colabora o Utilizar os itens de biblioteca Se voc j souber que determinadas imagens ou outros elementos aparecer o em muitas p ginas do site crie estes elementos com anteced ncia e transforme os em itens de uma biblioteca Se estes itens forem alterados posteriormente a nova vers o aparecer em todas as p ginas que os utilizarem Para obter mais informa es sobre como reutilizar os layouts e elementos de uma y p gina consulte Modelos e bibliotecas na p gina 359 Como criar um site local Um site local a rea local de armazenamento dos arquivos do seu site na Web requer um nome e uma pasta raiz local onde voc planeja armazenar todos os arquivos do site Crie um site local para cada site da Web a ser utilizado A pasta raiz local do site dever ser uma pasta configurada especificamente para ele N o utilize o seu disco ou a pasta do aplicativo do Dreamweaver como raiz do site Uma boa abordagem organizacional consiste na cria o de uma pasta denominada Sites e na cria o de pastas raiz locais dentro desta uma para cada site a ser utilizado Para criar um site local 1 Escolha Site gt Novo site Na caixa de di logo que aparecer intitulada Defini o do site a categoria Informa es locais estar selecionada 2 Digite uma das seguintes op es e No campo Nome do site digite o nome do site O nome do site aparecer na jane
210. aneira que lhe for mais familiar confort vel e eficiente O texto seguinte abrange alguns modos de personalizar o Dreamweaver Reorganize os objetos na paleta de objetos para que aqueles utilizados com mais frequ ncia estejam sempre vis veis crie novos pain is para reordenar os objetos ou adicione novos objetos Consulte Como alterar a paleta de objetos na p gina 388 Modifique os atalhos de teclado ou os nomes dos itens de menu adicione novos comandos e remova os j existentes dos menus Consulte Como personalizar os menus do Dreamweaver na p gina 391 Edite o perfil de formata o de origem para obter um controle mais preciso sobre o HTML criado pelo Dreamweaver O arquivo SourceFormat txt inclui todas as defini es das prefer ncias de formato HTML e muitas outras informa es Consulte Como editar o perfil de formata o da origem de HTML na p gina 396 Crie os seus comandos e paletas flutuantes ao utilizar JavaScript Consulte Extens o dos recursos do Dreamweaver Princ pios b sicos na p gina 401 Altere a maneira como os r tulos de outros fabricantes como ASP e ColdFusion aparecem na janela do documento Consulte Como personalizar a interpreta o e a apar ncia dos r tulos de outros fabricantes na p gina 402 Defina as prefer ncias para todos os itens desde os esquemas de cores e realce s configura es do site e navegadores Consulte Como definir as prefe
211. anela do site O site remoto aparecer no painel selecionado e o site local ou o mapa do site sempre local aparecer no painel oposto Quando esta op o for escolhida os arquivos do site remoto ser o sempre mostrados na janela do site mesmo quando esta for reduzida a um painel 3 Clique em OK para fechar a caixa de di logo Prefer ncias e aplicar as altera es Para alterar a rea de exibi o Na janela do site siga um dos procedimentos abaixo e Arraste a barra de divis o que separa os pain is para aumentar ou diminuir a rea de exibi o do painel direito ou esquerdo da janela e Utilize as barras de rolagem situadas na parte inferior dos pain is para paginar o conte do dos mesmos e No mapa do site arraste a seta acima de um arquivo para alterar o espa o entre os arquivos Como criar sites e documentos 81 82 Cap tulo 3 Para reduzir a janela do site a um painel Clique no bot o com um pequeno tri ngulo no canto inferior esquerdo da janela do site Nota O painel que continuar vis vel corresponde sua escolha de Mostrar sempre na caixa de di logo Prefer ncias de FTP do site Para obter mais informa es sobre as prefer ncias relativas ao site consulte Como definir as prefer ncias de FTP do site na p gina 146 Como trabalhar com os arquivos do site Utilize a exibi o dos arquivos do site para exibir os sites locais e remotos como listas de arquivos abrir arquivos adicio
212. anexando Ir para o quadro da linha de tempo a um quadro 8 Clique em OK 9 Verifique se o evento padr o corresponde ao desejado Se n o corresponder escolha um outro evento no menu pop up Se os eventos desejados n o estiverem listados altere o navegador de destino no menu pop up Eventos de Executar a linha de tempo e Parar a linha de tempo Utilize as a es Executar a linha de tempo e Parar a linha de tempo para permitir que o usu rio inicie ou pare uma linha de tempo ao clicar em um v nculo ou bot o ou inicie ou pare uma linha de tempo automaticamente ao passar o cursor sobre um v nculo imagem ou outro objeto A a o Executar a linha de tempo ser automaticamente anexada ao r tulo BODY com o evento onLoad quando for selecionada a op o Execu o autom tica no inspetor de linhas de tempo Para poder utilizar as a es Executar a linha de tempo e Parar a linha de tempo 1 Escolha Janela gt Linha de tempo para abrir o inspetor de linhas de tempo e se certificar que o documento cont m uma linha de tempo Se n o houver barras de anima o roxas no inspetor de linhas de tempo o documento n o cont m uma linha de tempo Consulte Como criar uma anima o de linha de tempo na p gina 255 2 Selecione um objeto e abra o inspetor de comportamentos 3 Clique no bot o com o sinal de adi o e escolha Executar a linha de tempo ou Parar a linha de tempo no menu pop up A es 4 Selecione a linha de
213. ar 394 atalhos teclado como alterar 394 atributo CLASS 192 atributo USEMAP 211 atributos buscas 159 em perfis de navegadores 398 Consulte tamb m r tulos barra de navega o como adicionar imagens 125 como criar 124 como exibir horizontalmente na p gina 126 como exibir verticalmente na p gina 126 como inserir em uma tabela 126 como modificar os elementos 127 estados da imagem 124 barra de status como definir o texto comportamento 327 menu pop up Tamanho da janela 64 prefer ncias 66 vis o geral 64 426 ndice remissivo BBEdit no Macintosh 355 bibliotecas como abrir os itens 378 como adicionar itens a p ginas 374 378 como alterar a cor de realce dos itens 373 como criar itens 373 como editar os comportamentos em itens 376 como editar os itens 374 como excluir itens 375 como tornar os itens edit veis em documentos 376 prefer ncias 373 propriedades dos itens 377 vis o geral 372 borda da tabela cores 223 largura 223 bordas como adicionar a uma tabela 222 como remover 216 em uma moldura 278 bot o Apagador 90 bot o Carregar a consulta 161 bot o Editar inspetor de propriedades da imagem 202 bot o Editar inspetor de propriedades de roteiro 358 bot o Executar novamente 97 bot o Ir como associar a um menu de salto 319 bot o Paleta 90 bot o Salvar a consulta 161 Busca Ajuda 12 c cabe ote de execu o 253 caixa de di logo Definir o estilo HTML 185 caixa de di logo Inserir a barra de
214. ar a lista de hist rico 95 etapas como aplicar a outros objetos 98 etapas como copiar e colar 100 etapas como repetir 97 n mero m ximo de etapas como definir 95 vis o geral 95 paleta de modelos 367 Paleta de objetos vis o geral 68 paleta de objetos como personalizar 388 pain is 68 prefer ncias 69 ndice remissivo 437 paletas atalhos 419 como abrir e fechar com o Iniciador 67 como definir as prefer ncias de paletas flutuantes 63 cor 90 de encaixe 62 Iniciador 67 paleta de bibliotecas 378 paleta de hist rico 95 paleta de modelos 367 paleta de objetos 68 Consulte tamb m inspetores paletas flutuantes de encaixe 62 pasta Configuration arquivo Extensions txt 390 arquivo menus xml 391 arquivo SourceFormat txt 396 subpasta Behaviors 395 subpasta BrowserProfiles 398 subpasta Commands 395 subpasta Objects 388 subpasta ThirdParty Tags 402 pasta raiz local 77 remoto 142 pasta raiz local 77 pastas como buscar 156 raiz 77 perfil de formata o da origem 396 perfis formato da origem de HTML 396 navegadores 398 PHP Hypertext Preprocessor 407 pixels transparentes 94 pixels transparentes 94 plug ins como detectar 165 como executar na janela do documento 293 como executar os atalhos 417 como redimensionar 203 como verificar 312 Netscape Navigator 292 resolu o de problemas 294 438 ndice remissivo plug ins do Netscape Navigator como executar na janela do documento 293 propriedades 292 resolu o de probl
215. ar as combina es de fontes Utilize o comando Editar a lista de fontes para definir as combina es de fontes que aparecem no inspetor de propriedades e no submenu Texto gt Fonte As combina es de fontes determinam como um navegador exibir um texto de p gina da Web O navegador utilizar a primeira fonte da combina o que estiver instalada no sistema do usu rio se nenhuma das fontes na combina o for encontrada o navegador exibir o texto conforme as especifica es das prefer ncias do navegador Para modificar as combina es de fontes 1 Escolha Texto gt Fonte gt Editar a lista de fontes 2 Selecione a combina o de fontes na lista no alto da caixa de di logo As fontes na combina o selecionada s o apresentadas na lista Fontes escolhidas no canto inferior esquerdo da caixa de di logo direita h uma lista de todas as fontes instaladas no sistema 3 Escolha dentre as seguintes op es e Para adicionar ou remover as fontes de uma combina o clique no bot o lt lt ou gt gt entre as listas Fontes escolhidas e Fontes dispon veis e Para adicionar ou remover uma combina o de fontes clique nos bot es de adi o e subtra o respectivamente no alto da caixa de di logo e Para adicionar uma fonte que n o esteja instalada no sistema digite o nome da fonte no campo de texto abaixo da lista Fontes dispon veis e clique no bot o lt lt para adicion la combina o
216. ar erros provocar erros navega o Definir o texto OK Falha sem OK OK da moldura provocar erros Definir o texto Falha sem Falha sem Falha sem Falha sem da camada provocar erros provocar erros provocar erros provocar erros Definir a OK Falha sem OK OK mensagem de provocar erros status Definir o texto OK Falha sem OK OK do campo de provocar erros texto Mostrar ocultar Falha sem Falha sem Falha sem Falha sem as camadas provocar erros provocar erros provocar erros provocar erros Permutar a OK Falha sem OK Falha sem imagem provocar erros provocar erros Restaurar a OK Falha sem OK Falha sem imagem permutada provocar erros provocar erros Ir para o quadro da linha de tempo Executar a linha de tempo e Parar a linha de tempo A anima o da origem da imagem e a chamada do comportament o funcionam por m a anima o da camada falha sem provocar erros Falha sem provocar erros A anima o da origem da imagem e a chamada do comportament o funcionam por m a anima o da camada falha sem provocar erros Falha sem provocar erros Validar o formul rio OK Falha sem provocar erros OK OK 308 Cap tulo 12 Chamar o JavaScript A a o Chamar o JavaScript permite utilizar o inspetor de comportamentos para especificar a execu o de uma fun o ou linha de c digo personalizada de JavaScript quando ocorrer um evento Para poder utilizar a a o Chamar o JavaScri
217. ar o arquivo o Dreamweaver utilizar temporariamente um caminho absoluto iniciado por file at que o arquivo seja salvo e em seguida o Dreamweaver converter o caminho file em um caminho relativo Quando um grupo de arquivos for movido em conjunto mantendo os seus caminhos relativos por exemplo quando uma pasta for transferida inteira de maneira que os arquivos dentro dela mantenham os mesmos caminhos relativos entre si os v nculos relativos a documento n o precisar o ser atualizados entre esses arquivos Contudo quando um arquivo individual que cont m v nculos relativos a documento ou que est vinculado por esse mesmo tipo de liga o for movido torna se absolutamente necess rio atualizar esses v nculos Se os arquivos forem movidos ou renomeados utilizando a janela do site o Dreamweaver ajudar a atualizar todos os v nculos relevantes Sobre os caminhos relativos raiz Caminhos relativos raiz fornecem o caminho da pasta raiz do site a um documento Nota Se voc entender a capacidade e as limita es dos caminhos relativos raiz eles poder o ser teis mas caso n o esteja familiarizado com esse tipo de caminho os relativos a documento s o mais recomendados Um caminho relativo raiz inicia com uma barra inclinada para a direita que representa a pasta raiz do site Por exemplo support tips html um caminho relativo raiz para um arquivo tips html na subpasta support dentro da past
218. ar os arquivos que ser o processados ou desativar o processamento das server side includes 1 Escolha Editar gt Prefer ncias gt Convers o 2 Na lista de conversores selecione Server side includes Modelos e bibliotecas 379 380 Cap tulo 14 3 Selecione uma das seguintes op es para converter as server side includes Em todos os arquivos a defini o padr o deixe esta op o ativa a fim de exibir o conte do dos arquivos inclu dos na janela do documento Em nenhum arquivo desativa todos os processamentos de server side includes no Dreamweaver Nos arquivos com extens es acarreta o processamento pelo Dreamweaver das server side includes apenas nos arquivos com as extens es stm html htm shtml ou shtm Nos arquivos com uma das seguintes express es acarreta o processamento pelo Dreamweaver do documento a fim de detectar coincid ncias relativas s express es comuns e se n o forem detectadas ser o processadas as server side includes contidas no documento Como editar uma server side include Assim como os itens de biblioteca as server side includes inclus es do servidor s o selecionadas como um conjunto nico na janela do documento Ao contr rio dos itens de biblioteca o HTML contido em uma inclus o n o aparecer no inspetor de origem de HTML Em vez disso ser mostrada a instru o do servidor que tem esta apar ncia lt include virtual uber html footer html gt Par
219. ar uma c lula Consulte Como dividir e mesclar as c lulas na p gina 231 Clique no bot o Dividir a c lula para dividir a c lula em duas Consulte Como dividir e mesclar as c lulas na p gina 231 Selecione Sem quebra para impedir a quebra autom tica de linhas Esta op o expande as c lulas a fim de que acomodem todos os dados medida que forem digitados ou colados em uma c lula Normalmente as c lulas se expandem horizontalmente para acomodar a palavra maior e em seguida se ampliam verticalmente Selecione Cabe alho para formatar as c lulas ou linhas selecionadas como um cabe alho de tabela Como padr o o conte do das c lulas do cabe alho da tabela est em negrito e no centro Como formatar uma tabela com um desenho predefinido Utilize o comando Formatar a tabela para aplicar rapidamente um desenho predefinido a uma tabela Em seguida as op es podem ser selecionadas para personalizar o desenho Para utilizar um desenho predefinido 1 2 Selecione a tabela e escolha Comandos gt Formatar a tabela Na caixa de di logo que aparecer escolha um esquema de desenho na lista esquerda A tabela ser atualizada de modo a exibir um exemplo do desenho Para aprimorar a personaliza o do desenho altere as op es Cores da linha Linha do alto e Coluna esquerda Para modificar a largura da borda digite um valor no campo Borda Digite 0 para que n o haja borda Para aplicar
220. ara escolher o arquivo Editar abre a janela do roteiro permitindo a altera o do roteiro Como inserir coment rios Um coment rio um texto descritivo inserido no HTML para explicar o c digo ou fornecer outras informa es Um coment rio n o afeta a apar ncia do documento em um navegador Se for necess rio adicionar mais informa es sobre qualquer arquivo do site tamb m poss vel utilizar as Design Notes Para obter mais informa es consulte Sobre as Design Notes na p gina 172 Consulte tamb m Como definir as prefer ncias de elementos invis veis na p gina 90 Para inserir um coment rio 1 Coloque o ponto de inser o onde deve ser adicionado o coment rio 2 Clique no bot o Coment rio no painel Invis veis da paleta de objetos ou escolha Inserir gt Coment rio Para exibir os marcadores de coment rios na janela do documento escolha Exibir gt Elementos invis veis Para inserir o texto do coment rio 1 Selecione o cone de Coment rios 2 Digite o texto no inspetor de propriedades A cria o de um coment rio gera o c digo HTML seguinte lt Comment text gt CAP TULO 14 Modelos e bibliotecas Os modelos e bibliotecas do Dreamweaver podem auxili lo a criar p ginas da Web com um desenho consistente A utiliza o de modelos e bibliotecas tamb m facilita a manuten o do seu site da Web j que poss vel redesenh lo assim como alterar centenas de p gin
221. ara fechar a caixa de di logo Atualizar as p ginas 12 Feche o modelo Tutorial do Dreamweaver 55 Aplicar o modelo Agora voc utilizar o modelo para criar uma nova p gina de produto 1 Escolha Arquivo gt Novo a partir de modelo Aparecer a caixa de di logo Selecionar o modelo Selecionar o modelo Site sito senza nome 1 z 2 Na lista de modelos selecione my product page como modelo a ser aplicado e em seguida clique em Selecionar Aparecer um documento novo e sem t tulo our story products price 12 95 As regi es mais escuras do documento s o edit veis todas as outras regi es do documento est o bloqueadas n o podendo ser editadas 3 Salve o documento e nomeie o arquivo my products mug html 56 Cap tulo1 Editar o documento Com as regi es edit veis definidas a atualiza o das p ginas se torna f cil Voc substituir o texto alocador de espa o por uma imagem e adicionar texto para criar a p gina de produtos Commuter Mug da Scaal 1 2 6 7 Coloque o ponto de inser o na regi o Imagem Escolha Inserir gt Imagem Na caixa de di logo que aparecer selecione mug jpg e em seguida clique em Selecionar no Windows ou Escolher no Macintosh para selecionar a imagem Exclua o texto alocador de espa o da imagem Insert image here Na regi o Nome da janela do documento digite um nome para o produto como Commuter Mug e exclua o te
222. armazenar os documentos do site da Web e criar as p ginas HTML talvez seja conveniente estabelecer conex es entre os seus e outros documentos ou tipos de arquivos Para saber como configurar um site local consulte Como criar um site local na p gina 77 O Dreamweaver oferece diversos modos de configurar os v nculos de hipertexto para documentos imagens arquivos de multim dia ou programas descarreg veis Podem ser estabelecidos v nculos com qualquer texto ou imagem em qualquer parte de um documento inclusive texto ou imagens localizados em um cabe alho lista tabela camada ou moldura Com o Dreamweaver poss vel criar facilmente os seguintes tipos de v nculos de texto ou imagens gr ficas e V nculos internos como vincular documentos no mesmo site da Web e V nculos externos como vincular a documentos fora de um site local da Web e V nculos de correio eletr nico que abrem um formul rio de correio eletr nico e V nculos para ncoras com nome que permitem ao visitante passar a uma determinada rea na mesma p gina da Web ou para uma outra diferente Para examinar uma representa o da estrutura do site utilize o recurso Mapa do site No mapa do site poss vel adicionar novos documento ao site criar v nculos ao documento remover documentos e verificar os v nculos aos arquivos dependentes Consulte Como exibir a estrutura do site na p gina 127 109 110 Cap tulo 4 Sobre as localiza e
223. as de estilos como editar as folhas de estilos externas 191 externas 190 prefer ncias 195 vis o geral 188 Consulte tamb m estilos folhas de estilos externas como criar 190 como editar 191 como vincular a 190 fontes codifica es como definir fontes para 72 como alterar a cor das 181 como alterar as caracter sticas 179 como alterar as combina es 180 formatos de arquivos imagem 199 formul rios campos como validar 334 como criar 382 como processar 384 comportamentos como utilizar com 385 cria o de roteiros do servidor 385 cria o de roteiros pelo cliente 384 menus de salto como criar 122 objetos como adicionar 383 propriedades 382 vis o geral 381 fotografias 199 FTP como transferir arquivos com 141 prefer ncias 146 registro 153 resolu o de problemas 143 fundo imagem da p gina e cor 94 transpar ncia em 94 grade como alterar a defini o da 247 como encaixar as camadas na 247 como guia 103 como mostrar 247 gr ficos Consulte imagens guia Informa es b sicas Design Notes 173 guia Todas as informa es Design Notes 174 home page como definir 131 HomeSite no Windows 338 HTML do Microsoft Word como importar 352 como limpar 352 HTML do Word Consulte HTML do Microsoft Word cone de Abrir a folha de estilos 190 cone do indicador de arquivos 116 imagens atalhos 415 como alinhar 182 como alterar o arquivo de origem com as linhas de tempo 259 como aplicar comportamentos a 214 co
224. as em segundos Um modelo um documento que pode ser utilizado como base para outros documentos Quando um modelo criado poss vel indicar quais elementos de uma p gina dever o permanecer inalterados n o edit veis e quais poder o ser alterados Por exemplo caso voc esteja publicando uma revista on line o nome provavelmente n o ser alterado mas o t tulo e o conte do da mat ria de capa ser o modificados a cada edi o Para indicar o estilo e o local dessa mat ria pode ser utilizado um texto alocador de espa o que definir uma regi o edit vel Para adicionar uma nova mat ria de capa basta que o autor selecione o texto alocador de espa o e digite o novo artigo para substitu lo Um modelo pode ser modificado mesmo depois de ter sido utilizado para criar documentos Quando os documentos que utilizam o modelo forem atualizados suas se es bloqueadas n o edit veis ser o atualizadas de modo a refletir as altera es no modelo 359 360 Cap tulo 14 O Dreamweaver tamb m oferece duas maneiras de tratar esses conte dos recorrentes para que n o seja necess rio alter los em cada p gina do site itens de biblioteca e server side includes Voc poder utilizar estas abordagens para o conte do que se repetir em cada p gina do site como um cabe alho ou rodap por exemplo ou que aparecer apenas em algumas p ginas mas que deve ser atualizado fregtentemente como as manchetes de not cias ou ofertas
225. as op es de estado da imagem voc deve escolher uma Imagem ativa os outros estados da imagem s o opcionais No campo Imagem ativa clique em Procurar para selecionar a imagem mostrada inicialmente No campo Imagem sobreposta clique em Procurar para selecionar a imagem a ser exibida quando o usu rio mover o ponteiro sobre a imagem No campo Imagem inativa clique em Procurar para selecionar a imagem a ser exibida depois que o usu rio clicar na imagem No campo Imagem sobreposta enquanto inativa clique em Procurar para selecionar a imagem a ser exibida depois que o usu rio clicar na imagem e em seguida mover o ponteiro sobre ela V nculos e navega o 125 126 Cap tulo 4 4 No campo Quando clicado v para a URL selecione uma localiza o na qual o arquivo ser aberto e siga o procedimento abaixo e Selecione Janela principal para abrir o arquivo na mesma janela e Selecione uma moldura onde ser aberto o arquivo Nota Se a moldura a ser designada n o aparecer no menu pop up Destino saia da caixa de di logo Inserir a barra de navega o e digite o nome da moldura Para obter mais informa es sobre a maneira de designar uma moldura consulte Como definir as propriedades das molduras na p gina 273 5 Selecione as op es de carga da imagem e Pr carregar as imagens descarrega as imagens quando a p gina for carregada Se esta op o n o estiver selecionada pode haver uma demora quan
226. ativada no seu navegador Caso voc planeje utilizar o recurso de busca verifique se o Java tamb m est ativado A Ajuda do Dreamweaver inclui os seguintes componentes Sum rio Permite ver todas as informa es organizadas por assunto Clique nas entradas de n vel superior para exibir os subt picos ndice como um ndice tradicional impresso pode ser utilizado para localizar termos importantes e ir para os t picos relacionados Guia de introdu o 1 12 Introdu o Busca permite localizar qualquer sequ ncia de caracteres no texto inteiro do t pico A busca requer um navegador 4 0 com Java ativado Nota Depois que o usu rio clicar em Busca a janela de seguran a do Java pode aparecer solicitando permiss o para ler os arquivos no seu disco r gido Esta permiss o deve ser concedida para que a busca funcione O applet n o gravar nada no disco r gido nem ler os arquivos que n o estiverem nas P ginas da Ajuda em HTML e Para procurar uma frase basta digit la na caixa de texto Procurar lolx Digite a palavra chave a ser localizada utilize um sinal de adi o para buscas m ltiplas de palavras pos around the Clock IV Sens vel a mai sc min sc Listar os t picos e Para fazer uma busca nos arquivos de duas palavras chave camadas e estilos por exemplo separe os termos da busca com um sinal de adi o Procurar olx Digite a palavra chave a ser localizada utilize um sinal de
227. avaScript para controlar a propriedade de visibilidade e exibir dinamicamente o conte do das camadas Escolha uma dentre as seguintes op es e Default Padr o n o especifica uma propriedade de visibilidade por m a maior parte dos navegadores interpreta essa op o como Inherit Herdar e Inherit Herdar utiliza a propriedade de visibilidade da camada m e e Visible Vis vel exibe o conte do da camada independentemente do valor da camada m e e Hidden Oculta oculta o conte do da camada independentemente do valor da camada m e Observe que as camadas ocultas criadas com os r tulos LAYER e ILAYER ocupar o o mesmo espa o como se estivessem vis veis Imagem de fundo especifica uma imagem de fundo para a camada Clique no cone correspondente pasta para procurar e selecionar um arquivo de imagem ou digite o caminho da imagem no campo de texto Cor de fundo especifica uma cor de fundo para a camada Deixe esta op o em branco para especificar um fundo transparente R tulo determina se a camada CSS ou da Netscape SPAN e DIV criam camadas CSS enquanto que LAYER e ILAYER criam camadas da Netscape Estouro apenas nas camadas CSS determina o que ocorrer se o conte do exceder o tamanho da camada Escolha uma dentre as seguintes op es e Visible Vis vel aumenta o tamanho da camada para que todo o conte do da camada possa estar em exibi o A camada se expandir para baixo e para a direita
228. b poss vel anexar os comportamentos a imagens da barra de navega o e definir qual imagem ser exibida com base nas a es do usu rio Por exemplo poss vel mostrar uma imagem de bot o no estado ativo ou inativo para permitir que o usu rio saiba qual p gina de um site est sendo exibida Consulte Como inserir uma barra de navega o na p gina 125 Inserir o menu de salto permite configurar uma lista de menu pop up com v nculos que abrem arquivos em uma janela de navegador quando forem clicados Uma janela ou moldura espec fica tamb m pode ser designada na qual o documento ser aberto Consulte Como inserir um menu de salto na p gina 122 Como utilizar as molduras 281 282 Cap tulo 10 CAP TULO 11 Como inserir m dia Para inserir um applet de Java um filme Shockwave ou Flash controle ActiveX ou outros objetos de udio ou v deo em uma p gina siga um dos procedimentos abaixo e Posicione o ponto de inser o no local onde deseja inserir o objeto e em seguida clique no bot o apropriado na paleta de objetos e Arraste o bot o apropriado da paleta de objetos at o local onde deseja que o objeto apare a na janela do documento e Posicione o ponto de inser o e em seguida escolha o objeto apropriado no submenu Inserir gt M dia Na maioria dos casos aparecer uma caixa de di logo que permite escolher um arquivo de origem e especificar certos par metros do objeto de m dia
229. bida e escolha Exibir gt Exibir como raiz no Windows ou Site gt Exibi o do mapa do site gt Exibir como raiz no Macintosh O mapa do site ser redesenhado na janela como se a p gina especificada estivesse na raiz do site O campo Navega o no site situado acima do mapa do site exibe o caminho da home page at a p gina especificada Selecione qualquer item nesse caminho para exibir o mapa do site a partir desse n vel clicando uma vez Para expandir ou reduzir as ramifica es Clique nos sinais de adi o ou subtra o no Windows ou nas setas de expans o no Macintosh para expandir ou reduzir a ramifica o Como salvar o mapa do site poss vel salvar o mapa do site como uma imagem e em seguida exibi la ou imprimi la em um editor de imagens Para criar um arquivo de imagem do mapa do site atual 1 No mapa do site siga um dos procedimentos abaixo e No Windows na caixa de di logo Salvar o mapa do site escolha Arquivo gt Salvar o mapa do site como No menu pop up Tipo de arquivo selecione bmp ou png e No Macintosh selecione Site gt Exibi o do mapa do site gt Salvar o mapa do site gt Salvar o mapa do site como PICT ou Site gt Exibi o do mapa do site gt Salvar o mapa do site gt Salvar o mapa do site como JPEG 2 Escolha uma localiza o digite um nome para a imagem e clique em Salvar V nculos e navega o 133 134 Cap tulo 4 Como gerenciar os v nculos
230. ca de sele o pr xima ao seu nome selecione o no menu Em geral se voc n o tiver certeza sobre onde procurar um recurso do Dreamweaver tente o menu Janela Como utilizar as paletas flutuantes de encaixe A maioria das paletas e inspetores do Dreamweaver podem ser encaixados ou combinados em uma nica paleta flutuate com guias Este recurso facilita o acesso s informa es necess rias sem desordenar o seu espa o de trabalho O Iniciador o inspetor de propriedades e a janela do site do site n o podem ser encaixados Para combinar duas ou mais paletas a fim de criar uma paleta com guias 1 Arraste a guia n o a barra de t tulos de uma paleta flutuante sobre outra paleta flutuante Quando aparecer uma borda real ada ao redor da paleta de destino solte o bot o do mouse 2 Clique em qualquer guia na janela para trazer a paleta correspondente para a frente Como a paleta de objetos n o possui uma guia ela n o pode ser encaixada com outras paletas mediante o arraste no entanto poss vel combinar outras paletas com a paleta de objetos arrastando as guias daquelas sobre esta Para remover uma paleta da paleta com guias Arraste a sua guia para fora da janela Para mover uma paleta de uma paleta com guias para outra Arraste a sua guia para a outra paleta com guias Quando aparecer uma borda real ada ao redor da paleta de destino solte o bot o do mouse Como definir as prefer ncias das paletas flutuantes
231. campos medida que o usu rio estiver preenchendo o formul rio selecione um campo de texto e escolha Janela gt Comportamentos Para validar v rios campos quando o usu rio enviar o formul rio clique no r tulo lt form gt no seletor de r tulos situado no canto inferior esquerdo da janela do documento e escolha Janela gt Comportamentos No menu pop up A es escolha Validar o formul rio Siga um dos procedimentos abaixo Se estiver validando determinados campos selecione o mesmo campo que tiver selecionado na janela do documento na lista Campos com nome Se estiver validando v rios campos selecione um campo de texto na lista Campos com nome Selecione a op o apropriada se o campo se destinar a receber dados 7 Escolha uma dentre as seguintes op es Aceitar e Utilize a op o Qualquer item se o campo for necess rio por m n o precisar conter um determinado tipo de dados Esta op o n o ter significado ela equivale aus ncia no campo da a o Validar o formul rio se a op o Necess rio n o estiver selecionada e Utilize a op o Endere o eletr nico para verificar se o campo cont m um sinal de O e Utilize a op o N mero para verificar se o campo cont m apenas numerais e Utilize a op o N mero de para verificar se o campo cont m apenas um n mero em uma faixa espec fica 8 Se estiver validando v rios campos repita as etapas 6 e 7 para quaisquer outros campos a
232. car Texto Comandos Site Janela Ajuda Arquivo Editar Exibir Site Janela I l Lo bad products brave blend light roast 20 oz nmer att view this prod body lt table gt lt tr lt td gt lt table 4294 410 28K B sec s o LA I O cy D lt gt 4 b 1itens locais selecionados totalz Pressione a tecla Shift e arraste o cone do indicador de arquivos do texto na janela do documento at um arquivo na janela do site V nculos e navega o 117 118 Cap tulo 4 Para criar um v nculo a partir de um arquivo no mapa do site 1 Selecione um arquivo HTML no mapa do site O cone do indicador de arquivos aparecer ao lado do arquivo 2 Arraste o cone do indicador de arquivos e indique um outro documento aberto uma ncora vis vel de um documento aberto ou um documento na janela do site 3 Solte o bot o do mouse Site scaal Lax Arquivo Editar Exibir Site Janela Ajuda gjg oa SConecia Gatuaza 005 ooo o Navega o no site home html images Templates E business html estranet login html home html extranet neves html l gifts html y home html inspiration html lz ourstory htrl product blends html product foods him product page html product results html product search html product tools html product wear html spring template html thiswesk html untitled htm winter templates html gifts htmi thisweek html inspiration htmi
233. caso clique em uma janela do Dreamweaver para continuar a trabalhar neste programa Para limitar a sele o de cores aceitas pela Web certifique se de que o bot o Conta gotas aceito pela Web esteja ativado Quando esta op o estiver ativada a cor selecionada se transformar na cor mais pr xima aceita pela Web Clique no bot o para desativar esta op o Clique no bot o Apagador para remover a cor atual sem escolher outra diferente Clique no bot o Paleta para abrir o seletor de cores do sistema As cores escolhidas com o seletor de cores do sistema n o se transformar o na cor mais pr xima aceita pela Web mesmo se o conta gotas aceito pela Web estiver ativo Como criar sites e documentos 91 92 Cap tulo 3 Sobre as cores aceitas pela Web Em HTML as cores s o expressas como valores hexadecimais FF0000 por exemplo ou como nomes vermelho As cores comuns ao Netscape Navigator e ao Microsoft Internet Explorer nos sistemas Windows e Macintosh quando s o executadas no modo de 256 cores s o chamadas de cores aceitas pela Web Na pr tica diz se que h 216 cores comuns e que qualquer valor hexadecimal que combine os pares 00 33 66 99 CC ou FF valores RGB 0 51 102 153 204 e 255 respectivamente representa uma cor aceita pela Web Contudo os testes revelam que h somente 212 cores aceitas pela Web O Internet Explorer no Windows n o renderiza corretamente as cores 0033FF 0 51 255 3300FF 51
234. cionar com facilidade um site em uma lista de sites previamente definidos 5 Clique no cone correspondente pasta situado direita do campo Pasta raiz local navegue at a pasta Sites Scaal site e clique em Abrir Em seguida clique em Selecionar no Windows ou Escolher no Macintosh O campo Pasta raiz local ser atualizado exibindo o caminho at o site local Defini o de Site sem nome 1 Ei Informa es locais Inform serv da Web Nomedosi 4a Devolver retirar Layout do mapa do site Design Notes Pasta raiz locab CATutorishScaal site e IV Atualizar automaticamente a lista de arquivos locais Os sites locais requerem apenas as op es acima Op es de gerenciamento de v nculos Endere o do HTTE http Cache Utilizar cache para acelerar atualiz dos v nculos Loo cc auto Nota O caminho completo para a pasta Scaal site poder variar dependendo de onde voc tiver criado a pasta Sites 6 Clique em OK Tutorial do Dreamweaver 25 7 Clique em Criar quando for solicitado caso prefira criar um arquivo de cache para o site Se o conte do da pasta Scaal site for colocado em um cache ser criado um registro dos arquivos existentes para que o Dreamweaver possa atualizar rapidamente os v nculos quando um arquivo for movido renomeado ou exclu do A janela do site exibe agora uma lista de todas as pastas e arquivos do site local my tutorial Essa lista tamb m atua como
235. cione um objeto geralmente a imagem a ser permutada e abra o inspetor de comportamentos 5 Clique no bot o com o sinal de adi o e escolha Permutar a imagem no menu pop up A es 6 Na lista Imagens selecione a imagem cuja origem deseja alterar 7 Clique em Procurar para selecionar o arquivo da nova imagem ou digite o caminho e nome do arquivo da nova imagem no campo Definir a origem como 8 Repita as etapas Ge 7 para quaisquer outras imagens a serem alteradas Como utilizar os comportamentos 331 332 Cap tulo 12 9 Quando a p gina tiver sido carregada selecione a op o Pr carregar as imagens para carregar as novas imagens no cache do navegador Este procedimento evita os atrasos causados pela descarga quando as imagens tiverem que ser exibidas 10 Clique em OK 11 Verifique se o evento padr o corresponde ao desejado Se n o corresponder escolha um outro evento no menu pop up Se os eventos desejados n o estiverem listados altere o navegador de destino no menu pop up Eventos de Restaurar a imagem permutada A a o Restaurar a imagem permutada restaura o ltimo conjunto de imagens permutadas aos seus arquivos de origem anteriores Esta a o adicionada automaticamente sempre que voc anexar a a o Permutar a imagem a um objeto n o ser necess rio selecion la manualmente se tiver deixado a op o Restaurar selecionada durante a anexa o de Permutar a imagem Ir para o quadro da lin
236. cora com nome digite o nome da ncora Se o marcador da ncora n o aparecer no local do ponto de inser o escolha Exibir gt Elementos invis veis Para estabelecer um v nculo a uma ncora com nome 1 Na janela do documento selecione um texto ou uma imagem da qual ser criado um v nculo 2 No inspetor de propriedades no campo V nculo digite um sinal de n mero e o nome da ncora Por exemplo e Para estabelecer um v nculo a uma ncora com o nome alto no arquivo atual digite falto e Para estabelecer um v nculo a uma ncora com o nome alto em um documento diferente na mesma pasta digite nomedoarquivo htmlfalto V nculos e navega o N9 120 Cap tulo 4 Para estabelecer um v nculo a uma ncora com nome utilizando o m todo de indica o de arquivos 1 Escolha Exibir gt Elementos invis veis para tornar a ncora vis vel 2 Selecione o texto ou uma imagem na janela do documento 3 Siga um dos procedimentos abaixo e Clique no cone do indicador de arquivos direita do campo V nculo no inspetor de propriedades e arraste o at a ncora que ser vinculada uma ncora no mesmo documento ou em outro documento aberto e Mantenha a tecla Shift pressionada e clique na janela do documento e em seguida arraste o cursor at a ncora a ser vinculada uma ncora no mesmo documento ou em outro documento aberto Como criar um v nculo de correio eletr nico Um v nculo de cor
237. criar um estilo HTML para adicionar nfase palavra Scaa no documento 1 Clique no cone de Novo estilo na parte inferior da paleta de estilos HTML Estilos HTML pa T Estilos HTML Limpar o estilo da sele o 4 Limpar o estilo do par grafo 1 body a soaal cone de Novo estilo Aparecer a caixa de di logo Definir o estilo HTML Nome Aplicar a Sele o a C Par grafo 9 Ao aplicar C Adicionar ao estilo existente E Limpar o estilo existente Atributos da fonte Fonte Fonte padr o 7 Tamanho Nenhum 7 Cor Estilo B Z Outro afg Cancelar Ajuda Limpar 2 No campo Nome digite scaal 3 Em Aplicar a selecione Sele o Este procedimento aplicar o estilo faixa selecionada de texto em vez do par grafo inteiro 4 In Ao aplicar mantenha inalterada a defini o padr o Limpar o estilo existente que limpa qualquer estilo que houver sido aplicado ao texto selecionado ao aplicar o novo estilo Tutorial do Dreamweaver 45 46 Cap tulo 1 5 Em Atributos da fonte selecione os atributos desejados Eis algumas sugest es e Fonte Arial Helvetica sans serif e Tamanho 3 e Cor CC9933 ou utilize o seletor de cores para selecionar uma cor dourada e Estilo clique em Outro e em seguida selecione nfase 6 Clique em OK O novo estilo ser adicionado paleta de estilos HT ML Observe o a que precede o estilo Scaal este cone identifica um e
238. cuos em espa os ou tabula es se a op o Utilizar estiver definida para espa os ou tabula es respectivamente Por exemplo se a op o Utilizar estiver definida para tabula es e o par metro em Tamanho do recuo for 4 os r tulos ser o recuados com quatro tabula es Tamanho da tabula o determina o tamanho das tabula es medido em caracteres de espa os Nota Se o Tamanho do recuo n o for um m ltiplo do Tamanho da tabula o e a op o Utilizar estiver definida como tabula es os r tulos ser o recuados usando uma combina o de tabula es e caracteres de espa os Quebra autom tica de linha quebra as linhas com uma quebra de linha incondicional quando atingirem a largura de coluna especificada Observe que o Dreamweaver inserir quebras de linhas incondicionais apenas nos locais onde estas n o alterar o a apar ncia do documento nos navegadores por isso algumas linhas podem ser mantidas mais longas que a especifica o na op o Quebra autom tica de linha De modo contr rio a caixa de sele o Quebra autom tica de linha no inspetor de origem de HT ML adiciona uma quebra condicional s linhas que ultrapassarem a largura da janela Quebras de linha especifica o tipo de servidor remoto Windows Macintosh ou UNIX que serve de host para o site remoto A escolha do tipo adequado dos caracteres de quebra de linha assegura que o c digo de origem de HTML aparecer corretamente quando exibido no ser
239. da imagem Como inserir imagens 201 202 Cap tulo 7 Destino especifica a moldura ou janela na qual a p gina vinculada dever ser carregada Esta op o n o estar dispon vel quando a imagem estiver desvinculada Os nomes de todas as molduras no documento atual aparecer o na lista Se a moldura especificada n o existir quando o documento for aberto em um navegador a p gina vinculada ser carregada em uma nova janela que ter o nome especificado Quando essa janela passar a existir outros arquivos poder o ser destinados para esse local Podem ser escolhidos tamb m os seguintes nomes de destino reservados e blank carrega o arquivo vinculado em uma janela do navegador nova e sem nome e parent carrega o arquivo vinculado em um conjunto pai de molduras ou na janela da moldura que cont m o v nculo Se a moldura onde est o v nculo n o estiver aninhada o arquivo vinculado ser carregado na janela inteira do navegador e self carrega o arquivo vinculado na mesma moldura ou janela que o v nculo Esse destino est impl cito portanto geralmente n o necess rio especific lo e top carrega o arquivo vinculado na janela inteira do navegador removendo todas as molduras Orig baixa especifica a imagem que deve ser carregada antes da imagem principal Muitos designers utilizam uma vers o de 2 bits em preto e branco da imagem principal porque carregada rapidamente e serve como uma representa o para os visitan
240. de HTML uma ferramenta til para aprender a linguagem HT ML caso voc ainda n o a conhe a ou como lembrete da sintaxe adequada ou dos valores de r tulos e atributos espec ficos As altera es feitas no inspetor de origem de HTML aparecer o na janela do documento apenas quando voc clicar fora do inspetor O Dreamweaver nunca regrava o HTML digitado diretamente no inspetor de origem de HTML se for especificado aqui um HTML inv lido o Dreamweaver real ar os r tulos como inv lidos quando o usu rio clicar na janela do documento Para abrir o inspetor de origem de HTML siga um dos procedimentos abaixo e Escolha Janela gt Origem de HTML e Clique no cone do inspetor de origem de HTML no Iniciador ou no Mini iniciador no canto inferior direito da janela do documento e Pressione a tecla F10 products cd html Origem de HTML Y Orig de HTML D Quebra autom de linha r N meros de linha lt tr gt l lt tr gt lt td wvidth 147 gt lt p gt lt img src Images spacer clear gif width 1 height lt p align right gt lt a href thisweek html onMouseOut M lt td gt lt td width 335 valign top bgcolor fiCcccaos gt lt div align center gt lt p gt lt img src Images MusicCD_big jpg vidth 225 heil lt div gt lt td gt lt td width 227 bgcolor fCC9933 rowspan 4 gt enhsp lt td lt tr gt lt tr gt No inspetor de origem de HTML poss vel ativar o
241. de MM SNAPPED de uma camada encaixada seja redefinida como false se o ponteiro do mouse for passado sobre a pr pria Isto poder ocorrer quando tiver utilizado Arrastar a camada para criar um quebra cabe a j que prov vel que o usu rio passe o ponteiro do mouse sobre as pe as j encaixadas enquanto posiciona outras MM dragLayer n o capaz de evitar este comportamento porque algumas vezes ele prefer vel por exemplo se desejar definir diversos destinos de soltura para uma nica camada Como utilizar os comportamentos 317 318 Cap tulo 12 Para evitar o novo registro de camadas j encaixadas 1 Escolha Editar gt Localizar 2 No menu pop up Localizar escolha Origem de HTML 3 Digite curDrag no campo de texto adjacente 4 Clique em Localizar o pr ximo Se o Dreamweaver indagar se voc deseja continuar a procurar desde o in cio do documento clique em Sim O Dreamweaver se deparar com a seguinte instru o if IcurDrag return false 5 Feche a caixa de di logo Localizar e modifique a instru o no inspetor de HTML para que corresponda a if IcurDrag curDrag MM SNAPPED null return false Os dois pipes significam ou enquanto que curDrag uma vari vel que representa a camada que est sendo registrada como arrast vel O significado aproximado da instru o Se curDrag n o for um objeto ou se j tiver um valor MM SNAPPED n o ser necess rio executar o restante da fu
242. de arquivos estiver desativada a obten o de um arquivo transferir uma c pia com os privil gios de leitura e grava o Consulte Como utilizar o sistema de devolu es e retiradas na p gina 148 Gerenciamento de sites 151 152 Cap tulo 5 Nota Se voc estiver trabalhando em um ambiente de equipe isto se outras pessoas estiverem utilizando os mesmos arquivos n o recomendada a desativa o de Ativar a devolu o e retirada de arquivos Em particular se as outras pessoas estiverem utilizando o sistema de devolu o retirada no site voc tamb m deve usar o mesmo sistema Observe que os arquivos copiados quando for clicada a op o Obter s o aqueles selecionados no painel ativo da janela do site Se o painel remoto estiver ativo o arquivos remotos selecionados ser o copiados para o site local se o painel local estiver ativo as vers es remotas dos arquivos locais escolhidos ser o copiadas no site local Se voc n o estiver trabalhando em um ambiente de equipe e desejar obter arquivos com privil gios de leitura e grava o desative a op o Ativar a devolu o e retirada de arquivos no site consulte Como associar um servidor remoto a um site local na p gina 140 Para obter apenas os arquivos cuja vers o remota for mais recente que a local utilize o comando Sincronizar consulte Como sincronizar os arquivos nos sites local e remoto na p gina 154 Para obter arquivos de um ser
243. de di logo Defini o do site clique em Design Notes Desmarque Carregar para compartilhar As Design Notes n o ser o transferidas para o site remoto quando os arquivos forem devolvidos retirados Voc ainda poder adicionar e modificar localmente as Design Notes do site Para excluir as Design Notes n o associadas ao site 1 2 3 4 Escolha Site gt Definir os sites Na caixa de di logo Definir os sites selecione o site e clique em Editar Na caixa de di logo Defini o do site clique em Design Notes Clique em Limpar O Dreamweaver solicitar que verifique se as Design Notes que n o est o mais associadas a um arquivo do site dever o ser exclu das Se voc utilizar o Dreamweaver para excluir um arquivo ao qual est associado um arquivo de Design Notes ambos ser o exclu dos por essa raz o geralmente os arquivos de Design Notes rf os ocorrer o apenas quando um arquivo for exclu do ou renomeado fora do Dreamweaver Nota Se a op o Manter as Design Notes for cancelada antes de clicar em Limpar o Dreamweaver excluir todos os arquivos de Design Notes associados ao site Gerenciamento desites 175 176 Cap tulo 5 Como utilizar as Design Notes no Fireworks e Dreamweaver Se uma imagem for aberta no Macromedia Fireworks 3 0 e exportada com outro formato o Fireworks salvar automaticamente no arquivo de Design Notes o nome do arquivo de origem inicial Por exemplo se voc abrir myhouse png no Fir
244. defini o de prefer ncia de quebra de p gina ser ignorada Consulte Como definir as prefer ncias de formato HTML na p gina 346 Como utilizar o sistema de devolu es e retiradas Em um ambiente com m ltiplos usu rios poss vel retirar e devolver arquivos ao transferi los do servidor remoto para o seu computador local Consulte Como devolver e retirar os arquivos de um servidor remoto na p gina 150 A retirada de um arquivo equivale a declarar Estou trabalhando com este arquivo n o o toque Quando um arquivo for retirado o Dreamweaver exibir uma marca de sele o ao lado do cone do arquivo na janela do site Uma marca de sele o verde indica que o arquivo foi retirado por voc enquanto que uma marca vermelha significa que o arquivo foi retirado por um outro membro da equipe O nome da pessoa que retirou o arquivo tamb m ser exibido na janela do site A devolu o de um arquivo possibilitar aos outros membros da equipe retirar e edit lo O status da vers o local se tornar somente de leitura a fim de evitar eventuais altera es enquanto algu m o mantiver retirado Nota Embora voc n o precise saber disso para utilizar o sistema de devolu o retirada caso tenha curiosidade o Dreamweaver controla os arquivos retirados colocando um arquivo de texto com a extens o Ick no servidor remoto e no site local Os arquivos Ick n o s o vis veis na janela do site Cada arquivo lck
245. desenhar colunas em uma p gina ou organizar texto e imagens em uma p gina da Web Ap s a cria o da tabela a apar ncia e a estrutura podem ser facilmente modificadas nas tabelas HTML O conte do pode ser inclu do adicione exclua divida ou mescle as linhas e colunas modifique as propriedades da tabela das linhas ou c lulas para adicionar cor e alinhamento e para copiar e colar c lulas Se as id ias de layout forem mais complexas pode se recorrer inser o de uma tabela em outra a fim de tornar o seu desenho mais flex vel Com o Dreamweaver f cil converter um layout de tabela em um layout de camada As tabelas e camadas permitem controlar a posi o dos elementos na p gina mas as camadas n o contam com suporte nos navegadores 3 0 e menos avan ados Caso o seu procedimento de desenho necessite de reposicionamento r pido do conte do utilize as camadas para organizar uma p gina e em seguida converta as camadas em uma tabela para exibi o em navegadores mais antigos Consulte Como utilizar as camadas para criar tabelas na p gina 250 215 216 Cap tulo 8 Como inserir uma tabela Utilize a paleta de objetos ou o menu Inserir para criar uma nova tabela Para inserir uma tabela 1 3 Siga um dos procedimentos abaixo Na janela do documento coloque o ponto de inser o onde a tabela dever aparecer e clique no bot o Tabela no painel Comuns da paleta de objetos ou escolha Inserir gt
246. dever se assemelhar tela abaixo Scaal Home Page Scaal site scaal home htm Dreamweaver MEE Arquivo Editar Exibir Inserir Modificar Texto Comandos Site Janela Ajuda 682x479 28K 8 seg s EL T D E Dl 4 30 Cap tulo1 Selecionar e manipular uma camada poss vel alterar o posicionamento ou forma das camadas do documento 1 Clique na borda da mesma Aparecer o al as em volta da camada selecionada fm 2 Para redimensionar uma camada clique na al a da mesma e arraste a at que atinja o tamanho desejado 3 Para mover uma camada siga um dos procedimentos abaixo e Utilize as teclas de seta e Mantenha pressionada a tecla Shift e utilize as teclas de seta para mover a camada cinco pixels na dire o da seta e Clique na guia no canto superior esquerdo da camada e arraste a at a posi o desejada Adicionar uma imagem Agora voc vai inserir a imagem do logotipo da Scaal no documento 1 Clique em qualquer ponto da camada mais acima A a o de clicar em uma camada coloca o ponto de inser o dentro da mesma sem selecion la Uma camada ativa contendo um ponto de inser o tem esta apar ncia F 2 Escolha Inserir gt Imagem Tutorial do Dreamweaver 31 32 Cap tulo 1 3 Na caixa de di logo Selecionar a origem da imagem localize a pasta Sites Scaal site Images navegue at logo scaal gif e clique em Selecionar no Windows ou Escolher no Macintos
247. dever ser inserida a segunda tabela Em seguida clique no bot o Tabela no painel Comuns na paleta de objetos e Arraste o bot o Tabela do painel Comuns na paleta de objetos at a c lula onde dever aparecer a segunda tabela 2 Especifique as propriedades da tabela na caixa de di logo Inserir tabela e clique em OK Como dividir e mesclar as c lulas Utilize o inspetor de propriedades ou os comandos do menu Modificar gt Tabela para dividir ou mesclar as c lulas poss vel mesclar qualquer n mero de c lulas adjacentes contanto que a sele o inteira tenha a forma retangular para produzir uma nica c lula que abranja diversas colunas ou linhas Uma c lula pode ser dividida em qualquer n mero de linhas ou colunas n o importando se tiver sido mesclada anteriormente O Dreamweaver reestrutura automaticamente a tabela adiciona os atributos COLSPAN ou ROWSPAN necess rios criando a disposi o especificada Na ilustra o seguinte as c lulas no meio das duas primeiras linhas foram mescladas de modo a abranger duas linhas Como criar tabelas 231 232 Cap tulo 8 Para mesclar duas ou mais c lulas em uma tabela 1 Selecione as c lulas a serem mescladas As c lulas selecionadas devem ser adjacentes e retangulares Ei Honey Festival Featuring the Sonoma Strings California Sonoma 3pm 9pm joo s Pear Canning Demonstration Bend Oregon Lro m Bensfitfor Southwest Chamber Ensemble Scottsdale
248. do 2 Clique em uma op o de alinhamento A esquerda direita ou No centro no inspetor de propriedades ou escolha Texto gt Alinhamento e escolha um comando Para centralizar os elementos 1 Selecione o elemento desejado imagem plug in tabela ou um outro elemento da p gina para centraliz lo 2 Escolha Texto gt Alinhamento gt No centro Nota poss vel alinhar e centralizar blocos inteiros de texto por m n o poss vel alinhar ou centralizar uma parte de um cabe alho ou par grafo Para recuar o texto e remover o recuo 1 Selecione o texto desejado 2 Clique no bot o Recuo ou Remover o recuo no inspetor de propriedades e escolha Texto gt Recuo ou Remover o recuo ou escolha Lista gt Recuo ou Remover o recuo no menu contextual Este procedimento aplica ou remove o r tulo BLOCKQUOTE quando o texto selecionado for um par grafo ou cabe alho e adiciona ou remove um r tulo UL ou OL adicional no caso de uma lista Como criar listas poss vel criar listas numeradas com marcadores e de defini es a partir de um texto existente ou de um novo texto medida que se digita na janela do documento As listas tamb m podem ser aninhadas Para criar uma nova lista 1 Posicione o ponto de inser o na linha onde voc deseja adicionar uma lista de novos itens 2 Clique no bot o Lista com marcadores ou Lista numerada no inspetor de propriedades ou escolha Texto gt Lista e selecione o tipo
249. do a ltima etapa efetuada por exemplo se a ltima etapa tiver sido a digita o de texto o nome do comando ser Repetir a digita o N o poss vel utilizar o comando Repetir imediatamente ap s uma opera o Desfazer ou Refazer Para repetir as etapas que diferirem da mais recente ou para repetir diversas etapas simultaneamente utilize a paleta de hist rico Para repetir uma etapa Na paleta de hist rico selecione a etapa e clique no bot o Executar novamente A etapa ser executada novamente e uma c pia da mesma aparecer na paleta de hist rico Como criar sites e documentos 97 98 Cap tulo 3 Para repetir uma s rie de etapas adjacentes 1 Selecione as etapas na paleta de hist rico seguindo um dos procedimentos abaixo e Arraste de uma etapa para outra e Selecione uma etapa e em seguida pressionando a tecla Shift clique na ltima etapa da s rie de etapas 2 Clique em Executar novamente As etapas ser o executadas novamente na ordem e uma nova etapa denominada Executar novamente as etapas aparecer na paleta de hist rico Para repetir etapas que n o sejam adjacentes 1 Selecione uma etapa e em seguida clique nas outras etapas mantendo a tecla Control pressionada no Windows ou a tecla Command pressionada no Macintosh 2 Clique em Executar novamente As etapas ser o executadas novamente na ordem e uma nova etapa denominada Executar novamente as etapas aparecer na paleta de
250. do a linha de coloca o aparecer na ordem de empilhamento desejada Como alterar a visibilidade de uma camada Ao trabalhar em um documento voc poder mostrar ou ocultar as camadas a fim de examinar a apar ncia da p gina sob diversas condi es Utilize a paleta de camadas para alterar a visibilidade das camadas Utilize o painel de prefer ncias de camadas para definir a visibilidade padr o de novas camadas Consulte Como definir as prefer ncias de camadas na p gina 239 Para alterar a visibilidade de uma camada 1 Escolha Janela gt Camadas para abrir a paleta de camadas 2 Nalinha da camada que estiver sendo alterada clique na coluna do cone representando um olho at que seja definida a visibilidade desejada e Um olho aberto significa que a camada est vis vel e Um olho fechado significa que a camada est invis vel e Se n o houver um cone representando um olho a camada herdar as defini es de visibilidade da camada m e Quando as camadas n o est o aninhadas a camada m e o corpo do documento que est sempre vis vel Para alterar a visibilidade de todas as camadas simultaneamente 1 Escolha Janela gt Camadas para abrir a paleta de camadas 2 Clique no cone representando um olho do cabe alho no alto da coluna Sobre as camadas e tabelas Utilize as camadas para posicionar o conte do em uma p gina f cil trabalhar com as camadas e modificar o desenho das c lulas da tabela
251. do de molduras 2 Siga um dos procedimentos abaixo e Escolha Modificar gt Conjunto de molduras gt Dividir a moldura para a esquerda para a direita para cima ou para baixo e No painel de molduras da paleta de objetos selecione um cone de conjunto de molduras e Escolha Inserir gt Molduras gt Esquerda Direita Superior Inferior Esquerda e superior Superior esquerda Esquerda superior Dividir e Na janela do documento mantendo pressionada a tecla Alt no Windows ou a tecla Option no Macintosh arraste uma borda da moldura para dividi la vertical ou horizontalmente Como selecionar uma moldura ou conjunto de molduras As molduras e os conjuntos de molduras s o documentos HTML individuais Para fazer altera es em uma moldura ou em um conjunto de molduras inicie selecionando a moldura ou o conjunto de molduras a serem modificados Voc pode selecionar uma moldura ou um conjunto de molduras na janela do documento ou utilizar o inspetor de molduras Quando uma moldura ou um conjunto de molduras for selecionado as linhas de sele o aparecer o no inspetor de molduras e na janela do documento Como utilizar o inspetor de molduras O inspetor de molduras fornece uma representa o visual das molduras em um documento Voc pode clicar em uma moldura ou um conjunto de molduras no inspetor de molduras para selecion los no documento e em seguida exibir ou editar as propriedades do item escolhido no inspetor
252. do documento Observe que o Dreamweaver n o exibir essa propriedade na janela do documento AIB apenas nas camadas da Netscape especifica a camada acima A ou abaixo B da camada atual na ordem de empilhamento ndice z Somente as camadas definidas previamente no documento aparecer o na lista de nomes de camadas situada direita do menu A B Como utilizar as camadas 241 242 Cap tulo 9 Como definir as propriedades de camadas m ltiplas Quando duas ou mais camadas forem selecionadas o inspetor de propriedades exibir as propriedades de texto e um subconjunto das propriedades normais de camadas o que permitir modificar v rias camadas simultaneamente Para selecionar camadas m ltiplas pressione a tecla Shift enquanto seleciona as camadas Consulte Como manipular as camadas na p gina 243 E e A especificam a posi o das camadas a partir do canto superior esquerdo da p gina ou da camada m e L e U especificam a largura e altura das camadas Esses valores ser o ignorados se o conte do da camada exceder o tamanho especificado Nas camadas CSS os valores padr o de posicionamento e tamanho s o expressos em pixels px Tamb m poss vel especificar as seguintes unidades pc paicas pt pontos pol polegadas mm mil metros cm cent metros ou percentagem do valor da camada m e As abreviaturas devem se seguir ao valor sem um 8 espa o por exemplo 3mm Vis determina o modo inicial de
253. do o usu rio mover o mouse sobre a imagem cambi vel e Selecione Mostrar a imagem inativa inicialmente para exibir o elemento selecionado em seu estado inativo quando a p gina for exibida Por exemplo quando a home page for carregada o bot o da home page dever estar no estado inativo Quando esta op o for selecionada aparecer um asterisco ap s o elemento na lista Elementos da barra de navega o 6 Em Inserir selecione dentre as seguintes op es e Para inserir os elementos da barra de navega o vertical ou horizontalmente no documento utilize o menu pop up Inserir e Para inserir os elementos da barra de navega o em uma tabela marque a caixa de sele o Utilizar as tabelas 7 Clique no bot o com o sinal de adi o para adicionar outro elemento barra de navega o e em seguida realize as etapas 2 a 6 para definir o estado desse elemento 8 Clique em OK Como modificar uma barra de navega o Quando uma barra de navega o for criada para um documento as suas imagens poder o ser adicionadas ou removidas atrav s da utiliza o do comando Modificar a barra de navega o Esse comando poder ser utilizado para alterar uma imagem ou conjunto de imagens mudar o arquivo que ser aberto quando um bot o for clicado selecionar uma janela diferente na qual abrir um arquivo e reordenar a posi o das imagens Para modificar uma barra de navega o 1 Escolha Modificar gt Barra de
254. do sistema ccciiicciiciicitisicccereerra 9 Como instalar o Dreamweaver ccciciciccccicrcc crer 10 Introdu o ao Dreamweaver os esrorisrerriiariiii kider kreipkis 10 Onde iniciat ssa iea o ae E aa Ee E AEA 14 Conven es tipogr ficas sruesrre reure errr rreren 15 Novidades do Dreamweaver 3 n on nunnan nonn nnr annene 16 Recursos de tecnologias de Web e HTML anunuuuurnrrrrueen 19 CAP TULO 1 Tutorial do Dreamweaver ccciicccic rrna 21 Configurar a estrutura do site do tutorial ccccccciccoo 24 Definir um site local ccccccicscc cce 25 Criar a home page do site da Scaal cccciiciiicciiio 27 Criar um layout de p gina cciciiicciciicc isca 28 Criar imagens cambi veis ccccciicciciscssccccraeo 38 Importar um documento em HTML do Word ccc 42 Formatar o texto utilizando os estilos HTML ccccccc 44 Criar um mapa visual do site oenn unue 47 Criar vinculos ssa pt ais eis a da E EU E a Ugo qd 48 Criar um modelo ees raees nane praa EE EE EE 51 Criar um menu de salto cccccccc ces cc screens 58 Verificar O SITE uam es cuisine Aa ie ea aa aa 60 CAP TULO 2 Princ pios b sicos do Dreamweaver 61 Como definir as prefer ncias ouuu uuni ruune 71 Usando o Dreamweaver com outros aplicativos 72 4 ndice CAP TULO 3 Como criar sites e documentos ccccc T3 Sobre o planejamento de sites ccii
255. do site remoto denominada public html contiver duas pastas Projetol e Projeto2 e se voc desejar trabalhar apenas com os arquivos HTML no Projetol n o haver necessidade de descarregar os arquivos do Projeto 2 por m ser necess rio mapear a pasta raiz local para public html em vez de Projetol Remote site Local site local root folder map this to public html not to Project1 or Projectf HTML public html Project1 Project1 must be present on local site corresponds to Project1 Assets on remote site HTML must be present on local site corresponds to Project1 HTML on remote site HTML Project Assets HTML Para editar um site da Web j existente 1 Defina um site local para o qual deseja copiar o site remoto Ou seja crie uma pasta local que abrigar o site e defina a como sendo a pasta raiz local consulte Como criar um site local na p gina 77 2 Defina um site remoto utilizando as informa es sobre o site j existente Consulte Como configurar um site remoto na p gina 140 Certifique se de escolher a pasta raiz correta para o site remoto 3 Conecte se ao site remoto utilizando o bot o Conectar na janela do site 4 Dependendo da extens o do site remoto a ser editada siga um dos procedimentos abaixo e Se desejar trabalhar com o site inteiro selecione a pasta raiz do site remoto e clique em Obter para descarregar o site inteiro no disco local e Se desejar
256. do v rios computadores diferentes Esta op o til para informar aos outros usu rios sobre a retirada de um arquivo para edi o ou para alertar a si pr prio que uma vers o mais recente de um arquivo foi deixada em um outro computador Consulte Como utilizar o sistema de devolu es e retiradas na p gina 148 Selecione a op o Retirar os arquivos na abertura se desejar retirar os arquivos automaticamente quando clicar duas vezes para abri los na janela do site A utiliza o da op o Arquivo gt Abrir para abrir um arquivo n o o retira mesmo quando esta estiver selecionada Digite um nome de retirada Este o nome que aparecer na janela do site juntamente com quaisquer arquivos que tiverem sido retirados possibilitando que outros membros da equipe localizem no quando necessitarem de um desses arquivos Se voc trabalhar sozinho utilizando v rios computadores utilize um nome de retirada diferente em cada computador por exemplo AliceR MacCasa e AliceR PCEscrit rio o que permitir saber onde est a ltima vers o do arquivo caso se esque a de devolv lo Gerenciamento desites 149 150 Cap tulo 5 Como devolver e retirar os arquivos de um servidor remoto Utilize a janela do site ou o menu Site na janela do documento para devolver e retirar arquivos de um servidor remoto Se um arquivo for retirado mas voc decidir n o edit lo ou preferir descartar as altera es feitas poss
257. documento for salvo em algum lugar do site o Dreamweaver converter a refer ncia em um caminho relativo a documento Defina as propriedades da imagem no inspetor de propriedades Como definir as propriedades da imagem Para exibir as seguintes propriedades no inspetor de propriedades selecione uma imagem na janela do documento O inspetor de propriedades inicialmente exibir as propriedades mais comumente utilizadas Clique na seta de expans o situada no canto inferior direito para examinar todas as propriedades Nome permite denominar a imagem o que possibilita se referir a ela com uma linguagem de cria o de roteiros como JavaScript ou VBScript L e U reservam espa o para uma imagem em uma p gina durante o carregamento desta em um navegador O Dreamweaver preencher automaticamente esses campos com o tamanho original da imagem Os valores padr o e n o identificados s o pixels Tamb m poss vel especificar as seguintes unidades pc paicas pt pontos pol polegadas mm mil metros e cm cent metros al m de suas combina es por exemplo 2pol 5mm o Dreamweaver converter os valores em pixels no c digo de origem de HTML Se forem definidos valores para L e U que n o correspondam s reais largura e altura da imagem esta poder n o ser exibida corretamente no navegador Para restaurar os valores originais clique nos identificadores dos campos Esses valores podem ser alterados a fim de redimensionar
258. dores de destino utiliza arquivos de texto denominados perfis de navegadores a fim de determinar os r tulos aceitos por navegadores espec ficos O Dreamweaver inclui perfis predefinidos para as vers es 2 0 3 0 e 4 0 do Netscape Navigator e para as vers es 2 0 3 0 4 0 e 5 0 do Internet Explorer Para modificar os perfis existentes ou criar novos perfis consulte Sobre os perfis de navegadores na p gina 398 poss vel executar uma verifica o de navegador de destino em um documento diret rio ou no site inteiro Observe que esse procedimento n o verifica os roteiros no site Para executar uma verifica o de navegador de destino 1 Escolha uma dentre as seguintes op es e Para executar a verifica o no documento salve o arquivo verifica o realizada na ltima vers o salva do arquivo e inclui apenas as altera es que tiverem sido salvas e Para executar a verifica o em um diret rio ou site escolha Janela gt Arquivos do site para abrir a janela FTP do site em seguida selecione uma pasta no diret rio local A verifica o do navegador de destino ser efetuada em todos os arquivos HT ML contidos nessa pasta e em suas subpastas As verifica es do navegador de destino podem ser efetuadas apenas nos arquivos locais 2 Escolha Arquivo gt Verificar os navegadores de destino Se ainda n o tiver selecionado um navegador prim rio voc ser solicitado a faz lo 3 Na lista de navegadores
259. dos na p gina tiver sido alterado e prestes a perder o foco e portanto prestes a atualizar a origem dos dados onBlur NS3 NS4 IE3 IE4 o oposto de onFocus O evento onBlur gerado quando o elemento especificado deixa de ser o foco da intera o com o usu rio Por exemplo quando um usu rio clicar fora de um campo de texto depois de ter clicado nele o navegador gerar um evento onBlur para o campo de texto onBounce IE4 gerado quando o conte do de um elemento do letreiro tiver alcan ado os limites deste onChange NS3 NS4 IE3 IE4 gerado quando o usu rio alterar um valor na p gina como na escolha de um item de um menu ou quando alterar o valor de um campo de texto e em seguida clicar em outro local da p gina Como utilizar os comportamentos 301 302 Cap tulo 12 onClick NS3 NS4 IE3 IE4 gerado quando o usu rio clicar no elemento especificado como um v nculo bot o ou mapa de imagens Clicar definido como a a o de pressionar e soltar o bot o do mouse enquanto se indica um elemento onDbiClick NS4 IE4 gerado quando o usu rio clicar duas vezes no elemento especificado Clicar duas vezes definido como a a o de pressionar rapidamente e soltar o bot o do mouse enquanto se indica um elemento onError NS3 NS4 IE4 gerado quando ocorrer um erro do navegador enquanto uma p gina ou imagem estiver sendo carregada onFinish IE4 gerado quando o conte do de um eleme
260. e Clique no marcador da camada na janela do documento que representa o local da camada no c digo HTML Se o marcador da camada n o estiver vis vel escolha Exibir gt Elementos invis veis e Clique na al a de sele o da camada Se a al a n o estiver vis vel clique em qualquer ponto dentro da camada para torn la vis vel e Clique em uma borda da camada e Se nenhuma camada estiver ativa ou selecionada mantenha pressionada a tecla Shift enquanto clica dentro de uma camada e Se houver m ltiplas camadas selecionadas clique dentro de uma delas enquanto mant m pressionadas as teclas Control e Shift no Windows ou as teclas Command e Shift no Macintosh Esse procedimento cancelar a sele o de todas as outras camadas e Clique no nome da camada na paleta de camadas Para selecionar camadas m ltiplas siga um dos procedimentos abaixo e Pressione a tecla Shift e clique dentro ou na borda de duas ou mais camadas e Pressione a tecla Shift enquanto clica nos nomes de duas ou mais camadas na paleta de camadas Quando houver camadas m ltiplas selecionadas as al as da ltima camada escolhida estar o real adas em preto As al as das outras camadas estar o real adas em branco Como redimensionar as camadas Redimensione uma nica ou v rias camadas simultaneamente a fim de tornar iguais as suas larguras e alturas Se a op o Evitar sobreposi es estiver ativada n o ser poss vel redimensionar
261. e END STRING ou entre os r tulos de abertura e finaliza o se estas sequ ncias n o forem definidas mesmo quando estas segu ncias aparecerem dentro de nomes ou valores de atributos Geralmente deve ser definido como TRUE no caso de r tulos delimitados por sequ ncias de caracteres o padr o FALSE PARSE ATTRIBUTES TRUE ou FALSE Indica se os atributos do r tulo ser o analisados Se for definido como TRUE o padr o o Dreamweaver analisar os atributos se for definido como FALSE o Dreamweaver ir ignorar tudo at o pr ximo sinal de maior que aparecer fora das aspas Por exemplo este atributo deve ser definido como FALSE para um r tulo como CFIF em lt cfif a is 1 gt por exemplo ICON URL Especifica o caminho e o nome do arquivo do cone associado ao r tulo E necess rio para os r tulos vazios e para os que tenham conte do que n o for exibido na Janela do documento ICON WIDTH widthInPixels Especifica a largura do cone ICON HEIGHT heightlnPixels Especifica a altura do cone Ignorados nos r tulos que utilizam START STRING e END STRING Como os r tulos personalizados aparecem na janela do documento A apar ncia dos r tulos personalizados na janela do documento depende dos valores dos atributos TAG TYPE e RENDER CONTENTS do r tulo TAGSPEC Se o valor de TAG TYPE for empty o cone especificado no atributo ICON aparecer Se o valor de TAG TYPE for nonempty mas o valor de RENDER CONTENTS
262. e Hidden Oculta mant m o tamanho da camada e corta qualquer conte do que n o caiba na camada N o s o fornecidas barras de rolagem e Pagina o adiciona barras de rolagem camada independentemente do conte do ser maior ou n o que o tamanho da camada Quando as barras de rolagem forem explicitamente definidas evita se qualquer confus o resultante do aparecimento e desaparecimento das mesmas em um ambiente din mico Essa op o funciona apenas nos navegadores que oferecem suporte s barras de rolagem e Autom tico faz com que as barras de rolagem apare am apenas quando o conte do da camada ultrapassar os seus limites Cortar define a rea vis vel de uma camada Especifica valores que representam a dist ncia em pixels dos limites da camadas As defini es A alto e E esquerda s o relativas camada e n o p gina Utilizar esquerda no alto ou P ginaX P ginaY apenas nas camadas da Netscape permitem posicionar uma camada em rela o sua camada m e A op o esquerda no alto posiciona a camada em rela o ao canto superior esquerdo da camada m e A op o P ginaX P ginaY posiciona a camada em um local absoluto em rela o ao canto superior esquerdo da p gina independente da posi o da camada m e Orig apenas nas camadas da Netscape permite exibir um outro documento HTML na camada Clique no cone correspondente pasta para procurar e selecionar o documento ou digite o caminho
263. e a formata o da moldura 5 Digite uma mensagem no campo Novo HTML e em seguida clique em OK Como utilizar os comportamentos 325 Exemplo 326 Cap tulo 12 6 Verifique se o evento padr o corresponde ao desejado Se n o corresponder escolha um outro evento no menu pop up Se eventos desejados n o forem exibidos altere o navegador de destino no menu pop up Eventos de Definir o texto da camada A a o Definir o texto da camada substitui o conte do e a formata o de uma camada j existente em uma p gina pelo conte do especificado O conte do pode incluir qualquer c digo de origem de HTML v lido A a o Definir o texto da camada substitui o conte do e a formata o de uma camada mas mant m os atributos da mesma inclusive a cor Formate o conte do inclusive os r tulos HT ML no campo Novo HT ML na caixa de di logo Definir o texto da camada poss vel incorporar qualquer chamada v lida de fun o JavaScript propriedade vari vel global ou outra express o no texto Para incorporar uma express o JavaScript coloque a entre chaves Para exibir um sinal de chaves preceda o por uma barra invertida A URL desta p gina window location e hoje new Date Para criar uma camada 1 Escolha Inserir gt Camada Para obter mais informa es consulte Como criar as camadas na p gina 236 2 No inspetor de propriedades digite um nome para a camada Para anexar uma a
264. e apenas dos navegadores da Web mais recentes Netscape Navigator 4 0 e mais avan ados e Microsoft Internet Explorer 3 0 e mais avan ados Os estilos CSS HTML e a formata o HTML manual podem ser utilizados na mesma p gina A formata o HTML manual substitui aquela aplicada com um estilo HTML ou CSS por isso embora implique em mais trabalho pode ser um m todo conveniente para modificar a formata o aplicada aos estilos HTML ou css Como formatar o texto com os r tulos HTML poss vel aplicar a formata o de texto HTML a uma carta ou construir um site inteiro com os comandos do menu Texto gt Formato ou as op es do inspetor de propriedades Esse tipo de formata o manual substitui ou anula aquela definida por um estilo HTML ou CSS Para aplicar a formata o HTML de texto utilize o inspetor de propriedades e os comandos no menu Texto como Texto gt Formato e Texto gt Estilo Como aplicar os r tulos de par grafo e cabe alho Utilize o menu pop up Formato no inspetor de propriedades ou o submenu Texto gt Formato para aplicar os r tulos padr o de par grafo e cabe alho Para redefinir a apar ncia desses r tulos utilize as folhas de estilos CSS consulte Como formatar o texto com as folhas de estilos CSS na p gina 188 Para aplicar um r tulo de par grafo ou cabe alho 1 Coloque o ponto de inser o no par grafo ou selecione uma parte do texto no par grafo 2 Para utilizar o sub
265. e comunica o Design Notes permite anexar notas a um arquivo para que seja poss vel controlar as altera es nele feitas e comunicar se sobre as quest es de desenvolvimento com os outros membros da equipe As Design Notes podem ser adicionadas a imagens no Fireworks e serem lidas e editadas no Dreamweaver Consulte Sobre as Design Notes na p gina 172 Importar e limpar o HTML do Word permite importar os arquivos HTML gerados pelo Microsoft Word o recurso de limpeza remove os estilos e o c digo XML irrelevantes e tamb m os r tulos do fabricante corrige os HTMLSs inv lidos e formata o c digo de acordo com as suas prefer ncias Consulte Limpar o HTML do Microsoft Word na p gina 352 A paleta de hist rico controla cada a o realizada pelo usu rio Permite desfazer repetir e copiar etapas na rea de transfer ncia e depois col las para repetir a es em outros documentos Pode se at mesmo salvar as etapas como um comando que aparece automaticamente no menu Comandos Consulte Sobre a paleta de hist rico na p gina 95 Repetir fornece um modo r pido de executar tarefas simples e repetitivas Consulte Como repetir as etapas na p gina 97 Importar os dados da tabela permite criar automaticamente as tabelas a partir de dados exportados para arquivos delimitados de aplicativos como Microsoft Excel ou Microsoft Access Consulte Como importar os dados da tabela na p gina 218 Inserir o HTML
266. e eer 266 Como selecionar uma moldura ou conjunto de molduras 268 Como salvar os arquivos de molduras e de conjuntos de molduras 271 Sobre as propriedades das molduras e conjuntos de molduras 272 Como controlar o conte do de molduras com os v nculos 279 Como criar um conte do NOFRAMES cccccccccr 280 Como utilizar os comportamentos com molduras 281 CAP TULO 11 COMO neen mda cssss g ss Pegada tosa dmas 283 Como iniciar um editor externo de m dia ccccccioo 284 Como utilizar as Design Notes com objetos de m dia 285 Como inserir filmes Shockwave ccicciciiiciiciicis 286 Propriedades do Shockwave iciicciciiiciiiiis 287 Como inserir filmes Flash iiccciccicii css ic 288 Propriedades dos filmes Flash ccicciiiiiciiciicis 288 Como inserir e editar os objetos Aftershock c 290 Como inserir objetos do Generator cciiiciicicciio 291 Como inserir o conte do de plug ins do Netscape Navigator 292 Propriedades dos plug ins do Netscape Navigator 292 Como executar os plug ins na janela do documento 293 Resolu o de problemas relacionados aos plug ins do Navigator 294 Como inserir um controle ActiveX icccciiiciiiiicio 294 Propriedades do ActiveX sae rsocersdiurod erindi reyd okinn 295 Como inserir um applet de Java onun usnunneun rera 296 Propriedad
267. e formata o HTML Como personalizar o Dreamweaver 397 398 Cap tulo 16 Sobre os perfis de navegadores Os perfis de navegadores s o os arquivos aos quais os seus documentos s o comparados quando for executada uma verifica o do navegador de destino consulte Como verificar uma p gina quanto compatibilidade com os navegadores de destino na p gina 167 Cada perfil cont m informa es sobre os r tulos e atributos HTML que contam com suporte de um determinado navegador Ele pode conter tamb m advert ncias mensagens de erro e sugest es para as substitui es de r tulos Os perfis de navegadores s o armazenados na pasta Configuration BrowserProfiles dentro da pasta do aplicativo do Dreamweaver Voc poder editar os perfis existentes ou criar novos com um editor de texto BBEdit HomeSite Bloco de Notas ou SimpleText por exemplo N o necess rio sair do Dreamweaver para poder editar ou criar os perfis de navegadores Sobre a formata o dos perfis de navegadores Os perfis de navegadores seguem um formato espec fico Para evitar erros de an lise durante as verifica es dos navegadores de destino siga estas regras ao editar ou criar os perfis e A primeira linha reservada ao nome do perfil Este deve conter no final um retorno de carro O nome nesta linha aparece na caixa de di logo Verifica o do navegador de destino e no relat rio de verifica o do destino Esse nome deve ser exclusiv
268. e objetos como imagens tabelas camadas etc e O inspetor de propriedades exibe as propriedades do objeto ou texto selecionado e permite modific las e Os menus contextuais facilitam o acesso r pido a comandos teis relacionados sele o ou rea atual 61 62 Paleta de objetos Cap tulo 2 e As paletas flutuantes de encaixe permitem combinar as janelas inspetores e paletas flutuantes em uma ou mais janelas com guias No Sdo g Iniciador FTPdosite Biblioteca Estilos HTML Estilos Comportamentos Hist rico Orig de HTML caal home html Dreamweaver Nome RAR Menu contextual Origem baixa Alinhar Editar o r tulo lt img gt Remover o r tulo lt img gt Criar v nculo Hemovero vifeul EEE pese por vie Atualizar o tamanho Editar com PHOTOED Editar com Janela do documento Recortar Copiar Dda Design Notes Propriedades e 4 D i sagn EEE a 0 O DO E Mini iniciador Imagem 1K Lie Orig agesispacer clesrgik EY Alinhar A esquerda E Inspetor de propriedades V noulo Como utilizar o menu Janela O menu janela proporciona acesso f cil a todas as janelas inspetores e paletas do Dreamweaver Uma marca de sele o pr xima a um item no menu Janela indica que o item com nome est aberto poss vel no entanto que ele esteja obscurecido por outras janelas Para exibir um item que n o apresenta uma mar
269. e salto Quando for criado um menu de salto atrav s do menu Inserir gt Objeto de formul rio gt Menu de salto o Dreamweaver criar um objeto de menu e anexar o comportamento apropriado a ele Em geral n o necess rio anexar manualmente a a o Menu de salto a um objeto Em vez disso clique duas vezes em uma a o Menu de salto j existente no inspetor de comportamentos para editar um menu de salto alterar o local no qual o arquivo vinculado ser aberto adicionar ou alterar um aviso de sele o no menu Para obter mais informa es sobre a cria o de um menu de salto consulte Como inserir um menu de salto na p gina 122 Para editar um menu de salto utilizando o inspetor de comportamentos 1 Crie um objeto menu de salto se j n o houver algum no documento 2 Selecione o objeto menu de salto e abra o inspetor de comportamentos 3 Na coluna A es clique duas vezes em Menu de salto 4 Na caixa de di logo Menu de salto edite os itens do menu e em seguida clique em OK A o Ir do menu de salto A a o Ir do menu de salto permite associar um bot o Ir a um menu de salto Para poder utilizar esta a o necess ria a exist ncia de um menu de salto no documento A a o de clicar no bot o Ir abrir o v nculo que estiver selecionado no menu de salto Normalmente os menus de salto n o exigem a ocorr ncia de um bot o Ir em geral a escolha de um item em um menu de salto acarreta a carga de uma
270. e um outro site da lista Para adicionar um site ou editar as informa es relativas a um site existente escolha Definir os sites na parte inferior da lista consulte Como associar um servidor remoto a um site local na p gina 140 Conectar desconectar dispon vel apenas com a defini o FTP conecta se ou desconecta se do site remoto Como padr o o Dreamweaver se desconectar do site remoto depois de 30 minutos de ociosidade Escolha Editar gt Prefer ncias e selecione FTP do site para alterar o limite de tempo Atualizar atualiza as listas de diret rios locais e remotos Utilize esse bot o para atualizar manualmente as listas de diret rios caso seja cancelada a sele o das op es Atualizar automaticamente a lista de arquivos locais ou Atualizar automaticamente a lista de arquivos remotos somente a defini o Local Rede na caixa de di logo Defini o do site consulte Como associar um servidor remoto a um site local na p gina 140 Utilize este bot o para que a lista remota de diret rios apare a quando tiver sido montada a unidade que cont m o site remoto e depois da abertura da janela do site Gerenciamento desites 145 146 Cap tulo 5 Obter copia os arquivos selecionados do site remoto para o site local Se a op o Ativar a devolu o e retirada de arquivos estiver ativada as c pias locais ser o somente de leitura os arquivos estar o dispon veis no site remoto para que outros membros da e
271. e v nculo da imagem 201 propriedade do roteiro de origem 358 propriedades applets de Java 296 camada 239 camadas m ltiplas 242 colunas linhas e c lulas 224 como alterar com comportamentos 309 como exibir 66 conjunto de molduras 275 controles ActiveX 295 filmes Flash 288 filmes Shockwave 287 imagem 201 moldura 273 pontos ativos 213 tabela 222 propriedades das camadas 239 propriedades Espa o V e Espa o H da imagem 201 propriedades L e U da imagem 201 Q qps 253 quadros por segundo qps 253 quadros prim rios como criar 255 vis o geral 253 Quick Tag Editor como abrir 340 como utilizar 341 modo Colocar o r tulo ao redor 344 modo Editar o r tulo 344 modo Inserir o HTML 344 prefer ncias 345 vis o geral 340 ramifica es como expandir e reduzir no mapa do site 133 recursos novos no Dreamweaver 16 recursos refer ncia na Web 19 r guas 103 r guas horizontais 88 requisitos do sistema Macintosh 10 Windows 9 resolu o de problemas como transferir arquivos 153 plug ins do Navigator 294 roteiros como inserir e editar 357 como mostrar no documento 90 propriedades 358 roteiros CGI 385 roteiros Common Gateway Interface CGI 385 r tulo BLOCKQUOTE 182 r tulo BODY 106 r tulo MAP 211 r tulo OL 182 r tulo UL 182 r tulos ASP 356 BLOCKQUOTE 182 BODY 106 buscas 159 CFML 356 como aplicar 178 como corrigir os incorretos 354 como editar 340 como envolver com 340 como remover 345 como seleciona
272. eaver voc poder remov lo da lista de sites Os arquivos do site n o ser o removidos Nota Quando um site for removido da lista todas as informa es de configura o sobre o site ser o perdidas em car ter permanente Para remover um site da lista de sites 1 Escolha Site gt Definir os sites 2 Selecione o nome do site 3 Clique em Remover Aparecer uma caixa de di logo solicitando a confirma o da remo o 4 Clique em Sim para remover o site da lista Como criar e editar os documentos HTML Agora que j conta com um site definido voc poder passar a criar os documentos p ginas que o constituir o Se ainda n o tiver definido um site consulte Como criar um site local na p gina 77 poss vel criar novos documentos HTML em branco no Dreamweaver ou abrir um documento HTML j existente independentemente de como tenha sido criado Tamb m poss vel criar um novo documento com base em um modelo Nota Quando salvar os documentos sempre que poss vel evite utilizar espa os e caracteres especiais nos nomes de arquivos e pastas Para criar um documento HTML em branco em uma nova janela do documento Escolha Arquivo gt Novo a partir de uma janela do documento j existente no Windows ou a partir da barra de menus principal no Macintosh Se o inspetor de origem de HTML for aberto escolha Janela gt Origem de HTML voc poder notar que na realidade n o se trata de um documento
273. ecer escolha o aplicativo a ser utilizado para editar esse tipo de imagem 6 Clique em Tornar prim rio se desejar que este editor seja o prim rio para o tipo de imagem O Dreamweaver utiliza automaticamente este editor prim rio quando esse tipo de imagem for escolhido para edi o Os outros editores da lista podem ser escolhidos no menu contextual para a imagem na janela do documento Para alterar uma prefer ncia existente 1 Nas prefer ncias de editores externos clique na extens o de arquivo cujo editor ser alterado 2 Utilize os bot es com sinal de adi o ou de subtra o acima da lista de editores para adicionar ou remover um editor Para obter mais informa es sobre as outras op es nas prefer ncias de editores externos consulte Como iniciar um editor externo de m dia na p gina 284 Como otimizar uma imagem no Fireworks Com o Fireworks 2 ou Fireworks 3 pode ser utilizado o comando Otimizar a imagem no Fireworks para otimizar rapidamente as imagens para a Web Para poder utilizar o comando Otimizar a imagem no Fireworks 1 Selecione uma imagem no documento do Dreamweaver e escolha Comandos gt Otimizar a imagem no Fireworks Se a imagem selecionada for um arquivo GIF ou JPEG aparecer uma caixa de di logo perguntando se o documento do Fireworks existente dever ser utilizado como origem da imagem selecionada Clique em Sim para abrir o arquivo PNG original se a imagem tiv
274. ecione a etapa ou conjunto de etapas na paleta de hist rico 2 Clique no bot o Salvar como comando ou escolha Salvar como comando no menu contextual da paleta de hist rico 3 Digite o nome do comando e clique em OK O comando aparecer no menu Comandos Nota O comando ser salvo como um arquivo de JavaScript na pasta Dreamweaver Configuration Commands Para poder utilizar um comando salvo 1 Selecione um objeto ao qual deseja aplicar o comando ou posicione o ponto de inser o no local desejado 2 Escolha o comando no menu Comandos Para editar os nomes de comandos no menu Comandos 1 Escolha Comandos gt Editar a lista de comandos 2 Selecione o comando a ser renomeado e digite o seu novo nome 3 Clique em Fechar Para excluir um nome do menu Comandos 1 Escolha Comandos gt Editar a lista de comandos 2 Selecione um comando 3 Clique em Excluir e em seguida em Fechar Como criar sites e documentos 101 102 Cap tulo 3 Como gravar os comandos O Dreamweaver permite a grava o de um comando tempor rio destinado utiliza o por um per odo curto de tempo S o as seguintes as principais diferen as entre esta abordagem e a execu o das etapas a partir da paleta de hist rico consulte Como repetir as etapas na p gina 97 e As etapas s o gravadas medida que forem efetuadas dispensando a necessidade de selecion las na paleta de hist rico e Durante a grava o o Dreamweaver i
275. edi rios dos quadros situados entre os quadros prim rios Os quadros prim rios s o indicados por pequenos c rculos Canal de comportamentos o canal que cont m os comportamentos que dever o ser executados em um determinado quadro da linha de tempo Timeiner X B Canal de comportamentos 5 1 N meros de quadros indicam o n mero de quadros ocupados por cada barra O n mero entre os bot es Voltar e Executar representa o quadro atual Controle a dura o da anima o ao definir o n mero total de quadros e o n mero de quadros por segundo qps A defini o padr o de 15 quadros por segundo constitui uma boa taxa m dia a ser utilizada na maior parte dos navegadores que executam os sistemas mais comuns do Windows e Macintosh poss vel que as taxas mais r pidas n o melhorem o desempenho Os navegadores sempre executam cada quadro da anima o mesmo se n o puderem atingir a taxa de quadros especificada no sistema do usu rio 1 5 10 1 Olayert 2 Op es de execu o Abaixo est uma lista das op es de execu o para exibir a anima o Timen iee 5Jnis 5 E Esson o amom ios E Loos Rebobinar move o cabe ote de execu o at o primeiro quadro da linha de tempo Voltar move o cabe ote de execu o um quadro esquerda Clique em Voltar e mantenha pressionado o bot o do mouse para executar a linha de tempo de tr s para diante Executar move o cabe ote de execu o um
276. editor de HTML com base em texto com pouco ou nenhum impacto sobre o conte do e a estrutura do c digo de origem de HTML original do documento O Dreamweaver manter e interpretar alguns HTML tecnicamente inv lidos por exemplo um r tulo FONT em volta de v rios r tulos P se esse c digo receber suporte dos navegadores Contudo o c digo de origem de HTML que tiver sido gerado pelo Dreamweaver durante a edi o gr fica sempre tecnicamente v lido Abaixo est o os recursos principais do Roundtrip HTML Como padr o o Dreamweaver regravar os t tulos sobrepostos fechar os r tulos que est o indevidamente abertos e remover os r tulos de finaliza o adicionais quando voc retornar ao Dreamweaver de um editor de HTML externo ou abrir um documento HTML j existente Para que o Dreamweaver n o regrave qualquer origem de HT ML escolha Editar gt Prefer ncias e em seguida selecione Regrava o de HTML para desativar esse comando Consulte Como definir as prefer ncias de regrava o de HTML na p gina 346 O Dreamweaver exibe os marcadores na janela do documento para um HTML inv lido ao qual n o ofere a suporte Os r tulos inv lidos s o real ados em amarelo Quando um r tulo inv lido for selecionado o Dreamweaver informar como corrigir o erro no inspetor de propriedades Caso seja desativada a regrava o de HTML qualquer HTML que o Dreamweaver regravasse seria exibido como inv lido O Dream
277. eis e bloqueadas 362 vis o geral 359 XML 370 molduras aninhadas 268 atalhos 413 bordas 278 como alterar a cor do fundo 279 como alterar o conte do 279 como criar 266 como designar 279 como excluir 267 como redimensionar 277 como salvar arquivos em 271 como selecionar 268 compatibilidade com os navegadores 280 comportamentos como utilizar com 281 propriedades 273 vis o geral 265 Mostrar os t tulos das p ginas no mapa do site 130 multim dia Consulte m dia ndice remissivo 435 navegador prim rio 171 navegador secund rio 171 navegadores arquivos compat veis com a vers o 3 0 252 como designar 167 como detectar 165 como visualizar nos 170 compatibilidade como planejar para 164 compatibilidade como testar 167 cores aceitas 92 e estilos CSS 196 perfis como criar 400 perfis como editar 398 prim rio como definir 171 vers es como verificar 310 novos recursos no Dreamweaver 16 o objeto de ncora paleta de objetos 119 objetos atalhos 418 como adicionar a formul rios 383 como adicionar Design Notes 174 como criar 389 como inserir 86 como inserir com a paleta de objetos 68 objetos Aftershock 290 objetos do Generator vis o geral 291 op o Abrir cone correspondente pasta 378 op o Adicionar p gina paleta de bibliotecas 378 op o Advertir ao ajustar ou remover os r tulos 347 op o Ajustar os r tulos abertos e aninhados incorretamente prefer ncias 346 op o
278. ejam real adas quando o mouse passar sobre elas ou seja quando o evento onMouseOver ocorrer Por exemplo quando a imagem Our Story aparecer na p gina normalmente ter esta apar ncia our story Depois que um comportamento que inclua a a o de permuta de imagens for definido durante o evento onMouseOver a imagem Our Story ter esta apar ncia a mesma imagem com uma cor de fundo diferente quando o mouse for deslizado sobre ela Continue a trabalhar no arquivo da home page para anexar comportamentos s imagens de navega o da p gina Em seguida voc visualizar a p gina em um navegador a fim de testar os comportamentos 1 Na janela do documento clique na imagem Our Story para selecion la 2 Escolha Janela gt Comportamentos ou pressione F8 para abrir o inspetor de comportamentos que cont m uma lista de todos os comportamentos definidos para o elemento selecionado Comportamentos E Comportamentos om HE Eventos de 3 0 and Later Browsers St 3 No menu pop up Eventos de a op o Navegadores 3 0 e mais avan ados j dever estar sendo exibida Se n o estiver selecione a Tutorial do Dreamweaver 39 40 Cap tulo 1 4 Adicione uma nova a o lista clicando no bot o de adi o e escolha a op o Permutar a imagem no menu pop up Aparecer a caixa de di logo Permutar a imagem A lista Imagens apresenta todas as imagens da p gina com a imagem Our St
279. elas que cont m o atributo COLSPAN ou ROWSPAN isto aquelas que comportam c lulas mescladas Para obter mais detalhes sobre as c lulas mescladas consulte Como dividir e mesclar as c lulas na p gina 231 Para ordenar uma tabela 1 2 Selecione a tabela e escolha Comandos gt Ordenar a tabela Na caixa de di logo que aparecer escolha dentre as seguintes op es Selecione a coluna a ser ordenada na op o Ordenar por Escolha se deseja ordenar a coluna alfab tica ou numericamente na op o Ordem Esta op o importante quando o conte do de uma coluna for num rico Uma ordena o alfab tica aplicada a uma lista de n meros de um e dois d gitos resultar em uma ordena o alfanum rica como 1 10 2 20 3 30 por exemplo em vez de uma ordena o num rica direta como 1 2 3 10 20 30 Selecione Ascendente A a Z ou crescente ou Descendente para a ordem de classifica o Para executar uma ordena o secund ria em uma coluna diferente especifique as op es de ordena o no menu pop up Em seguida por Selecione a op o ordena o inclui a primeira linha para inserir a primeira linha na ordena o Se a primeira linha for um cabe alho que n o puder ser movido n o marque esta op o Clique em Aplicar ou OK para ordenar a tabela Como criar tabelas 233 234 Cap tulo 8 Como exportar os dados da tabela Os dados de uma tabela criada no Dreamweaver podem ser ex
280. elos gt Abrir o modelo anexado Modifique o conte do do modelo conforme a necessidade Para modificar as propriedades da p gina do modelo escolha Modificar gt Propriedades da p gina Os documentos criados a partir de um modelo herdar o as propriedades da p gina do mesmo com exce o do t tulo da p gina Para atualizar o documento atual em rela o vers o mais recente de um modelo Escolha Modificar gt Modelos gt Atualizar a p gina atual Modelos e bibliotecas 369 370 Cap tulo 14 Para atualizar o site inteiro ou todos os documentos que utilizam um modelo espec fico 1 Escolha Modificar gt Modelos gt Atualizar as p ginas Aparecer a caixa de di logo Atualizar as p ginas No menu pop up Procurar em siga um dos procedimentos abaixo Escolha Site inteiro e em seguida selecione o nome do site Esse procedimento atualiza todas as p ginas no site escolhido em rela o ao modelo Escolha Arquivos que utilizam e em seguida escolha o nome do modelo Este procedimento atualiza todas as p ginas no site atual s quais foi aplicado o modelo selecionado Verifique se a op o Modelos est selecionada na op o Atualizar Clique em Iniciar Como importar e exportar o conte do XML Se voc utilizar XML em suas p ginas da Web utilize os recursos de importa o e exporta o de XML a fim de lidar com o conte do XML poss vel exportar as regi es edit veis de um documento que utiliza
281. em funcionando no inspetor de HTML Como localizar e substituir o texto A o No Windows No Macintosh Localizar Control F Command F Localizar o pr ximo Localizar F3 Command G novamente Substituir Control H Command H Como trabalhar com tabelas A o No Windows No Macintosh Selecione a tabela com o cursor dentro da mesma Mover at a pr xima c lula Mover at a c lula anterior Inserir uma linha antes da linha atual Adicionar uma linha ao final da tabela Excluir a linha atual Inserir uma coluna Excluir uma coluna Mesclar as c lulas selecionadas da tabela Dividir as c lulas da tabela Atualizar o layout da tabela for ar um redesenho se estiver no modo edi o mais r pida de tabelas Control A Tecla de tabula o Shift tecla de tabula o Control M Tecla de tabula o na ltima c lula Control Shift M Control Shift A Control Shift 5 Control Akt M Control Akt S Control barra de espa o Command A Tecla de tabula o Shift tecla de tabula o Command M Tecla de tabula o na ltima c lula Command Shift M Shift A Command Command Shift 5 Command Option M Command Option S Command barra de espa o Como trabalhar com as molduras A o No Windows No Macintosh Selecionar uma moldura Selecionar a pr xima moldura ou conjunto de molduras Selecionar a moldura ou conjunto de moldura
282. em branco ele cont m os r tulos HTML HEAD CABE ALHO e BODY CORPO para adiantar o trabalho Durante a digita o na janela do documento ou na inser o de objetos como tabelas e imagens o inspetor de origem de HTML pode ser mantido aberto para que seja observada a cria o do c digo de origem de HTML Para obter mais informa es sobre o inspetor de origem de HTML consulte Como utilizar o inspetor de origem de HTML na p gina 339 Nota N o utilize caracteres especiais como ou ou pontua o como dois pontos barras inclinadas ou pontos nos nomes dos arquivos que ser o colocados em um servidor remoto Muitos servidores converter o estes caracteres durante a carga o que provocar a ruptura dos v nculos entre os arquivos Para abrir um arquivo HTML j existente siga um dos procedimentos abaixo e Escolha Arquivo gt Abrir e Seo arquivo tiver sido criado com o Microsoft Word escolha Arquivo gt Importar gt Importar HTML do Word O Dreamweaver abrir o arquivo e remover c digos HTML estranhos ou desnecess rios que tiverem sido gerados pelo Word O Microsoft Word 97 e as vers es mais avan adas contam com o recurso Salvar como HTML que adiciona c digo HTML medida que converte o documento em HTML Para obter mais informa es consulte Limpar o HTML do Microsoft Word na p gina 352 Nota N o poss vel importar diretamente um arquivo do Microsoft Word com a extens o doc
283. em de status 1 Selecione um objeto e abra o inspetor de comportamentos 2 Clique no bot o com o sinal de adi o e escolha Definir o texto gt Definir a mensagem de status no menu pop up A es 3 Naa caixa de di logo Definir a mensagem de status digite a mensagem no campo Mensagem A mensagem dever ser concisa Se a mensagem n o couber na barra de status o navegador a truncar 4 Clique em OK 5 Verifique se o evento padr o corresponde ao desejado Se n o corresponder escolha um outro evento no menu pop up Se os eventos desejados n o estiverem listados altere o navegador de destino no menu pop up Eventos de Como utilizar os comportamentos 327 Exemplo 328 Cap tulo 12 Definir o texto do campo de texto A a o Definir o texto do campo de texto substitui o conte do de um campo de texto de um formul rio pelo conte do especificado poss vel incorporar qualquer chamada v lida de fun o JavaScript propriedade vari vel global ou outra express o no texto Para incorporar uma express o JavaScript coloque a entre chaves Para exibir um sinal de chaves preceda o por uma barra invertida A URL desta p gina window location e hoje new Date Para criar um campo de texto com nome 1 Escolha Inserir gt Objeto de formul rio gt Campo de texto Para obter mais informa es consulte Como criar formul rios na p gina 381 No inspetor de propriedades dig
284. em o seguinte lt p gt Um par grafo de texto recuado na margem esquerda que tem uma separa o antes do r tulo P de abertura e depois do r tulo P de finaliza o mas n o depois do r tulo P de abertura nem antes do r tulo P de finaliza o lt p gt lt p gt Pr ximo par grafo lt p gt Se as defini es de lt P BREAK 1 1 1 2 gt forem alteradas voc obter lt p gt Um par grafo de texto que n o recuado na margem esquerda e tem uma separa o antes e depois do r tulo P de abertura uma separa o antes do r tulo P de finaliza o e duas separa es depois do r tulo P de finaliza o lt p gt lt p gt Pr ximo par grafo lt p gt Algumas defini es de r tulos e atributos incluem os termos NAMECASE ou SAMECASE NAMECASE especifica que o r tulo ou atributo deve ser colocado em mai sculas de um determinado modo Por exemplo onClick especificado como lt onClick namecase onClick gt indicando que sempre deve ser colocado em mai sculas de uma maneira espec fica parte em letras mai sculas e parte em min sculas O Dreamweaver utiliza SAMECASE para garantir a utiliza o da caixa correta alta ou baixa ao gerar determinados atributos n o remova SAMECASE das especifica es de formata o de atributos onde quer que ele apare a Qualquer atributo n o especificado no arquivo SourceFormat txt utilizar as defini es de formata o padr o indicadas no painel de prefer ncias d
285. em uma nova janela 115 em documentos 114 como detectar os navegadores e plug ins 165 como devolver e retirar arquivos como desfazer a retirada de um arquivo 151 vis o geral 148 como editar o HTML 338 como exibir camadas 249 conte do HEAD 106 elementos invis veis 90 HTML edit vel e bloqueado nos modelos 365 imagens de rastreamento 104 regi es edit veis e bloqueadas nos modelos 364 server side includes 379 sites 80 como formatar o c digo de origem de HTML como personalizar 396 prefer ncias 346 como gravar comandos 102 como iniciar 14 ndice remissivo 429 como inserir applets de Java 296 caracteres especiais 88 controles ActiveX 294 datas 87 elementos de m dia 283 filmes Flash 288 filmes Shockwave 286 HTML do Fireworks 210 imagens 200 imagens cambi veis 208 objetos Aftershock 290 objetos do Generator 291 server side includes 379 como instalar o Dreamweaver 10 como integrar o Dreamweaver com outros aplicativos 72 como localizar atalhos 412 como localizar e substituir Consulte como buscar como obter arquivos de um servidor remoto 151 como personalizar caixas de di logo 395 Dreamweaver 387 Iniciador e Mini iniciador 67 menus 391 paleta de objetos 388 r tulos de outros fabricantes 402 como planejar um site da Web 74 como processar os formul rios 384 como recuar o texto 182 como redimensionar camadas 245 c lulas da tabela 228 elementos da p gina 203 molduras 277 como remover quadros de uma linha de tempo
286. emas 294 pontos ativos como aplicar comportamentos a 214 como selecionar v rios em um mapa de imagens 212 em mapas de imagens 211 propriedades 213 prefer ncias barra de status 66 bibliotecas 373 Camada 239 como atualizar os v nculos 134 Convers o 379 cores HTML 349 dicion rio para verifica o ortogr fica 198 Editores externos 284 Elementos invis veis 90 Fontes 71 Formato da folha de estilos 195 formato HTML 347 FTP do site 146 gerais 71 modelo 363 paleta de objetos 69 paletas flutuantes 63 regrava o de HTML 346 vis o geral 71 Visualizar no navegador 171 Visualizar utilizando o servidor local v nculos relativos raiz 113 prefer ncias de camadas como aninhar 239 compatibilidade da camada com o Netscape 4 239 r tulos de camadas 239 prefer ncias de fontes codifica o 71 prefer ncias de FTP do site 146 prefer ncias de visualiza o no navegador 171 prefer ncias gerais 71 princ pios b sicos do Dreamweaver 14 procedimentos de eventos Consulte a es propor es como manter 204 propriedade de alinhamento da imagem 201 propriedade de atualiza o da imagem 202 propriedade de borda da imagem 202 propriedade de campo de nome do mapa 202 propriedade de imagem alternativa 201 propriedade de imagem de destino 202 propriedade de linguagem do roteiro 358 propriedade de nome inspetor de propriedades da imagem 201 propriedade de origem baixa da imagem 202 propriedade de origem da imagem 201 propriedade d
287. ent metros ou percentagem do valor do objeto pai As abreviaturas devem se seguir ao valor sem um espa o por exemplo 3mm Arquivo especifica o caminho at o arquivo do filme Flash Digite um caminho ou clique no cone correspondente pasta para procurar um arquivo R tulo determina os r tulos utilizados para identificar o filme poss vel escolher os r tulos OBJECT e EMBED ou apenas um destes r tulos Recomendamos o valor padr o OBJECT e EMBED Alinhar determina como o filme ser alinhado na p gina Consulte Como alinhar os elementos na p gina 203 para obter uma descri o de cada op o Cor do fundo especifica uma cor de fundo para a rea do filme Esta cor tamb m aparecer enquanto o filme n o estiver sendo executado durante a carga e ap s a sua execu o Ident define o par metro opcional Ident do ActiveX Este par metro utilizado mais frequentemente para passar informa es entre os controles ActiveX Bordas especifica a largura da borda ao redor do filme Espa o V e Espa o H especificam o n mero de pixels de espa o em branco acima abaixo e em ambos os lados do filme Imagem Alt apenas com o r tulo OBJECT especifica uma imagem a ser exibida se o navegador do usu rio n o oferecer suporte aos controles ActiveX Par metros abre uma caixa de di logo na qual podem ser digitados par metros adicionais a serem passados ao filme Consulte Sobre os par metros na p gi
288. ent carrega o arquivo vinculado em um conjunto pai de molduras ou na janela da moldura que cont m o v nculo Se a moldura onde est o v nculo n o estiver aninhada o arquivo vinculado ser carregado na janela inteira do navegador e self carrega o arquivo vinculado na mesma moldura ou janela que o v nculo Esse destino est impl cito portanto geralmente n o necess rio especific lo e top carrega o arquivo vinculado na janela inteira do navegador removendo todas as molduras Alt especifica um texto alternativo que aparece no lugar da imagem para os navegadores somente de texto ou para os navegadores que tiverem sido definidos para descarga manual de imagens Como inserir imagens 213 214 Cap tulo 7 Como aplicar comportamentos a imagens poss vel aplicar qualquer comportamento dispon vel a uma imagem ou ponto ativo de imagem Quando um comportamento for aplicado a um ponto ativo o Dreamweaver inserir o c digo de origem de HTML ao r tulo AREA H tr s comportamentos que podem ser aplicados especificamente a imagens Pr carregar as imagens Permutar a imagem e Restaurar a imagem permutada Pr carregar as imagens carrega as imagens que n o aparecem na p gina imediatamente como aquelas que ser o permutadas com as linhas de tempo comportamentos camadas ou JavaScript no cache do navegador Este processo evita as demoras causadas pela descarga quando as imagens tiverem que ser exibidas Consulte Pr ca
289. ento dispon vel para o objeto selecionado todas as a es estar o esmaecidas Aparecer uma caixa de di logo com os par metros e instru es relativos a o 4 Digite os par metros relativos a o e clique em OK Todas as a es enviadas com o Dreamweaver funcionam com os navegadores das vers es 4 0 e posteriores Algumas a es n o funcionam nos navegadores mais antigos Consulte Como utilizar as a es de comportamentos enviadas com o Dreamweaver na p gina 307 5 O evento padr o que desencadeia a a o aparecer na coluna Eventos Se este n o for o evento de desencadeamento desejado escolha outro evento no menu pop up Eventos Os eventos que aparecer o no menu pop up Eventos depender o do objeto selecionado e dos navegadores especificados neste menu poss vel que alguns eventos estejam esmaecidos se os objetos relevantes ainda n o existirem na p gina ou se o objeto selecionado n o puder receber eventos Se os eventos esperados n o aparecerem certifique se de que o objeto correto esteja selecionado ou altere os navegadores de destino no menu pop up Eventos de Se voc estiver anexando um comportamento a uma imagem alguns eventos como onMouseOver aparecer o entre par nteses Estes eventos estar o dispon veis apenas para os v nculos Se voc escolher um deles o Dreamweaver colocar um r tulo A em volta da imagem a fim de definir um v nculo fict cio O v nculo fict cio ser represen
290. entral public html No caso de outros sites poss vel que o diret rio esteja localizado v rios n veis abaixo como www public docs ou public html htdoc ou que ele corresponda ao diret rio de login nesse caso este campo dever ser deixado em branco Gerenciamento de sites 141 142 Cap tulo 5 7 Digite o nome de login e a senha utilizados para estabelecer a conex o ao servidor de FTP Como padr o o Dreamweaver salvar a sua senha Cancele a sele o de Salvar para ser notificado a digitar uma senha sempre que estabelecer conex o ao servidor remoto 8 Selecione as op es de firewall adequadas ao seu site e Selecione a op o Utilizar a firewall se estiver se conectando ao servidor remoto atr s de uma firewall Consulte Como definir as prefer ncias de FTP do site na p gina 146 e Algumas firewalls necessitam da utiliza o de FTP passivo que permite ao software local configurar a conex o de FTP em vez de pedir ao servidor remoto que o fa a Selecione a op o Utilizar o FTP passivo se isso for necess rio configura o da firewall Caso n o tenha certeza se ir utilizar essa op o pergunte ao administrador da firewall local 9 Clique em OK Como determinar o diret rio raiz do site remoto O diret rio de host especificado na caixa de di logo Definir os sites deve ser o mesmo que a pasta raiz para o site remoto Se a estrutura do site remoto n o coincidir com a do site local os
291. er define o espa o entre as colunas e linhas das tabelas utilizando GIFs transparentes Depois de ter convertido as camadas em uma tabela voc ver o arquivo tranparent gif na raiz da pasta do site N o mova este arquivo para a pasta Images se o fizer os cones de imagens aparecer o recortados na p gina exibida no navegador 5 Feche a paleta de camadas 6 Salve o arquivo Criar imagens cambi veis Uma imagem cambi vel aquela cuja exibi o alterada quando o ponteiro for movido sobre ela Crie uma imagem cambi vel anexando um comportamento a uma imagem Um comportamento uma combina o entre um evento e uma a o Os eventos s o situa es que desencadeiam a es Por exemplo um evento chamado onClick pode ocorrer quando o usu rio clicar em um bot o ou um evento chamado onMouseOver ser produzido quando o ponteiro do mouse passar sobre um objeto As a es s o parte do c digo JavaScript previamento gravado que executam tarefas espec ficas como a abertura de uma janela do navegador a reprodu o de um som ou a interrup o de um filme Shockwave Quando um comportamento for anexado a um elemento da p gina ser especificada uma a o e o evento que a desencadeia O Dreamweaver oferece diversas a es predefinidas que podem ser anexadas aos elementos das p ginas Nesta parte do tutorial voc aplicar a es de permuta de imagens s imagens Our Story Products e This Week de maneira que estas s
292. er reconhece os estilos definidos nos documentos existentes contanto que eles estejam em conformidade com as instru es CSS As folhas de estilos CSS funcionam em navegadores 4 0 e mais avan ados O Internet Explorer 3 0 reconhece alguns atributos das folhas de estilos CSS por m os navegadores das vers es anteriores os ignoram Os tr s tipos de folhas de estilos CSS abaixo est o dispon veis no Dreamweaver e Os estilos CSS personalizados s o semelhantes queles utilizados em um processador de texto exceto na aus ncia de distin o entre os estilos de caractere e de par grafo Os estilos CSS personalizados podem ser aplicados a qualquer faixa ou bloco de texto Se o estilo CSS for aplicado a um bloco de texto como um par grafo inteiro ou a uma lista n o ordenada ser adicionado um atributo CLASS ao r tulo do bloco por exemplo P CLASS meuEstilo ou UL CLASS meuEstilo Se o estilo CSS for aplicado a uma faixa de texto os r tulos SPAN que contiverem o atributo CLASS ser o inseridos em volta do texto selecionado Consulte Como aplicar um estilo CSS classe personalizado na p gina 193 e Os estilos de r tulos HTML redefinem a formata o de um r tulo espec fico como H1 Quando um estilo CSS for criado ou alterado para o r tulo H1 todo o texto formatado com esse r tulo ser imediatamente atualizado e Os estilos do seletor CSS redefinem a formata o de uma determinada combina o de r tulos por e
293. er sido criada no Fireworks Clique em N o se a imagem n o tiver sido criada no Fireworks e passe etapa 4 Na caixa de di logo de sele o de arquivo que aparecer navegue at a pasta que cont m o arquivo PNG do Fireworks original selecione o arquivo e clique em OK Na caixa de di logo que aparecer ajuste a defini o esquerda para alterar a qualidade e suaviza o de uma imagem JPEG ou da paleta e o n mero de cores em um GIF ou alternar de um formato de arquivo para outro Para obter mais informa es sobre as outras op es nessa caixa de di logo consulte Usando o Fireworks Os resultados dos ajustes aparecer o no painel de visualiza o direita o tamanho do arquivo e o tempo de descarga estimado para a imagem ser o listados no alto desse painel Quando a apar ncia e o tamanho do arquivo da imagem forem satisfat rios clique em Atualizar Se o formato da imagem for alterada o verificador de v nculos do Dreamweaver solicitar a atualiza o das refer ncias imagem Por exemplo se for alterado o formato de uma imagem chamada my image de GIF para JPEG um clique em OK no aviso ir modificar todas as refer ncias a my image gif no site para my image jpg Como inseririmagens 207 208 Cap tulo 7 Como criar uma imagem cambi vel Uma imagem cambi vel aquela que se altera quando o cursor for movido sobre ela Uma imagem cambi vel consiste de fato de duas imagens a imagem prim ria
294. erificar os v nculos selecionados Shift F8 Shift F8 Verificar os v nculos no site inteiro Control F8 Command F8 Atalhos de teclado 415 416 Ap ndice A Como designar e visualizar nos navegadores A o No Windows No Macintosh Visualizar no navegador prim rio F12 F12 Visualizar no navegador secund rio Control F12 Command F12 Gerenciamento de sites e FTPs A o No Windows No Macintosh Criar um novo arquivo Control Shift N Command Shift N Criar uma nova pasta Control Shift Alt N Command Shift Abrir a sele o Obter os arquivos ou pastas selecionadas do site remoto de FTP Colocar os arquivos ou pastas selecionadas no site remoto de FTP Retirar Devolver Desconectar Mapa do site Atualizar o site remoto Control Shift Alt 0O Control Shift D ou arraste os arquivos do painel Remoto para o painel Local na janela do site Control Shift U ou arraste os arquivos do painel Local para o painel Remoto na janela do site Control Shift Alt D Control Shift Alt U Control Shift Alt F5 Control F5 Alt F5 Option N Command Shift Option O Command Shift D ou arraste os arquivos do painel Remoto para o painel Local na janela do site Command Shift U ou arraste os arquivos do painel Local para o painel Remoto na janela do site Command Shift Option D Command Shift Option U Command Shift Option F5 Command F5 Option F5 Mapa do si
295. ero maior de quadros O aumento da barra de anima o cria mais pontos de dados entre os pontos inicial e final do movimento e tamb m faz com que o objeto se mova mais lentamente Tente aumentar o n mero de quadros por segundo gps para melhorar a velocidade por m leve em conta que a maioria dos navegadores executados nos sistemas mais comuns n o podem animar muito mais r pido do que 15 gps Teste a anima o em diversos sistemas com navegadores diferentes para estabelecer as melhores defini es e N o anime mapas de bits grandes Aumente a velocidade da anima o ao evitar mover imagens grandes Em vez disso crie imagens compostas e mova apenas pequenas partes da imagem Por exemplo mostre o movimento de um carro animando apenas as suas rodas e Crie anima es simples N o crie anima es que exijam mais recursos do que os navegadores atuais podem oferecer Os navegadores sempre executam cada quadro de uma anima o de linha de tempo mesmo quando o desempenho do sistema ou da Internet diminuir A es de comportamentos para controlar as linhas de tempo Anexe as a es de comportamentos listadas abaixo a um v nculo bot o ou outro objeto a fim de controlar as linhas de tempo Para criar efeitos interessantes coloque os comportamentos que cont m estas a es no canal de comportamentos Por exemplo fa a com que uma linha de tempo interrompa a execu o de si pr pria Para obter mais informa es consulte Como
296. es comuns que podem ocorrer durante a configura o de um site remoto e como solucion las e A implementa o de FTP do Dreamweaver pode n o funcionar corretamente em determinados servidores proxy firewalls em muitos n veis e outras formas de acesso indireto ao servidor Caso voc tenha problemas com o acesso de FTP pe a ajuda ao administrador de sistemas local e s vezes nas conex es lentas os 60 segundos do valor padr o de tempo limite do FTP resulta em muitos tempos de espera Aumente esse valor no painel FTP do site da caixa de di logo Prefer ncias se os tempos de espera forem frequentes Mas n o o aumente demais ou ser preciso aguardar um longo tempo quando uma conex o realmente n o puder ser estabelecida O mais comuns s o os limites de tempo de 30 a 120 segundos e Os nomes de pastas e arquivos que cont m espa os e caracteres especiais geralmente causam problemas quando s o transferidos para um site remoto Utilize sinais de sublinhado em vez de espa os e evite os caracteres especiais nos nomes de arquivos e pastas sempre que poss vel Em particular dois pontos barras inclinadas pontos e ap strofes nos nomes de arquivos ou pastas podem causar problemas Os caracteres especiais em nomes de pastas ou arquivos tamb m podem s vezes impedir que o Dreamweaver crie um mapa do site e No Macintosh os nomes de arquivos n o podem conter mais de 31 caracteres Se ocorrer problemas com nomes longos de arquivo
297. es dos applets de Java icccciiici ici 296 Sobre os par metros ccicciiiiccticccicse erra 297 Como utilizar os comportamentos para controlar m dia 298 CAP TULO 12 Como utilizar os comportamentos sussa usa 299 Como utilizar o inspetor de comportamentos 300 Sobre OS EVENTOS amas use ram ta me eae ie rara a 301 Como anexar um comportamento s s ssns surrer errre 303 Como anexar um comportamento a uma linha de tempo 305 Como alterar um comportamento cciiiiciicciciio 305 Como criar novas a es ccccccccc cicero 306 Como descarregar e instalar os comportamentos de outros fabricantes 306 Como utilizar as a es de comportamentos enviadas com o Dreamiw avet ass E paes qa a ipa DS aro V E 307 Como atualizar um comportamento s es seses srr reeniri 336 CAP TULO 13 Como editar o HTML quase sara ade ses ese da 337 Sobre o Roundtrip HTML s sesessunasuunner unner 338 Como utilizar o inspetor de origem de HTML 339 Como editar um r tulo HTML na janela do documento 340 Como definir as prefer ncias de formato HTML 346 Limparo HIM L a saci 0 Gestao iss dessa ni Gra 350 Limpar o HTML do Microsoft Word ciiiciicicci 352 Como corrigir os markups incorretos cicciciiciiiiio 354 Como utilizar os editores de HTML externos ccc c 354 Como inserir roteiros cccccccccccccctccc err
298. espa o suficiente para exibir o conte do da moldura A defini o padr o da maioria dos navegadores Autom Sem redimens restringe o tamanho da moldura e impede que os usu rios arrastem as suas bordas As molduras podem ser sempre redimensionadas na janela do documento contudo se essa op o for selecionada um usu rio n o poder redimension las em seu navegador Bordas controlam a borda da moldura As op es s o Sim N o e Padr o Essa escolha anula as defini es de borda em vigor para o conjunto de molduras Consulte Como definir as propriedades dos conjuntos de molduras na p gina 275 A defini o padr o da maioria dos navegadores Sim Para desativar uma borda todas as molduras a ela adjacentes dever o estar definidas como N o ou Padr o com o conjunto pai de molduras definido como N o Cor da borda define a cor de todas as bordas adjacentes moldura Essa defini o anula a cor da borda do conjunto de molduras Defina as seguintes op es de margem se as op es n o estiverem vis veis clique na seta de expans o no canto inferior direito Largura da margem define a largura das margens esquerda e direita em pixels o espa o entre as bordas da moldura e o seu conte do Altura da margem define a altura das margens superior e inferior em pixels o espa o entre as bordas da moldura e o seu conte do Como definir as propriedades dos conjuntos de molduras Utilize as propriedades do
299. especiais Estas abordagens s o apropriadas para tipos diversos de sites e Os itens da biblioteca podem ser utilizados em todos os sites e devem sempre ser inseridos nos sites exibidos localmente Consulte Sobre os itens de biblioteca na p gina 372 e As server side inclusions inclus es do servidor podem ser utilizadas apenas nos sites que forem exibidos a partir de um servidor e somente nos servidores que forem configurados para process las Pergunte ao seu webmaster ou ao administrador da rede se o servidor da Web oferece suporte s server side includes Consulte Como utilizar as server side includes na p gina 379 Como definir as prefer ncias de realce Nos modelos e nos arquivos que neles se basearem as regi es edit veis e as bloqueadas s o real adas em cores diferentes As prefer ncias de realce permitem personalizar as cores utilizadas na janela do documento para identificar as regi es do modelo e os itens de biblioteca Para obter mais informa es consulte os seguintes e Para personalizar as cores do realce do modelo consulte Como definir as prefer ncias dos modelos na p gina 363 e Para especificar a cor do realce dos itens de biblioteca consulte Como definir as prefer ncias de biblioteca na p gina 373 e poss vel tamb m especificar uma cor de realce do conte do com r tulos de outros fabricantes Consulte Como os r tulos personalizados aparecem na janela do documen
300. essa inst ncia da imagem mas esse procedimento n o reduzir o tempo de descarga porque o navegador descarrega todos os dados da imagem antes de redimension la Para reduzir esse tempo e assegurar que todas as inst ncias de uma imagem apare am com o mesmo tamanho utilize um aplicativo de edi o de imagens para redimension las Orig especifica o arquivo de origem da imagem Clique no cone correspondente pasta para procurar o arquivo de origem ou digite o caminho Para obter informa es sobre a inser o de caminhos consulte Sobre os caminhos absolutos na p gina 110 V nculo especifica um hiperv nculo para a imagem Arraste o cone indicador de arquivos at um arquivo na janela do site ou clique no cone correspondente pasta para procurar e selecionar um documento no seu site ou digite a URL Alinhar alinha uma imagem e o texto na mesma linha Consulte Como alinhar os elementos na p gina 203 Alt especifica um texto alternativo que aparece no lugar da imagem para os navegadores somente de texto ou para os navegadores que tiverem sido definidos para a descarga manual de imagens Para os usu rios com problemas de vista que utilizam sintetizadores de fala com navegadores somente de texto o texto falado em voz alta Em alguns navegadores esse texto tamb m aparecer quando o ponteiro estiver sobre a imagem Espa o V e Espa o H adicionam espa o em pixels acima abaixo e em ambos os lados
301. estes poder o se tornar conflitantes e produzir resultados inesperados Consulte Sobre os estilos conflitantes na p gina 194 Como formatar otexto 193 194 Cap tulo 6 Para aplicar um estilo CSS personalizado 1 Escolha Janela gt Estilos CSS 2 Selecione o texto ao qual o estilo CSS ser aplicado Coloque o ponto de inser o em um par grafo para aplicar o estilo ao par grafo inteiro Para especificar o r tulo exato ao qual o estilo CSS dever ser aplicado selecione o r tulo com o seletor na parte inferior esquerda da janela do documento A sele o do r tulo tamb m poder ser alterada com o menu pop up Aplicar a na paleta de estilos CSS Se for selecionada uma faixa de texto em um nico par grafo o estilo CSS afetar apenas a faixa selecionada 3 Clique em um nome de estilo na paleta de estilos CSS Um estilo CSS tamb m pode ser aplicado escolhendo um nome de estilo no submenu Texto gt Estilos CSS ou clicando com o bot o direito do mouse no Windows ou pressionando a tecla Control e clicando no Macintosh para escolher o nome do estilo no submenu Estilos CSS do menu contextual O r tulo da sele o atual aparecer ao lado do comando Estilo personalizado Sobre os estilos conflitantes Quando dois ou mais estilos CSS forem aplicados ao mesmo texto estes poder o se tornar conflitantes e produzir resultados inesperados Os navegadores aplicam os atributos de estilo segundo as regras abaixo
302. estimado de descarga da mesma aparecer o na parte inferior da janela do documento O Dreamweaver calcular o tamanho com base no conte do da p gina toda o que inclui todos os objetos vinculados como imagens e plug ins O Dreamweaver estimar o tempo de descarga com base na velocidade de conex o digitada no painel da barra de status da caixa de di logo Prefer ncias O tempo de descarga vari vel e depende das condi es gerais da Internet Para definir as prefer ncias de tempo e tamanho de descarga 1 Escolha Editar gt Prefer ncias e em seguida clique na Barra de status 2 Escolha uma velocidade de conex o com a qual deseja calcular o tempo de descarga A velocidade m dia de conex o nos Estados Unidos 28 8 Se o seu projeto destina se a uma intranet considere a escolha de 1500 velocidade T1 Sobre as Design Notes As informa es adicionais relativas aos documentos podem ser controladas como nomes de arquivos de origem da imagem e coment rios sobre o status do arquivo utilizando o comando Design Notes Por exemplo se um documento for copiado de um site para outro poss vel adicionar Design Notes sobre esse documento informando que seu original est na outra pasta do site Posteriormente se atualizar esse documento ou um outro usu rio voc ser informado que necess rio atualizar tamb m a p gina original O comando Design Notes pode ser utilizado tamb m para controlar informa es sens ve
303. eworks e export lo para myhouse gif o Fireworks criar automaticamente um arquivo de Design Notes chamado myhouse gif mno contendo o nome do arquivo original como um arquivo absoluto URL Por exemplo as Design Notes para myhouse gif devem conter a linha abaixo fw source file Mydisk sites assets orig myhouse png Se a imagem contiver pontos ativos ou cambi veis a origem de HTML desses itens tamb m ser adicionada ao arquivo de Design Notes Quando a imagem for importada para o Dreamweaver o arquivo de Design Notes ser automaticamente copiado para o site juntamente com a imagem Quando a imagem for selecionada no Dreamweaver e voc decidir edit la no Fireworks consulte Como utilizar um editor de imagens externo na p gina 205 este abrir o arquivo original para ser editado CAP TULO 6 Como formatar o texto A formata o no Dreamweaver semelhante de um processador de texto padr o Utilize o submenu Texto gt Formato ou o menu pop up Formato no inspetor de propriedades para definir o estilo padr o de formata o Par grafo Pr formatado Cabe alho 1 Cabe alho 2 etc de um bloco de texto Para alterar a fonte tamanho cor e alinhamento do texto selecionado utilize o menu Texto ou o inspetor de propriedades Para aplicar a formata o como negrito it lico c digo sublinhado etc utilize o submenu Texto gt Estilos Podem ser combinados diversos r tulos HTML padr o para formar um
304. exibi o das camadas Utilize uma linguagem de cria o de roteiros como JavaScript para controlar a propriedade de visibilidade e exibir dinamicamente o conte do das camadas Escolha uma dentre as seguintes op es e Default Padr o n o especifica uma propriedade de visibilidade por m a maior parte dos navegadores interpreta essa op o como Inherit Herdar e Inherit Herdar utiliza a propriedade de visibilidade da camada m e e Visible Vis vel exibe o conte do da camada independentemente do valor da camada m e e Hidden Oculta exibe o conte do da camada de forma transparente independentemente do valor da camada m e Observe que as camadas ocultas criadas com os r tulos LAYER e ILAYER ocupar o o mesmo espa o como se estivessem vis veis R tulo determina se as camadas ser o CSS ou da Netscape SPAN e DIV criam camadas CSS enquanto que LAYER e ILAYER criam camadas da Netscape Imagem de fundo especifica uma imagem de fundo para as camadas Clique no cone correspondente pasta para procurar e selecionar um arquivo de imagem ou digite o caminho da imagem no campo de texto Cor de fundo especifica uma cor de fundo para as camadas Deixe esta op o em branco para especificar um fundo transparente Como manipular as camadas Enquanto se modifica o layout da p gina as camadas podem ser ativadas selecionadas ou redimensionadas A ativa o das camadas permite a inser o de seu conte do A sele
305. exibida quando a p gina for carregada pela primeira vez e a imagem cambi vel que aparecer quando o cursor for movido sobre a imagem prim ria Quando for criada uma imagem cambi vel ambas as imagens dever o ter o mesmo tamanho caso contr rio o Dreamweaver redimensionar automaticamente a segunda imagem para coincidir com as propriedades da primeira Para obter informa es sobre a altera o de uma imagem em resposta a um evento diferente um clique do mouse por exemplo ou sobre a altera o de uma imagem distinta daquela sobre a qual est sendo movido o mouse consulte Permutar a imagem na p gina 331 Para criar uma imagem cambi vel 1 Na janela do documento posicione o ponto de inser o no local onde dever aparecer a imagem cambi vel 2 Insira a imagem cambi vel utilizando um dos seguintes m todos e Escolha Janela gt Objetos para abrir a paleta de objetos e clique no bot o Imagem cambi vel e Escolha Inserir gt Imagem cambi vel 3 Na caixa de di logo que aparecer digite as seguintes informa es Procure e selecione uma imagem ou digite o caminho e o nome de arquivo da imagem original no campo Imagem original e Procure e selecione uma imagem cambi vel ou digite o caminho e o nome de arquivo da imagem cambi vel no campo Imagem cambi vel e Para criar um v nculo procure e selecione um arquivo ou substitua o no campo V nculo por um caminho e um nome de arquivo e Para que
306. fer ncias de formata o como definir 347 prefer ncias de regrava o 346 r tulos como corrigir os incorretos 354 r tulos como remover 345 vis o geral da edi o 337 vis o geral das prefer ncias de formata o 346 ColdFusion Markup Language CEML como editar os r tulos CFML 356 e o Dreamweaver 338 vis o geral 407 colunas linhas e c lulas como adicionar e remover 229 como formatar 224 cor do fundo como adicionar 224 comando Abrir a p gina vinculada 136 comando Abrir o modelo anexado 369 comando Adicionar objeto biblioteca 373 comando Adicionar objeto linha de tempo 255 comando Adicionar quadro 255 comando Adicionar remover ajuste de redimensionamento da Netscape 239 comando Ajustar a posi o 104 comando Alinhar com a sele o 105 comando Alterar o v nculo no site inteiro 135 comando ncora com nome 119 comando Aplicar a formata o de origem 351 353 comando Aplicar o modelo p gina 368 comando Atualizar a p gina atual 369 428 ndice remissivo comando Atualizar as p ginas 370 comando Barra de navega o 208 comando Colar como texto 86 comando Colocar 153 comando Converter as camadas em tabela 250 comando Converter tabelas em camadas 252 comando Cor 181 comando Criar item de biblioteca 373 comando Definir como home page 131 comando Definir o esquema de cores 94 comando Desanexar do modelo 369 comando Desmarcar a regi o edit vel 366 comando Dividir as c lulas 232 comando Editar a folh
307. for selecionada e movida poss vel que as camadas filhas que n o estiverem selecionadas se movam Para evitar esse tipo de problema n o utilize camadas aninhadas Para alinhar duas ou mais camadas 1 Selecione as camadas 2 Escolha Modificar gt Camadas e pontos ativos e selecione uma op o de alinhamento Por exemplo se voc selecionar Alinhar no alto todas as camadas se mover o de maneira que as suas bordas superiores assumir o a mesma posi o vertical que a borda superior da ltima camada selecionada real ada em preto Como encaixar as camadas na grade Utilize a grade como um guia visual para posicionar ou redimensionar as camadas na janela do documento Se o encaixe estiver ativado as camadas ser o automaticamente levadas posi o de encaixe mais pr xima quando forem movidas ou redimensionadas O encaixe funcionar independentemente da visibilidade da grade Para exibir a grade siga um dos procedimentos abaixo e Escolha Exibir gt Grade gt Mostrar e Escolha Exibir gt Grade gt Defini es e selecione a op o Grade vis vel Para encaixar uma camada 1 Escolha Exibir gt Grade gt Encaixar para ativar ou desativar o encaixe 2 Selecione a camada e arraste a Quando a camada for solta ela saltar at a posi o de encaixe mais pr xima Quando for solta a camada saltar para a posi o de encaixe mais pr xima Para alterar as defini es da grade e do encaixe 1 Escolha
308. funcionar A sele o feita neste menu determinar os eventos que aparecer o no menu pop up Eventos Bot es de setas acima e abaixo movem a a o selecionada para cima ou para baixo na lista de comportamentos As a es ser o executadas na ordem especificada Eventos exibe todos os eventos que podem disparar a a o Os eventos que aparecer o depender o do objeto selecionado Se os eventos esperados n o aparecerem certifique se de que o objeto correto esteja selecionado Utilize o seletor de r tulos situado no canto inferior esquerdo da janela do documento para selecionar um r tulo Nota O menu pop up Eventos aparecer apenas ap s a sele o de uma a o Os diversos navegadores reconhecem de maneira diversa os eventos relacionados aos v rios objetos Escolha os navegadores nos quais o comportamento dever funcionar no menu pop up Eventos de Apenas os eventos reconhecidos pelos navegadores selecionados aparecer o no menu pop up Eventos Sobre os eventos A lista a seguir descreve os eventos que podem ser vinculados s a es listadas no menu pop up A es do inspetor de comportamentos Quando um visitante de sua p gina da Web interagir com ela clicando em uma imagem por exemplo o navegador gerar eventos que podem ser utilizados para chamar as fun es JavaScript respons veis pela ocorr ncia da a o Os eventos tamb m podem ser gerados sem a intera o com o usu rio como no caso da defini
309. g ins instalados inicialmente na pasta Configuration Plugins e em seguida nas pastas de plug in de todos os navegadores que estiverem instalados Para executar o conte do de plug ins na janela do documento 1 Insira um ou mais elementos de m dia escolhendo Inserir gt M dia gt Shockwave Inserir gt M dia gt Flash ou Inserir gt M dia gt Plug in 2 Execute o conte do do plug in Selecione um dos elementos de m dia que tiver inserido e escolha Exibir gt Plug ins gt Executar e Escolha Exibir gt Plug ins gt Executar todos para executar todos os elementos de m dia da p gina que dependerem de plug ins Para interromper a execu o do conte do de plug ins Selecione um elemento de m dia e escolha Exibir gt Plug ins gt Parar ou escolha Exibir gt Plug ins gt Parar todos para parar a execu o de todo o conte do dos plug ins Como inserir m dia 293 294 Cap tulo 11 Resolu o de problemas relacionados aos plug ins do Navigator Se ap s ter seguido estas etapas para executar o conte do do plug in na janela do documento alguns elementos do conte do do plug in n o forem executados tente um dos seguintes procedimentos e Certifique se de que o plug in associado esteja instalado no computador e que o conte do do mesmo seja compat vel com a vers o do plug in que voc possui e Abra o arquivo Configuration badplugins cfg em um editor de texto e procure o plug in em quest o na lista
310. gi o edit vel Control Alt V Command Option V Marcar como edit vel uma regi o n o dispon vel n o dispon vel Como inserir objetos Para inserir No Windows No Macintosh Qualquer objeto imagem filme Arraste o arquivo do Arraste o arquivo do Shockwave e assim por diante Explorer ou da janela do site Localizador ou da janela do para a janela do documento site para a janela do documento Imagem Control Alt I Command Option 1 Tabela Control Alt T Command Option T Filme Flash Control Alt F Command Option F Filme Shockwave Director Control Alt D Command Option D ncora com nome Control Alt A Command Option A 418 Ap ndice A Como abrir e fechar as paletas Para alternar a exibi o de No Windows No Macintosh Objetos Control F2 Command F2 Propriedades Control F3 Command F3 Iniciador Shift F4 Shift F4 exibi o dos arquivos do site F5 F5 exibi o do mapa do site Control F5 Command F5 Biblioteca F6 F6 Estilos CSS F7 F7 Estilos HTML Control F7 Command F7 Comportamentos F8 F8 Hist rico F9 F9 Origem de HTML F10 F10 Camadas F11 F11 Linha de tempo Control F9 Command F9 Molduras Modelos Mostrar ocultar as janelas flutuantes Fechar a janela do documento Control F10 Control F11 F4 Control F4 ou Control W Command F10 Command F11 F4 Command W Como obter ajuda A o No Windows No Macintosh T picos da Ajuda de Usando o F1 F1 Dreamweaver
311. gina 119 Como utilizar as molduras 279 280 Cap tulo 10 3 No menu pop up Destino escolha um destino no qual o documento vinculado ser exibido e blank abre o documento vinculado em uma nova janela de navegador e disponibiliza a janela e parent abre o documento vinculado no conjunto pai de molduras do v nculo e selfabre o v nculo na moldura substituindo o conte do da mesma e top abre o v nculo no conjunto de molduras mais distante do documento substituindo todas as molduras e Se as molduras tiverem sido denominadas no inspetor de propriedades os nomes das molduras aparecer o nesse menu A sele o de uma moldura definida abrir um documento vinculado na moldura escolhida Como criar um conte do NOFRAMES O Dreamweaver permite especificar conte dos a serem exibidos nos navegadores mais antigos com base em texto e sem suporte s molduras O Dreamweaver insere o conte do especificado no documento com o conjunto de molduras utilizando uma instru o semelhante seguinte lt noframes gt lt body bgcolor FFFFFF gt este o conte do noframes lt body gt lt noframes gt Quando um navegador sem suporte s molduras carregar o arquivo do conjunto de molduras o navegador exibir apenas o conte do NOFRAMES Para definir o conte do NOFRAMES 1 Escolha Modificar gt Conjunto de molduras gt Editar o conte do NoFrames O Dreamweaver limpar a janela do documento e as palavras Conte do
312. go que aparecer fa a as altera es necess rias e clique em OK Escolha Janela gt Biblioteca para abrir a paleta de bibliotecas Exclua o item de biblioteca original N o a Na janela do documento selecione os elementos que comp em o item de biblioteca Selecione com cuidado exatamente os mesmos elementos contidos no item de biblioteca original 9 Na paleta de bibliotecas utilize o menu contextual para selecionar Criar item de biblioteca e d ao novo item 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 nas p ginas do site siga um dos procedimentos abaixo e Escolha Modificar gt Biblioteca gt Atualizar as p ginas e Utilize o menu contextual e em seguida selecione Atualizar as p ginas 11 Na caixa de di logo Atualizar as p ginas no menu pop up Procurar em selecione Arquivos que utilizam O nome do item de biblioteca rec m criado dever aparecer no menu pop up adjacente 12 Selecione Atualizar os itens de biblioteca e clique em Iniciar 13 Clique em Fechar para sair da caixa de di logo Atualizar as p ginas Como definir as propriedades dos itens de biblioteca Utilize as propriedades dos itens de biblioteca para especificar o arquivo de origem de um item torn lo edit vel ou recri lo ap s a edi o Clique duas vezes em um item de biblioteca para abrir o inspetor de propriedades
313. grama seja reiniciado Por isso para garantir o acesso s novas defini es de prefer ncias saia do aplicativo antes de editar o perfil O perfil de formata o da origem de HTML segue um formato espec fico que descrito no arquivo Leia as seguintes conven es e Cada se o do perfil inicia com um lt keyword gt por exemplo lt OPTIONS gt lt ELEMENTS gt lt ATTRIBUTES gt e Os par metros de cada se o s o definidos nos coment rios em HTML lt gt diretamente acima desta se o e A linha OMIT na se o lt OPTIONS gt reservada para utiliza o posterior atualmente ela n o afeta a formata o da origem de HTML e Um r tulo individual pode ser marcado como pertencente a um grupo de recuo IGROUP na se o lt ELEMENTS gt Como padr o IGROUP 1 cont m as linhas e colunas da tabela e IGROUP 2 cont m as molduras e os conjuntos de molduras Esses agrupamentos correspondem s op es Recuar as linhas e colunas da tabela e Recuar as molduras e os conjuntos de molduras na caixa de di logo Prefer ncias de formato HTML O recuo pode ser desativado para o grupo inteiro removendo o seu n mero do atributo ACTIVE na se o lt OPTIONS gt Tamb m podem ser adicionados outros r tulos a IGROUP 1 ou 2 para control los com as op es em Prefer ncias de formato HTML Por exemplo as defini es padr o do r tulo P no SourceFormat txt s o lt P BREAK 1 0 0 1 INDENT gt e produz
314. gt Salvar para salvar as altera es feitas na home page Agora voc passar a criar os arquivos que estar o vinculados sua home page Tutorial do Dreamweaver 41 Importar um documento em HTML do Word O arquivo do tutorial correspondente p gina Our Story cont m um documento criado no Microsoft Word e salvo como um documento em HTML Importe este documento para o Dreamweaver e em seguida limpe os c digos HTML do documento que n o forem padronizados utilizando um novo recurso do Dreamweaver denominado Limpar o HTML do Word O recurso Limpar o HTML do Word proporciona op es para a limpeza ou corre o dos r tulos HTML defini o de elementos CSS Cascading Style Sheets Folhas de estilos em cascata defini o de uma cor de fundo da p gina remo o dos r tulos de markup espec ficos ao Word e convers o dos tamanhos de fontes e cabe alhos do Word em atributos de tamanho de HTML 1 Coma p gina my scaal home ainda aberta escolha Arquivo gt Novo para abrir um novo arquivo 2 Escolha Arquivo gt Importar gt Importar HTML do Word para importar um documento em HTML do Word 3 Na caixa de di logo Selecionar o arquivo em HTML do Word a ser importado navegue at DW3 ourstory word html e em seguida clique em Selecionar no Windows ou Escolher no Macintosh para selecionar o arquivo em HTML do Word Voc ser solicitado a salvar o documento 1 Para criar um caminho relativo ao documento
315. h A imagem aparecer na camada T Pe HI Adicionar as imagens de navega o Agora voc adicionar as imagens correspondentes aos bot es de navega o Depois de ter adicionado as imagens dos bot es adicione espa o entre as mesmas adicione um retorno de par grafo depois de ter inserido as imagens 1 Coloque o ponto de inser o na camada de navega o situada na parte inferior esquerda No painel Comuns da paleta de objetos clique no bot o Inserir a imagem Aparecer a caixa de di logo Selecionar a origem da imagem Na pasta Imagens do Scaal_site navegue at btn_ourstory_up gif e em seguida clique em Selecionar no Windows ou Escolher no Macintosh para inserir a imagem A imagem Our Story A nossa est ria aparecer na camada 4 Posicione o ponto de inser o ap s a imagem na camada e pressione a tecla Enter no Windows ou Return no Macintosh para adicionar espa o entre esta imagem e a pr xima a ser inserida im our story 5 Na paleta de objetos clique no bot o Inserir a imagem e na caixa de di logo que aparecer selecione btn products up gif e em seguida clique em Selecionar no Windows ou Escolher no Macintosh 6 Posicione o ponto de inser o ap s a imagem na camada e pressione a tecla Enter no Windows ou Return no Macintosh 7 Na paleta de objetos clique no bot o Inserir a imagem e na caixa de di logo que aparecer selecione btn th
316. h Como criar sites e documentos 77 78 Cap tulo 3 e No campo Endere o HTTP digite a URL que o site da Web conclu do utilizar para que o Dreamweaver possa verificar os v nculos no site que utilizam URLs absolutas Consulte Como verificar os v nculos entre os documentos na p gina 168 Por exemplo o endere o HTTP do site da Macromedia na Web http www macromedia com e Na op o Cache indique se deseja criar um cache local para melhorar a velocidade das tarefas de vincula o e gerenciamento do site Se voc n o selecionar esta op o o Dreamweaver o notificar novamente sugerindo a cria o de um cache antes que ele crie o site 3 Clique em OK Posteriormente quando o site estiver pronto para ser publicado em um servidor remoto voc dever incluir informa es adicionais relacionadas ao site Para obter mais informa es sobre os sites remotos consulte Como configurar um site remoto na p gina 140 Como editar e atualizar um site j existente poss vel utilizar o Dreamweaver para copiar um site remoto j existente ou um ramo deste para o disco local e edit lo a mesmo se o site original n o tiver sido criado com o Dreamweaver Observe que mesmo se pretender editar apenas uma parte do site remoto a fim de evitar quaisquer problemas duplique localmente a estrutura do ramo do site remoto desde a raiz do mesmo at os arquivos a serem editados Por exemplo se a pasta raiz
317. h raz o para alterar qualquer uma das prefer ncias de formato das folhas de estilos CSS Escolha Editar gt Prefer ncias e clique em Formato da folha de estilos CSS para exibir as prefer ncias de formato da folha de estilos CSS Consulte tamb m Como formatar o texto com as folhas de estilos CSS na p gina 188 Ao criar os estilos utilizar o formato abreviado de determina quais atributos de estilo CSS o Dreamweaver gravar em formato abreviado Ao editar os estilos existentes utilizar o formato abreviado controla se o Dreamweaver regravar os estilos existentes no formato abreviado Escolha a op o Se o formato original for abreviado para fazer com que o Dreamweaver mantenha todos os estilos originais Escolha De acordo com as defini es acima para que o Dreamweaver reescreva os estilos em formato abreviado segundo os atributos especificados nas caixas de sele o Utilizar o formato abreviado de Como formatar otexto 195 196 Cap tulo 6 Como converter os estilos CSS em markup HTML Se tiverem sido utilizados os estilos CSS para especificar a formata o do texto como fam lia tamanho cor e decora o das fontes e posteriormente voc decidir tornar a formata o vis vel em um navegador 3 0 utilize o comando Arquivo gt Converter gt Compat vel com navegador 3 0 para converter o maior n mero de informa es poss veis relativas aos estilos em r tulos HTML Para converter um arquivo que utiliza o
318. ha Exibir gt Evitar sobreposi es de camadas Consulte Como evitar as sobreposi es de camadas na p gina 251 Para criar uma camada siga um dos procedimentos abaixo e Para inserir uma camada posicione o ponto de inser o na janela do documento onde deseja posicionar a camada e em seguida escolha Inserir gt Camada e Para arrastar e soltar uma camada arraste o bot o Camada da paleta de objetos at a janela do documento e Para desenhar uma camada clique no bot o Camada na paleta de objetos na janela do documento arraste o cursor para desenhar a camada e Para desenhar v rias camadas clique no bot o Camada na paleta de objetos mantenha pressionada a tecla Shift e desenhe uma camada na janela do documento Voc pode continuar a desenhar novas camadas contanto que n o solte a tecla Shift Na janela do documento aparecer um marcador para cada camada criada no canto superior esquerdo da p gina Os marcadores de camadas aparecer o em outras posi es na p gina se forem adicionadas camadas ap s a inser o de retornos de par grafo na janela do documento Se os marcadores de camadas n o estiverem vis veis escolha Exibir gt Elementos invis veis Consulte Como definir as prefer ncias de elementos invis veis na p gina 90 Quando os elementos invis veis estiverem sendo exibidos os outros elementos da p gina poder o parecer deslocados Os elementos invis veis s o mostrados apenas n
319. ha Exibir gt Imagem de rastreamento gt Carregar 2 Na caixa de di logo que aparecer selecione um arquivo de imagem e clique em Selecionar no Windows ou Escolher no Macintosh 3 Aparecer a caixa de di logo Propriedades da p gina Especifique a transpar ncia da imagem arrastando o bot o deslizante Transpar ncia da imagem e em seguida clique em OK A qualquer momento poss vel escolher uma imagem de rastreamento ou alterar a transpar ncia da imagem de rastreamento atual na caixa de di logo Propriedades da p gina escolhendo Modificar gt Propriedades da p gina Para mostrar ou ocultar uma imagem de rastreamento Escolha Exibir gt Imagem de rastreamento gt Mostrar Para alterar a posi o de uma imagem de rastreamento siga um dos procedimentos abaixo e Para especificar a posi o da imagem de rastreamento escolha Exibir gt Imagem de rastreamento gt Ajustar a posi o e em seguida digite os valores das coordenadas X e Y e Para mover a imagem um pixel de cada vez utilize as teclas de seta e Para mover a imagem cinco pixels de cada vez pressione Shift e as teclas de seta e Para retornar a imagem de rastreamento ao canto superior esquerdo da janela do documento 0 0 escolha Exibir gt Imagem de rastreamento gt Redefinir a posi o Para alinhar a imagem de rastreamento a um objeto selecionado 1 2 Selecione um objeto na janela do documento Escolha Exibir gt Imagem de rastreamento
320. ha de tempo A a o Ir para o quadro da linha de tempo move o cabe ote de execu o at o quadro especificado poss vel utilizar esta a o no canal Comportamento no inspetor de linhas de tempo para que certas partes da linha de tempo sejam repetidas o n mero de vezes especificado para criar um v nculo ou bot o Rebobinar ou para permitir que o usu rio salte at partes diversas da anima o Para poder utilizar a a o Ir para o quadro da linha de tempo 1 Escolha Janela gt Linha de tempo para abrir o inspetor de linhas de tempo e se certificar que o documento cont m uma linha de tempo Se n o houver barras de anima o roxas no inspetor de linhas de tempo o documento n o cont m uma linha de tempo Consulte Como criar uma anima o de linha de tempo na p gina 255 2 Selecione um objeto Para anexar o comportamento a um quadro da linha de tempo clique no canal Comportamento no quadro desejado 3 Abra o inspetor de comportamentos 4 Clique no bot o com o sinal de adi o e escolha Linha de tempo gt Ir para o quadro da linha de tempo no menu pop up A es 5 Selecione uma linha de tempo no menu pop up Linha de tempo 6 Digite um n mero de quadro no campo Ir para o quadro 7 Se voc estiver adicionando esta a o no canal Comportamento de uma linha de tempo e desejar repetir um segmento desta digite o n mero de repeti es no campo Loop Deixe este campo em branco se n o estiver
321. html por exemplo chamada de DW3 products index html Configurar a estrutura do site do tutorial Antes de iniciar o tutorial crie uma nova pasta para a qual ser o transferidos os arquivos do site da Scaal do tutorial Posteriormente voc poder utilizar a estrutura da pasta Sites para armazenar outros sites que criar 1 Na raiz do seu disco local crie uma nova pasta e denomine a Sites por exemplo C Sites no Windows ou Unidade de disco r gido Sites no Macintosh 2 Na pasta Dreamweaver Tutorial copie a pasta conclu da Scaal site para a pasta Sites Definir um site local Inicie o desenvolvimento do seu site definindo um site local para os arquivos contidos em Scaal site Um site o local de armazenamento de todos os documentos e arquivos pertencentes a um determinado site da Web A defini o de um site local delineia a estrutura do site que estiver sendo criado e informa ao Dreamweaver onde se planeja armazenar todos os arquivos do site Defina um site local para cada site da Web criado atrav s da utiliza o do Dreamweaver Para esse tutorial a pasta Scaal site ser especificada como pasta do site local 1 Inicie o Dreamweaver Ser aberto um documento em branco 2 Escolha Site gt Novo site 3 Na caixa de di logo Defini o do site verifique se Informa es locais est selecionada na lista de categorias 4 No campo Nome do site digite my tutorial O nome do site permite identificar e sele
322. html e clique em Selecionar no Windows ou Escolher no Macintosh para selecionar o arquivo O nome do arquivo aparecer no campo V nculo no inspetor de propriedades Agora voc ir adicionar um v nculo imagem Products utilizando o inspetor de propriedades e a janela do site 6 Clique na barra de t tulo da janela do site para ativ la ou escolha Janela gt Arquivos do site Redimensione a janela do documento se for necess rio para que o lado esquerdo da janela do documento possa ser colocado ao lado da janela do site q aal Home Page S g h g Site scaal Arquivo Editar Exibir Inserir Modificar Texto Arquivo Editar Exibir Site Janela Ajuda Comandos Site Janela Ajuda ESI a icsa 8 Conecta GAtuaiza 055 Er Pastalocal e a LeMan o Tipo Mic Navega o no site az FAProjectsARubriciLocalizatio Pasta 07 3 Images Pasta 20 E Library Pasta 20 Templates Pasta 07 O DW3 copyt 1KB Text Docu 19 tease a E Dw3 ourstory word html SKB Microsoft 19 our story E DW3 products cd html SKB Microsoft 19 E DW3 products index html SKB Microsoft 19 E Dw3 products mug html 5KB Microsoft 19 E DW3 scaal home html 7KB Microsoft 2 E DW3 thisweek html 7KB Microsoft 19 B gitshiml 1KB Microsoft 28 home html 1KB Microsoft 2 B indexhiml 1KB Microsoft 28 EB inspiration html 1KB Microsoft 28 E my ourstory htmi 7KB Microsoft 19 E my scaal home html 2KB Microsoft
323. i lo a posicionar as camadas Consulte Como encaixar as camadas na grade na p gina 247 e Evitar sobreposi es de camadas restringe a posi o das camadas ao serem criadas movidas e redimensionadas para que n o se sobreponham Consulte Como evitar as sobreposi es de camadas na p gina 251 e Mostrar a paleta de camadas exibe a paleta de camadas Consulte Sobre a paleta de camadas na p gina 237 250 Cap tulo 9 3 Clique em OK As tabelas ser o convertidas em camadas no arquivo As c lulas vazias n o ser o convertidas em camadas O conte do fora das tabelas tamb m ser posicionado em camadas Como evitar as sobreposi es de camadas Como as c lulas de tabelas n o podem se sobrepor o Dreamweaver n o poder criar uma tabela a partir de camadas sobrepostas Se estiver planejando converter as camadas de um documento em tabelas para garantir a compatibilidade com os navegadores da vers o 3 0 utilize a op o Evitar sobreposi es que restringir o movimento e posicionamento das camadas de maneira que n o haja sobreposi o Para evitar que as camadas se sobreponham Escolha Exibir gt Evitar sobreposi es de camadas ou ative a op o Evitar sobreposi es na paleta de camadas home html Dreamweaver frquivo Editar Exibir Inserir Modificar Texto Comandos Site Janela Ajuda products our story gifts Quando esta op o estiver ativada uma camada n
324. i logo Localizar ou substituir para buscar segii ncias espec ficas de texto no c digo de origem de HTML Por exemplo uma busca de c o preto no seguinte c digo coincidiria com duas inst ncias no atributo ALT e na primeira frase lt IMG SRC barnab gif WIDTH 100 HEIGHT 100 ALT Barnab um c o preto gt lt BR gt Ontem vimos v rios c es pretos no parque O c o lt A HREF barnab html gt preto lt A gt de que mais gostamos se chama Barnab A frase c o preto tamb m aparece na segunda frase por m ela n o coincide com a busca pois interrompida por um v nculo Consulte Como buscar e substituir na p gina 156 para obter instru es passo a passo que explicam como iniciar uma busca Como buscar os r tulos e atributos HTML Utilize a op o R tulo na caixa de di logo Localizar ou substituir para buscar r tulos atributos e valores de atributos espec ficos Por exemplo poss vel procurar todos os r tulos IMG sem o atributo ALT Consulte Como buscar e substituir na p gina 156 para obter informa es sobre os v rios tipos de buscas Para realizar uma busca de r tulo 1 Escolha Editar gt Localizar ou Editar gt Substituir e especifique em quais arquivos dever ser feita a busca conforme a explica o em Como buscar e substituir na p gina 156 2 No menu pop up Localizar selecione R tulo 3 Escolha um determinado r tulo no menu pop up adjacente ao menu pop
325. i logo que aparecer selecione as op es desejadas de layout de tabelas e Mais preciso cria uma c lula de tabela correspondente a cada camada al m de quaisquer outras c lulas que forem necess rias manuten o do espa o entre as camadas e Menor fechar as c lulas vazias especifica que as margens das camadas dever o se alinhar se forem posicionadas de acordo com o n mero especificado de pixels Se essa op o for selecionada a tabela resultante ter menos linhas e colunas vazias e Utilizar GIFs transparentes preenche a ltima linha da tabela com GIFs transparentes Esse procedimento garante que a apar ncia da tabela ser uniforme em todos os tipos de navegadores Quando esta op o estiver ativada ser imposs vel editar a tabela resultante arrastando as suas colunas Quando estiver desativada a tabela resultante n o apresentar GIFs transparentes por m a sua apar ncia poder variar de acordo com o tipo de navegador utilizado e Centralizar na p gina centraliza a tabela resultante na p gina Se esta op o estiver desativada a tabela ser alinhada esquerda 3 Selecione as ferramentas de layout e op es de grade desejadas e clique em OK Para converter uma tabela em camadas 1 Escolha Modificar gt Modo de layout gt Converter as tabelas em camadas 2 Na caixa de di logo que aparecer selecione as op es desejadas e Mostrar a grade e Encaixar na grade permitem utilizar uma grade para auxil
326. iblioteca na pasta Biblioteca contida na pasta raiz local de cada site poss vel definir uma biblioteca diferente para cada site Para obter mais informa es sobre a pasta raiz local de cada site consulte Como criar um site local na p gina 77 Como criar um item de biblioteca Nesse caso selecione uma parte da se o BODY do documento e o Dreamweaver converter a rea selecionada em um item de biblioteca Os itens de biblioteca incluem qualquer elemento do BODY incluindo texto tabelas formul rios imagens applets de Java plug ins e elementos ActiveX O Dreamweaver armazena apenas uma refer ncia dos itens vinculados como as imagens O arquivo original deve permanecer no local especificado para que o item de biblioteca funcione corretamente Os itens de biblioteca tamb m podem conter comportamentos por m h requisitos especiais para a edi o dos comportamentos neses itens consulte Como editar um comportamento em um item de biblioteca na p gina 376 Os itens de biblioteca n o podem conter linhas de tempo ou folhas de estilos porque o c digo para esses elementos faz parte da se o HEAD CABE ALHO 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 e Escolha Janela gt Biblioteca e arraste a sele o para a paleta de bibliotecas e Na paleta de bibliotecas clique no bot o do menu contextual e
327. icadas apenas aos novos documentos criados com o Dreamweaver subsequentemente Para aplicar essas op es de formata o de HTML aos documentos HTML existentes utilize o comando Aplicar a formata o de origem Para aplicar as op es de formata o da origem de HTML a um documento j existente 1 Escolha Arquivo gt Abrir para abrir um arquivo HTML existente na janela do documento 2 Escolha Comandos gt Aplicar a formata o de origem Como editaro HTML 351 352 Cap tulo 13 Limpar o HTML do Microsoft Word Os documentos salvos como arquivos de HTML no Microsoft Word podem ser abertos no Dreamweaver e em seguida poss vel utilizar o comando Limpar o HTML do Word para remover o c digo HTML n o correspondente gerado pelo Word O c digo que o Dreamweaver remove basicamente utilizado pelo Word para formatar e exibir os documentos no Word n o sendo necess rio exibi o do arquivo HTML Guarde uma c pia de seguran a do arquivo original do Word doc porque talvez n o seja poss vel reabrir o documento HTML no Word ap s a aplica o do recurso Limpar o HTML do Word O comando Limpar o HTML do Word est dispon vel para os documentos salvos como arquivos HTML no Word 97 ou mais avan ado Para utilizar o recurso Limpar o HTML do Word 1 No Microsoft Word salve o documento como um arquivo HTML 2 Abra o documento HTML no Dreamweaver utilizando um dos seguintes m todos e Escolha Arquivo gt Importar
328. icamente o texto de uma moldura substituindo o conte do e a formata o da moldura pelo conte do especificado O conte do pode incluir qualquer HT ML v lido Utilize esta a o para exibir informa es dinamicamente Embora a o Definir o texto da moldura substitua a formata o de uma moldura poss vel selecionar a op o Preservar a cor do fundo para preservar os atributos das cores do fundo da p gina e do texto poss vel incorporar qualquer chamada v lida de fun o JavaScript propriedade vari vel global ou outra express o no texto Para incorporar uma express o JavaScript coloque a entre chaves Para exibir um sinal de chaves preceda o por uma barra invertida A URL desta p gina window location e hoje new Date Para criar um conjunto de molduras Escolha Modificar gt Conjunto de molduras gt Dividir a moldura para a esquerda J q para a direita para cima ou para baixo Para obter mais informa es consulte Como criar as molduras na p gina 266 Para poder utilizar a a o Definir o texto da moldura 1 Selecione um objeto e abra o inspetor de comportamentos 2 Clique no bot o com o sinal de adi o e no menu pop up A es escolha Definir o texto gt Definir o texto da moldura 3 Na caixa de di logo Definir o texto da moldura escolha a moldura de destino no menu pop up Moldura 4 Clique no bot o Obter o HTML atual para copiar o conte do HTML
329. icciciicis ici 74 Como criar um site local cccccicccccccc seres 77 Como editar e atualizar um site j existente cccccciiio 78 Como exibir e abrir os arquivos na janela do site 79 Como remover um site da lista de sites ccccccccciccics 84 Como criar e editar os documentos HTML cccccicc 84 Como adicionar texto e inserir objetos icciciiiciiii 86 Como selecionar os elementos na janela do documento 89 Como escolher as cores ccccciciccccccs cre errrs 90 Sobre as cores aceitas pela Web ciiciciiiiiiiciiii 92 Como definir as propriedades do documento cccc 93 Sobre a paleta de ist ricos aseron resrirsdcriucdi ren keatsten 95 Como desfazer as altera es nnn nunnan naana 96 Como automatizar as tarefas n unon nuoro renren rr 97 Como utilizar as guias visuais no processo de desenho 103 Sobre a interatividade e anima o ccccccccccctccica 105 Como exibir e editar o conte do do HEAD ccccco 106 CAP TULO 4 V nculos e navega o ccciiiicccctiits 109 Como criar os v nculos ccccccciccccccce serena 113 Como criar menus de salto cccciccicc cessa 122 Como criar as barras de navega o ccccciiiciiciiiiis 124 Como exibir a estrutura do site cccccccccccccsccrcea 127 Como gerenciar os v nculos iciicciciiics ici 134 Como anexar comportamentos a v nculos
330. iedades no inspetor de propriedades selecione um applet de Java O inspetor de propriedades inicialmente exibir as propriedades mais comumente utilizadas Clique na seta de expans o situada no canto inferior direito para examinar todas as propriedades Nome especifica um nome que identificar o applet para a cria o de roteiros Digite um nome no campo sem t tulo extrema esquerda do inspetor de propriedades L e U especificam a largura e altura do applet em pixels Tamb m poss vel especificar as seguintes unidades pc paicas pt pontos pol polegadas mm mil metros cm cent metros ou percentagem do valor do objeto pai As abreviaturas devem se seguir ao valor sem um espa o por exemplo 3mm C digo especifica o arquivo de conte do do applet Digite um nome de arquivo ou clique no cone correspondente pasta para procurar um arquivo Base identifica a pasta que cont m o applet selecionado Quando voc escolher um applet este campo ser preenchido automaticamente Alinhar determina como o objeto ser alinhado na p gina Consulte Como alinhar os elementos na p gina 203 para obter uma descri o de cada op o Alt especifica um conte do alternativo geralmente uma imagem que ser exibido se o navegador do usu rio n o oferecer suporte aos applets de Java ou estiver com o Java desativado Se voc digitar texto o Dreamweaver o interpretar atrav s da utiliza o do atributo
331. ilizam A p gina de produtos da Scaal se vincula a diversas p ginas que descrevem os produtos venda pela Scaal Para criar um modelo voc utilizar uma p gina de produto existente A utiliza o de um modelo garante que as p ginas dos produtos ter o um layout e formato id nticos Nesta se o voc criar um modelo a partir de uma p gina de produto j existente e o utilizar para criar novas p ginas de produtos Tutorial do Dreamweaver 51 52 Cap tulo 1 Exibir uma p gina de produto Inicie exibindo a p gina de produto do CD da Scaal em um navegador 1 Nalista Pasta local na janela do site localize o cone correspondente ao arquivo product cd html e em seguida clique duas vezes nele para abrir o arquivo no Dreamweaver 2 Pressione F12 para visualizar a p gina em uma janela de navegador 3 Feche o navegador ao concluir a exibi o da p gina 4 Feche o arquivo products cd html Criar o modelo Voc criar um modelo a partir da vers o do tutorial da p gina de produtos do CD da Scaal Em seguida voc utilizar este modelo para criar p ginas adicionais de produtos 1 Nalista Pasta local na janela do site clique duas vezes no cone correspondente ao arquivo DW3 products cd html para abri lo 2 Escolha Arquivo gt Salvar como modelo Aparecer a caixa de di logo Salvar como modelo Salvar como modelo x Site Sito senza nome 1 z Cancelar Modelos existentes my produc
332. ilizar as camadas para organizar uma p gina Converter as camadas em tabelas Anexar um comportamento a uma imagem Importar um documento em HTML do Microsoft Word Formatar o texto utilizando os estilos HTML Criar um mapa do site Criar v nculos Aplicar um modelo Criar um menu de salto Nota Este tutorial demonstra alguns recursos aos quais oferecido suporte apenas nos navegadores 4 0 ou posteriores Fa a um tour guiado no Dreamweaver Antes de iniciar assista aos filmes do Tour guiado na Ajuda do Dreamweaver para familiarizar se com os recursos do programa 1 2 3 4 No Dreamweaver escolha Ajuda gt Usando o Dreamweaver Na lista de Conte do situada na moldura da esquerda clique em Introdu o e em seguida clique em Introdu o ao Dreamweaver Clique no t tulo de um filme Quando tiver terminado feche o navegador Visualizar o site da Web conclu do Em seguida visualize o site da Web conclu do para ter uma id ia do objetivo do seu trabalho 1 Inicie o Dreamweaver 2 No Dreamweaver escolha Arquivo gt Abrir Na caixa de di logo de procura de arquivos navegue at a pasta do aplicativo do Dreamweaver abra a pasta do Tutorial e em seguida a pasta Scaal site 3 Na pasta Scaal site selecione scaal home html e em seguida clique em Abrir para abrir a home page da Scaal na janela do documento N o edite esta p gina Ser criada a sua pr pria vers o desta p gina 4 Escolha Arquivo
333. ilo os atributos de estilo iniciados por mso as declara es de estilo diferentes de CSS os atributos de estilo CSS das tabelas e todas as defini es de estilo n o utilizadas do cabe alho Esta op o pode ser ainda mais personalizada clicando na guia Detalhado Limpar os r tulos lt font gt remove os r tulos HT ML convertendo o corpo do texto padr o para o tamanho 2 HTML Corrigir os r tulos aninhados incorretamente remove os r tulos do markup font inseridos pelo Word fora dos r tulos de par grafo e cabe alho n vel de bloco Definir a cor do fundo insere um valor hexadecimal para definir a cor do fundo do documento Se n o for definida uma cor de fundo o documento HTML do Word ter um fundo cinza O valor hexadecimal padr o definido pelo Dreamweaver branco Aplicar a formata o de origem aplica as op es de formata o da origem especificadas nas prefer ncias de formato HTML e no Format profile de origem do documento Mostrar o registro quando concluir exibe uma caixa de alerta com os detalhes sobre as altera es feitas no documento logo que a limpeza terminar Clique em OK Dependendo do tamanho do documento e do n mero de op es selecionadas a limpeza poder demorar alguns segundos As prefer ncias escolhidas ser o automaticamente salvas como defini es padr o de Limpar o HTML do Word Como editaro HTML 353 354 Cap tulo 13 Como corrigir os markups incorretos Se o c dig
334. im de informar as op es aos visitantes Voc tamb m criar dois comandos de menu a serem vinculados a p ginas de produtos 1 Na janela do site clique duas vezes no cone correspondente ao arquivo DW3 products index html para abri lo Selecione e exclua o texto insert jump menu here Inserir o menu de salto aqui Mantendo o ponto de inser o na c lula da tabela escolha Inserir gt Objeto de formul rio gt Menu de salto Aparecer a caixa de di logo Menu de salto E E 5 5 Itens de menu Cancelar Ajuda Quando tiver selecionado v para a URL Procurar Abrir as URLs em Janela principal E Nome do menu fmenu2 Op es 1 Inserir o bot o Ir ap s o menu I Selecionar o primeiro item ap s a altera o da URL No campo Texto digite Select a product Selecione um produto Este texto solicitar uma a o por parte do usu rio Em Op es selecione a op o Selecionar o primeiro item ap s alterar a URL Este procedimento definir a primeira entrada de um menu como sendo o item ao qual o menu retornar depois que o usu rio selecionar uma op o no menu de salto Clique no bot o de adi o para adicionar um outro item de menu de salto No campo Texto digite Compact disc No campo Ap s selecionar v para a URL clique em Procurar para ir at o arquivo DW3 products cd html Clique em Selecionar no Windows ou Escolher no Macintosh para selecionar o arqu
335. inas 5 Em Op es selecione quais arquivos ser o exibidos no mapa do site e Escolha Exibir os arquivos marcados como ocultos para exibir os arquivos HTML que estiverem marcados como ocultos no mapa do site Se uma p gina estiver oculta o seu nome e v nculos ser o exibidos em it lico Para obter informa es sobre a maneira de ocultar arquivos consulte Como mostrar e ocultar os arquivos do mapa do site na p gina 132 e Escolha Exibir os arquivos dependentes para mostrar todos os arquivos dependentes na hierarquia do site Um arquivo dependente uma imagem ou outro elemento diferente de HTML que carregado pelo navegador junto com a p gina principal Como trabalhar com as p ginas no mapa do site Durante o trabalho no mapa do site poss vel selecionar p ginas abrir uma p gina para edi o adicionar novas p ginas ao site criar v nculos entre arquivos e alterar o t tulo da p gina Para selecionar v rias p ginas no mapa do site siga um dos procedimentos abaixo e Mantendo a tecla Shift pressionada clique para selecionar v rias p ginas e Inicie em uma parte em branco da exibi o e arraste um grupo de arquivos para selecion los e Pressione a tecla Control no Windows ou Command no Macintosh e d um clique para selecionar p ginas n o cont guas Para abrir uma p gina para edi o siga um dos procedimentos abaixo e Clique duas vezes no arquivo e Selecione o arquivo e escolha Ar
336. incluir objetos padr o como campos de texto bot es campos de imagens caixas de sele o bot es de op o menus de lista campos de arquivos e campos ocultos O Dreamweaver tamb m oferece suporte aos tipos de entrada que ele n o for capaz de reconhecer exibindo propriedades de campos gen ricos no inspetor de propriedades Consulte Propriedades de campos gen ricos na Ajuda do Dreamweaver 381 382 Cap tulo 15 Como criar um formul rio Utilize o comando Inserir gt Formul rio ou o painel Formul rios da paleta de objetos para criar um formul rio Para criar um formul rio 1 Siga um dos procedimentos abaixo e Coloque o ponto de inser o no local onde deseja colocar o formul rio e escolha Inserir gt Formul rio e Posicione o ponto de inser o no local onde deseja colocar o formul rio e clique no bot o Formul rio no painel Formul rios da paleta de objetos e Arraste o bot o Formul rio at o local desejado na p gina Se n o houver qualquer resultado vis vel verifique se a op o Exibir gt Elementos invis veis est ativada 2 Selecione o formul rio e defina as propriedades deste no inspetor de propriedades Escolha dentre as seguintes op es Nome do formul rio atribui um nome ao formul rio O procedimento de nomear um formul rio possibilita control lo com uma linguagem de cria o de roteiros como JavaScript ou VBScript por exemplo A o identifica o aplicativo do servidor
337. inir a sele o como o tipo de caminho padr o para os v nculos posteriores at que ela seja modificada No campo V nculo digite o caminho e o nome do arquivo do documento Para criar um v nculo a um documento no site digite um caminho relativo a documento ou raiz Para criar um v nculo a um documento fora do site digite um caminho absoluto que inclua o tipo de protocolo por exemplo http Selecione a localiza o na qual o documento ser aberto Para que o documento vinculado apare a em um local diferente da janela ou moldura atual selecione uma op o no menu pop up Destino no inspetor de propriedades Para obter mais informa es sobre a maneira de designar documentos com moldura consulte Como controlar o conte do de molduras com os v nculos na p gina 279 V nculos e navega o N5 116 Cap tulo 4 Como criar v nculos com o cone do indicador de arquivos Utilize o cone do indicador de arquivos para criar um v nculo a outro documento aberto a um documento ou imagem na janela do site ou a uma ncora com nome Para estabelecer um v nculo a um documentoutilizando o cone do indicador de arquivos no inspetor de propriedades 1 Selecione o texto ou uma imagem na janela do documento 2 Arraste o cone do indicador de arquivos direita do campo V nculo no inspetor de propriedades e indique um outro documento aberto uma ncora vis vel em um documento aberto ou um documento n
338. inseridos em r tulos HTML como no c digo ASP seguinte lt input type checkbox name month value October lt if month October then gt checked lt end if gt gt Para editar o c digo CFML ou ASP quando um marcador ou um texto real ado n o aparecer 1 Se for selecionado o r tulo ou objeto que cont m o c digo utilize o Quick Tag Editor para editar o c digo Consulte Como editar um r tulo HTML na janela do documento na p gina 340 Caso contr rio siga as etapas abaixo 2 Na janela do documento posicione o ponto de inser o pr ximo posi o onde deve estar o c digo CFML ou ASP 3 Escolha Janela gt Origem de HTML para abrir o inspetor de origem de HTML 4 Clique na barra de t tulo do inspetor de origem de HTML para direcionar o teclado para esse inspetor N o clique no meio do inspetor sen o o ponto de inser o ser movido para fora do c digo CFML ou ASP a ser editado 5 Edite o c digo diretamente no inspetor de origem de HTML 6 Pressione F10 para fechar o inspetor de origem de HTML e retornar janela do documento Para obter informa es sobre o processamento de c digos CFML ou ASP e exibir os resultados na janela do documento consulte Como personalizar a interpreta o e a apar ncia dos r tulos de outros fabricantes na p gina 402 Como inserir roteiros JavaScript e VBScript podem ser inseridos na janela do documento dispensando a utiliza o do inspeto
339. io em vez de apresentar lhe uma op o poss vel incorporar qualquer chamada v lida de fun o JavaScript propriedade vari vel global ou outra express o no texto Para incorporar uma express o JavaScript coloque a entre chaves Para exibir um sinal de chaves preceda o por uma barra invertida A URL desta p gina window location e hoje new Date Para poder utilizar a a o Mensagem pop up 1 Selecione um objeto e abra o inspetor de comportamentos 2 Clique no bot o com o sinal de adi o e escolha Mensagem pop up no menu pop up A es 3 Digite a mensagem no campo Mensagem 4 Clique em OK 5 Verifique se o evento padr o corresponde ao desejado Se n o corresponder escolha um outro evento no menu pop up Se os eventos desejados n o estiverem listados altere o navegador de destino no menu pop up Eventos de Pr carregar as imagens A a o Pr carregar as imagens carrega no cache do navegador as imagens que n o aparecem na p gina imediatamente como aquelas que ser o permutadas com as linhas de tempo comportamentos ou JavaScript por exemplo Este processo evita os atrasos causados pela descarga quando as imagens tiverem que ser exibidas Nota Quando a op o Pr carregar as imagens na caixa de di logo Permutar a imagem for selecionada a a o Permutar a imagem pr carregar automaticamente todas as imagens de realce dispensando a necessidade de adicionar manualmen
340. ionar e remover 258 como adicionar um objeto s 255 como alterar as propriedades das camadas 259 como alterar o arquivo de origem da imagem 259 como anexar um comportamento 305 como controlar com os comportamentos 263 como criar 255 como executar automaticamente 258 como executar e parar utilizando os comportamentos 333 como modificar 258 como renomear 262 como repetir continuamente 258 dicas de anima o 262 em modelos 367 m ltiplas 260 quadros prim rios 255 listas como criar 183 listas n o ordenadas como criar 183 macros como criar comandos 101 manipuladores de eventos Consulte eventos manual Usando o Dreamweaver 13 mapa de percurso onde iniciar 14 mapas de bits como redimensionar 204 mapas de imagens como criar para o cliente 211 como selecionar v rios pontos ativos 212 pontos ativos 211 vis o geral 211 mapas de imagens do cliente como criar 211 mapas de imagens do servidor 211 mapas de sites atalhos 417 como exibir 80 mapas dos sites comando Atualizar local 131 comando Definir como home page 131 comando V nculo a um arquivo existente 130 comando V nculo a um novo arquivo 130 como adicionar os arquivos ao site 130 como alterar os v nculos nos 131 como atualizar ap s as altera es 131 como editar as p ginas 129 como exibir uma ramifica o dos 133 como expandir uma ramifica o 133 como marcar como ocultos 132 como mostrar os arquivos dependentes nos 133 como reduzir uma ramifica o 133 como re
341. ior da paleta ou clique duas vezes no item O Dreamweaver abrir uma nova janela para a edi o do item de biblioteca 3 Edite o item de biblioteca e em seguida salve as suas altera es Na caixa de di logo que aparecer escolha se deseja atualizar os documentos no site local com o item de biblioteca editado Escolha Atualizar para atualizar todos os documentos no site local com o item de bilioteca editado Escolha N o atualizar para evitar que os documentos sejam alterados at que voc utilize Modificar gt Biblioteca gt Atualizar a p gina atual ou Atualizar as p ginas Para atualizar as p ginas que utilizam um item de bilioteca editado 1 2 3 Escolha Modificar gt Biblioteca gt Atualizar as p ginas Na caixa de di logo que aparecer escolha os arquivos que ser o atualizados Escolha Site inteiro para atualizar todos os documentos no site especificado Escolha Arquivos que utilizam para atualizar todo os documentos que utilizam o item de biblioteca especificado Clique em Iniciar O conte do do item de biblioteca ser substitu do nos documentos especificados Para renomear um item de biblioteca 1 2 3 4 Selecione um item de biblioteca na paleta de bibliotecas Clique no nome do item Digite um novo nome Quando voc clicar em OK o Dreamweaver perguntar se deseja atualizar os arquivos que utilizam o item Se voc clicar em Sim todos os documentos que tiverem utilizado o ite
342. ios do Flash 3 e do Director Para inserir objetos Aftershock no Dreamweaver 1 No Dreamweaver abra um arquivo HTML criado pelo Aftershock Os elementos do Aftershock aparecer o como objetos n o edit veis no Dreamweaver Se um objeto incluir uma imagem de visualiza o o Dreamweaver a exibir 2 Copie o conte do do arquivo e cole o em outro documento do Dreamweaver Para editar um objeto Aftershock 1 Selecione um objeto Aftershock e abra o inspetor de propriedades 2 Clique em Iniciar o Aftershock 3 Edite o arquivo no Aftershock salve as altera es e saia do utilit rio Quando voc sair do Aftershock o Dreamweaver atualizar o conte do do objeto Aftershock incluindo as novas informa es Como inserir objetos do Generator O Macromedia Generator proporciona a possibilidade de tratar de conte do din mico na Web Os arquivos do Generator podem ser criados com o Flash 4 utilizando os modelos gratuitos de autoria do Generator os arquivos passam a ser veiculados por um servidor da Web que executa o software de servidor do Generator poss vel inserir um objeto do Generator em um documento do Dreamweaver Para inserir um objeto do Generator 1 Na janela do documento coloque o ponto de inser o onde deseja inserir o objeto 2 Clique no bot o Generator na paleta de objetos 3 Na caixa de di logo que aparecer selecione o arquivo de modelo do Generator swt 4 Se desejar clique no bot o de adi o
343. is que n o podem ser colocadas no interior de um documento por motivo de seguran a Por exemplo podem ser inclu das informa es sobre a cria o do documento ou notas sobre a escolha de um determinado pre o ou configura o ou ainda quais fatores de marketing influenciaram uma decis o sobre desenho Como salvar as informa es sobre o arquivo em Design Notes Pode ser criado um arquivo de Design Notes para cada documento ou modelo do site Observe que se forem adicionadas Design Notes a um modelo os documentos com base nesse modelo n o as herdar o Pode se criar tamb m as Design Notes para applets controles ActiveX imagens filmes Flash objetos Shockwave e campos de imagem nos documentos Para configurar as Design Notes para o site 1 Escolha Site gt Definir os sites e em seguida clique em Editar 2 Nalista de categorias esquerda clique em Design Notes e Ative as Design Notes para o site selecionando Manter as Design Notes caso ainda n o esteja selecionada Quando Manter as Design Notes estiver selecionada poder o ser criadas Design Notes para os arquivos do site Quando um arquivo for copiado movido renomeado ou exclu do as Design Notes a ele associadas tamb m ser o copiadas movidas renomeadas ou exclu das Decida se as Design Notes associadas ao site ser o carregadas com o restante dos documentos selecionando ou desmarcando Carregar as Design Notes para compartilhar Quando a op o Car
344. isweek up gife em seguida clique em Selecionar no Windows ou Escolher no Macintosh O layout do seu documento dever ter uma apar ncia semelhante a esta g ERRA EE N L brave new world coffee our story this week Tutorial do Dreamweaver 33 34 Cap tulo 1 Nomear as imagens Nomeie todos os elementos nos seus documentos Posteriormente quando precisar selecionar ou criar uma refer ncia a uma determinada imagem camada ou outro elemento do documento ser f cil identific lo Como as refer ncias a estas imagens ser o criadas mais abaixo no tutorial nomeie as desde j 1 Na janela do documento clique na imagem Our Story para selecion la 2 No campo Imagem no inspetor de propriedades digite ourstory Imagem K LinS Orig agestbtm order up gif E3 Alinhar Padr do navegad Q outstord uin v nculo SO A Mapa Espa o Destino Borda 0 BBHI RO Espa o Orig baina sa E 3 Repita estas etapas selecionando e nomeando as duas outras imagens do documento Nomeie a segunda imagem products e a terceira thisweek Adicionar texto a uma camada Agora voc adicionar texto ltima camada No Dreamweaver poss vel digitar conte do diretamente em uma camada ou recort lo de um outro documento e col lo na camada Nesse tutorial voc adicionar texto camada copiando e colando o conte do de um arquivo de texto j existente 1 Escolha Arquivo gt Abrir em seguida
345. it vel chamado Edit Region ter esta apar ncia lt 4BeginEditable Edit Region gt Editable Region lt amp EndEditable gt O HTML para uma tabela edit vel chamada Edit Table ter esta apar ncia lt 4BeginEditable Edit Table gt lt table width 77 border 1 gt lt tr gt lt td gt amp nbsp lt td gt lt td gt amp nbsp lt td gt lt tr gt lt table gt lt EndEditable gt Nos modelos as regi es edit veis s o real adas no inspetor de origem de HTML Contudo poss vel alterar o c digo de origem de HTML edit vel e bloqueado product page dwt Origem de HTML lt D Orig de HTML O O Quebra autom de linha E N meros de linha O HTML edit vel est real ado Tanto as regi es edit veis quanto as bloqueadas podem ser modificadas Modelos e bibliotecas 365 Nos documentos que utilizam modelos as regi es bloqueadas est o real adas no inspetor de origem de HTML Apenas o c digo de origem de HTML edit vel n o real ado pode ser alterado D Orig de HTML O rm Quebra autom de linha rm N meros de linha Bi WIO aje SPAS nN ar or O HTML lt p gt enhsp lt p gt lt td gt bloqueado lt td width 367 valign top bgcolor CCCC99 gt lt BeginEditable ii est real ado image herej lt fEndEditable gt lt td gt lt td width 218 bgcolor CC9933 rowspan 4 gt enhsp lt td gt lt tr gt Apenas
346. ite no Windows ou Site gt Exibir os arquivos do site gt Novo arquivo no Macintosh 3 Digite um nome para o novo arquivo Para atualizar a exibi o Arquivos do site depois de concluir as altera es fora do Dreamweaver Siga um dos procedimentos abaixo e Escolha Exibir gt Atualizar o local na janela do site no Windows ou Site gt Exibir os arquivos do site gt Atualizar o local no Macintosh e Escolha Exibir gt Atualizar o remoto na janela do site no Windows ou Site gt Exibir os arquivos do site gt Atualizar o remoto no Macintosh e Para atualizar ambos os pain is clique no bot o Atualizar situado na janela do site Para localizar e selecionar os arquivos locais mais recentes Escolha Editar gt Selecionar um local mais novo na janela do site no Windows ou Site gt Exibir os arquivos do site gt Selecionar um local mais novo no Macintosh Para localizar e selecionar os arquivos remotos mais recentes Escolha Editar gt Selecionar um remoto mais novo na janela do site no Windows ou Site gt Exibir os arquivos do site gt Selecionar um remoto mais novo no Macintosh Para obter mais informa es sobre como trabalhar com os sites locais e remotos consulte Como utilizar o sistema de devolu es e retiradas na p gina 148 Como criar sites e documentos 83 84 Cap tulo 3 Como remover um site da lista de sites Se n o desejar mais trabalhar com um site no Dreamw
347. ite um nome para o campo de texto Certifique se de que o nome seja exclusivo p gina n o utilize o mesmo nome para diversos elementos na mesma p gina mesmo se estiverem em formul rios diferentes Para poder utilizar a a o Definir o texto do campo de texto 1 2 Selecione um campo de texto e abra o inspetor de comportamentos Clique no bot o com o sinal de adi o e escolha Definir o texto gt Definir o texto do campo de texto no menu pop up A es Na caixa de di logo Definir o texto do campo de texto escolha o campo de texto de destino no menu pop up Campo de texto Digite o texto no campo Novo texto e em seguida clique em OK Verifique se o evento padr o corresponde ao desejado Se n o corresponder escolha um outro evento no menu pop up Se eventos desejados n o forem exibidos altere o navegador de destino no menu pop up Eventos de Mostrar ocultar as camadas A a o Mostrar ocultar as camadas mostra oculta ou restaura a visibilidade padr o de uma ou mais camadas Esta a o til para mostrar informa es medida que o usu rio interage com a p gina Por exemplo medida que o usu rio passar o ponteiro do mouse sobre a imagem de uma planta uma camada poder ser disparada mostrando detalhes sobre a poca e regi o de crescimento da planta a quantidade de sol necess ria o tamanho que a planta pode atingir e assim por diante A a o Mostrar ocultar as camadas tamb m
348. ivo a ser aberto quando o item for selecionado Clique no bot o de adi o para adicionar um outro item de menu de salto Tutorial do Dreamweaver 59 60 Cap tulo 1 10 No campo Texto digite Coffee mug Caneca de caf Em seguida clique em Procurar para ir at o arquivo DW3 products mug html Clique em Selecionar no Windows ou Escolher no Macintosh para selecionar o arquivo a ser aberto quando o item for selecionado A caixa de di logo Inserir menu de salto que voc criou dever se assemelhar tela abaixo Bg a x Itens de menu S eject a product Cancelar Compact disk DW3 products cd html e DW3 prod Texto Coffee mug O Quando tiver selecionado v para a URL DW3 products mug html Procurar Abri as URLs em Janela principal E Nome do menu menut ES il Op es l Inserir o bot o Ir ap s o menu I Selecionar o primeiro item ap s a altera o da URL 1 Clique em OK para fechar a caixa de di logo 12 Salve o documento O menu de salto n o funciona na janela do documento necess rio visualiz lo em um navegador a fim de testar os v nculos Verificar o site Como j foram realizadas todas as edi es necess rias aos arquivos incompletos visualize o site inteiro em um navegador para saber qual ser a sua apar ncia 1 Coma p gina DW3 scaal home aberta pressione F12 para abri la em um navegador 2 Clique nas imagens Our Story Products e This Week
349. ivo for aberto Gerenciamento de sites 173 174 Cap tulo 5 3 Na guia Todas as informa es adicione outras chaves e valores que possam ser teis para os outros programadores do site Por exemplo denomine uma chave Autor no campo Nome e defina o valor como sendo Henfil no campo Valor Clique no bot o com o sinal de adi o para adicionar um par chave valor selecione um par e clique no bot o com o sinal de subtra o para remov lo Clique em OK para salvar as notas As notas inseridas s o salvas em uma subpasta denominada notes na mesma localiza o do arquivo O nome do arquivo ser o mesmo do arquivo do documento al m da extens o mno Por exemplo se o nome do arquivo for index html o arquivo de Design Notes a ele associado ser denominado index html mno Para adicionar Design Notes a um objeto 1 Escolha Design Notes no menu contextual do objeto Abra o menu contextual para o objeto clicando com o bot o direito do mouse no Windows ou pressionando Control e clicando no Macintosh no objeto Siga as etapas 2 a 4 para adicionar Design Notes a um documento Note que um arquivo de Design Notes de um objeto salvo em uma subpasta notes no mesmo diret rio que o arquivo de origem do objeto que n o est necessariamente no mesmo diret rio do documento no qual aparece o objeto Para atribuir um status n o contido no menu pop up Status 1 2 3 4 5 Abra as Design Notes para u
350. ixa Alinhar Editar o r tulo lt img gt Remover o r tulo lt img gt Criar v nculo Henovenowincaa Abri a p gina com v nculo Atualizar o tamanho Editar com PHOTOED Editar com Site scaal olx Arquivo Editar Exibir Site Janela Ajuda Modificado 3 FProjectstRubricALocalizatio Pasta 07 12 99 15 09 Images Pasta 2011 991513 o Library Pasta 20 11 99 15 13 EB Terri es 0712 99 1414 bia 19 11 991651 pwa ERRA 19 11 991651 19 11 99 1651 19 11 99 16 51 obten tira 29 11 99 12 14 JD Colocar 19 11 99 16 51 media 28 11 99 14 02 29 11 99 14 02 28 11 99 13 33 28 11 99 14 02 19 11 99 16 51 DEsfazera retirada Desativar somente letura inspir Localizarno site remoto myo my_s Definir como home page 29 11 99 11 30 produ E 18 11 99 18551 prode y EEES r fiszm s91651 prod EE E 19 11 99 16 51 prod Saan oeae 1911 991651 scan EELE 19 11 99 16 51 thisw Recortar 19 11 89 16551 Copiar Como utilizar o inspetor de origem de HTML O inspetor de origem de HTML exibe o c digo utilizado pelos navegadores para exibir o documento como uma p gina da Web Para mostrar ou ocultar o inspetor de origem de HT ML escolha Janela gt Origem de HTML As modifica es feitas na janela do documento ser o transpostas imediatamente para o inspetor de origem de HTML Quando voc digitar HTML no inspetor de origem de HTML e clicar fora do mesmo as altera
351. ixar as camadas na grade na p gina 247 Como exibir as r guas As r guas podem ser exibidas nas bordas superior e esquerda da p gina em pixels polegadas ou cent metros Para alterar as defini es das r guas escolha dentre as seguintes op es Para mostrar ou ocultar as r guas escolha Exibir gt R guas gt Mostrar Para alterar a origem arraste o ponto zero em dire o p gina Para definir a origem para a sua posi o padr o escolha Exibir gt R guas gt Redefinir a origem Para alterar a unidade de medida escolha Pixels Polegadas ou Cent metros no submenu Exibir gt R guas Como criar sites e documentos 103 104 Cap tulo 3 Como utilizar uma imagem de rastreamento Utilize uma imagem de rastreamento como um guia para recriar o desenho de uma p gina da qual foi feito um prot tipo em um aplicativo gr fico Uma imagem de rastreamento uma imagem JPEG GIF ou PNG que colocada no fundo da janela do documento poss vel ocultar a imagem definir a sua opacidade e alterar a sua posi o A imagem de rastreamento vis vel apenas no Dreamweaver Essa imagem nunca pode ser vista quando a p gina for exibida em um navegador Quando a imagem de rastreamento estiver vis vel a imagem e a cor do fundo n o poder o ser visualizadas na janela do documento contudo aparecer o quando a p gina for exibida em um navegador Para colocar uma imagem de rastreamento na janela do documento 1 Escol
352. janela do navegador utilizado para abrir uma URL em uma nova janela poss vel especificar as propriedades da nova janela inclusive o seu tamanho nome e atributos se ela ser redimension vel ter uma barra de menus etc Consulte Abrir a janela do navegador na p gina 320 Comportamento Definir a imagem da barra de navega o permite alterar o comportamento da barra de navega o Utilize esse comportamento para personalizar a maneira como as imagens ser o exibidas na barra de navega o Por exemplo quando o ponteiro estiver sobre um bot o a exibi o das outras imagens na barra de navega o ou no documento ser alterada Consulte Definir a imagem da barra de navega o na p gina 324 Comportamento Menu de salto utilizado para editar um menu de salto Voc pode alterar a lista do menu ou o arquivo a ele vinculado ou alterar a localiza o do navegador de onde um documento vinculado ser aberto Consulte Menu de salto na p gina 319 V nculos e navega o 137 138 Cap tulo 4 CAP TULO 5 Gerenciamento de sites O Dreamweaver o ajuda a organizar os arquivos nos sites locais e remotos Ele permite duplicar facilmente a estrutura do site local em um servidor remoto ou de um site da Web remoto no seu sistema local Os v nculos relativos criados no site local continuar o a funcionar ap s a transfer ncia de arquivos para o site remoto porque a estrutura dos dois sites ser id ntica
353. jetos salve o em uma das pastas Objects Caracteres Comuns Formul rios Molduras Cabe alho ou Invis veis Para criar um novo painel crie uma subpasta na pasta Configuration Objects e salve o arquivo nesse local As pastas adicionais contidas em qualquer subpasta do painel como as pastas criadas na subpasta Caracteres ser o ignoradas 4 Em um programa gr fico ou de edi o de imagens como o Fireworks da Macromedia crie uma imagem GIF com 18 x 18 pixels que corresponder ao cone do objeto na paleta de objetos Se a imagem criada for maior o Dreamweaver a redimensionar automaticamente para 18 x 18 pixels Caso n o seja criado um cone para o objeto o Dreamweaver inserir um cone de objeto gen rico na paleta de objetos 5 D ao cone o mesmo nome de arquivo que o do objeto e salve o no diret rio em que estiver o arquivo do objeto Por exemplo se o objeto se chamar Copyright DCD htm e tiver sido salvo no diret rio Comuns denomine o cone Copyright DCD gif e salve esse arquivo no mesmo diret rio 6 Reinicie o Dreamweaver para utilizar o novo objeto O objeto aparecer na parte inferir do menu Inserir e tamb m na paleta de objetos Como personalizar o Dreamweaver 389 390 Cap tulo 16 Como alterar o tipo de arquivo padr o Como padr o o Dreamweaver mostra todos os tipos de arquivos que reconhece na caixa de di logo Arquivo gt Abrir Voc poder usar um menu pop up na caixa de di logo para limi
354. l no in cio de cada cap tulo subsegiiente para determinar se os t picos podem lhe interessar Para os designers da Web experientes familiarizados com o Dreamweaver 1 Inicie lendo Novidades do Dreamweaver 3 na p gina 16 Siga as refer ncias cruzadas nesta se o para as outras que abrangem os novos recursos do Dreamweaver N o deixe de ler estas se es sobre os novos recursos importantes Sobre a paleta de hist rico na p gina 95 Como editar um r tulo HTML na janela do documento na p gina 340 Como formatar o texto com os estilos HTML na p gina 184 Como sincronizar os arquivos nos sites local e remoto na p gina 154 Sobre as Design Notes na p gina 172 Limpar o HTML do Microsoft Word na p gina 352 Talvez voc queira examinar Princ pios b sicos do Dreamweaver na p gina 61 para aprender os novos aspectos da interface do usu rio do Dreamweaver Al m disso se estiver interessado em personalizar e estender os recursos do Dreamweaver leia Como personalizar o Dreamweaver na p gina 387 Conven es tipogr ficas As seguintes conven es tipogr ficas s o utilizadas neste guia da Fonte do c digo indica os nomes de r tulos e atributos HTML bem como o texto utilizado nos exemplos Fonte do c digo em it lico indica os itens substitu veis s vezes chamados de metass mbolos no c digo Texto romano em negrito indica o texto a ser expandid
355. la Site e no submenu Site gt Abrir o site Use a sua imagina o para escolher o nome e No campo Pasta raiz local especifique a pasta do disco local onde ser o armazenados os arquivos modelos e itens de biblioteca do site O Dreamweaver resolve os v nculos relativos raiz levando em conta esta pasta Consulte Sobre os caminhos relativos raiz na p gina 112 Clique no cone correspondente pasta para procurar e selecionar a pasta ou digite um caminho e o nome da pasta no campo de texto Se a pasta raiz local ainda n o existir crie a na caixa de di logo de busca de arquivos Observe que se voc estiver utilizando um Macintosh sem os Servi os de navega o instalados pode n o ser poss vel criar uma pasta nesta caixa de di logo e Na op o Atualizar a lista de arquivos locais automaticamente indique se deseja atualizar automaticamente a lista de arquivos locais cada vez que copiar arquivos para o site local O cancelamento desta op o aumentar a velocidade com que o Dreamweaver copia estes arquivos por m quando esta op o n o estiver selecionada o painel Local da janela do site deixar de ser automaticamente atualizado Para atualizar manualmente a janela do site clique no bot o Atualizar situado nesta janela Para atualizar manualmente o painel Local apenas escolha Exibir gt Atualizar o local na janela do site no Windows ou Site gt Exibir os arquivos do site gt Atualizar o local no Macintos
356. las Escolha Editar gt Limpar ou pressione a tecla Delete Nota Se todas as c lulas em uma linha ou coluna forem selecionadas a linha ou coluna n o apenas o seu conte do ser removida da tabela Para copiar e colar o conte do das c lulas 1 2 Selecione o texto e escolha Editar gt Copiar apenas o texto Apenas o texto das c lulas selecionadas ser copiado na rea de transfer ncia Clique em uma nica c lula ou em algum lugar na janela do documento e escolha Editar gt Colar como texto N o poss vel colar a sele o em v rias c lulas escolhidas Como criar tabelas 227 228 Cap tulo 8 Como redimensionar as tabelas e c lulas poss vel redimensionar a tabela inteira ou determinadas linhas e colunas Quando a tabela inteira for redimensionada todas as c lulas ser o alteradas proporcionalmente Para redimensionar a tabela 1 Selecione a tabela 2 Arraste uma das al as de sele o para redimensionar a tabela em rela o a esta dimens o Quando as al as dos cantos forem arrastadas ambas as dimens es ser o redimensionadas Para alterar o tamanho de uma linha ou coluna siga um dos procedimentos abaixo e Para alterar a altura da linha arraste a borda inferior da mesma e Para alterar a largura de uma coluna arraste a borda direita da mesma Como alterar a largura das colunas O inspetor de propriedades permite especificar a largura de uma coluna de tr s maneiras Para
357. leta de hist rico na p gina 95 ou Como utilizar o inspetor de origem de HTML na p gina 339 Como personalizar o Iniciador Utilize as prefer ncias das paletas flutuantes para determinar os itens que aparecer o no Iniciador e no Mini iniciador situados na parte inferior da janela do documento Para especificar as paletas flutuantes que aparecer o no Iniciador e no Mini iniciador 1 Escolha Editar gt Prefer ncias e em seguida selecione Paletas flutuantes na lista de categorias Os itens selecionados para a exibi o no Iniciador e no Mini iniciador est o listados na caixa Mostrar no Iniciador Como padr o h sete itens listados 2 Para adicionar um item ao Iniciador e ao Mini iniciador clique no bot o com o sinal de adi o 3 Para remover um item do Iniciador e do Mini iniciador realce o e clique no bot o com o sinal de subtra o 4 Para mover um item para cima ou para baixo na lista o que corresponde a mov lo respectivamente para a esquerda ou direita no Iniciador e no Mini iniciador selecione o item e em seguida clique nas teclas de seta 5 Clique em OK O Iniciador e o Mini iniciador ser o alterados exibindo os itens especificados Princ pios b sicos do Dreamweaver 67 68 Cap tulo 2 Como utilizar a paleta de objetos A paleta de objetos cont m bot es para inserir objetos como tabelas camadas e imagens Para mostrar ou ocultar a paleta de objetos escolha Janela
358. letor CSS n o aparecem na paleta de estilos CSS porque s o aplicados automaticamente a qualquer texto controlado pelo r tulo ou seletor especificado Caso seja conveniente recortar e colar estilos personalizados que podem ser reutilizados mas n o atualizados e personalizados utilize a paleta de estilos HTML Escolha Janela gt Estilos CSS para exibir a paleta de estilos CSS Aplicar a exibe o r tulo da sele o atual Escolha um r tulo no menu pop up para selecionar uma op o diferente Abrir a folha de estilos abre a caixa de di logo Editar a folha de estilos Edite os estilos no documento atual ou em uma folha de estilos remota Consulte tamb m Como formatar o texto com as folhas de estilos CSS na p gina 188 Nota Clique com o bot o direito do mouse no Windows ou pressione a tecla Control e clique no Macintosh na paleta de estilos CSS para abrir um menu contextual que inclui os comandos Novo Editar Duplicar Excluir e Aplicar Como definir as prefer ncias de formato de folhas de estilos As prefer ncias de formato das folhas de estilos CSS controlam a maneira como o Dreamweaver grava o c digo que define os estilos CSS Esses estilos podem ser gravados de forma abreviada com a qual algumas pessoas acham mais f cil trabalhar Algumas vers es mais antigas dos navegadores n o interpretam corretamente o formato abreviado A menos que voc prefira que o Dreamweaver grave os estilos de forma abreviada n o
359. lgumas vezes os criadores colocam todos os itens a serem utilizados em um site e que n o forem HTML em uma pasta denominada Assets poss vel que esta pasta contenha outras pastas por exemplo para imagens filmes Shockwave e arquivos de som Alternativamente poss vel que haja uma pasta Assets para cada grupo de p ginas relacionadas no site se os diversos grupos n o compartilharem muitos recursos Site 1 Site 2 my site1 root folder my site2 root folder About the Company About the Company Catalog Assets Assets for whole site Catalog index html home page Assets index html home page Utilize a mesma estrutura para os sites locais e remotos Idealmente o site local e o site remoto na Web dever o ter exatamente a mesma estrutura Se voc criar um site local utilizando o Dreamweaver e em seguida carregar tudo para o site remoto o Dreamweaver se encarregar de duplicar com exatid o a estrutura local no site remoto Como criar sites e documentos 75 76 Cap tulo 3 Como planejar a navega o no site Um outro aspecto em que o planejamento de sites apresenta vantagens a navega o medida que cria o seu site pense na experi ncia que voc deseja proporcionar aos visitantes Voc est aqui E necess rio que os visitantes possam saber em que local do seu site eles est o a qualquer momento e como retornar p gina de n vel superior Como buscar e ndices necess rio que
360. lha Modificar gt Modelos gt Nova regi o edit vel Aparecer a caixa de di logo Nova regi o edit vel 4 No campo Nome digite Image como nome desta regi o do modelo Menera l Cancelar Ajuda 5 Clique em OK Note que o texto passou a ficar real ado o que indica que esta uma regi o edit vel do modelo 6 Na janela do documento selecione Scaal Sound e em seguida escolha Modificar gt Modelos gt Nova regi o edit vel para tornar edit vel esta regi o do modelo 7 No campo Nome da caixa de di logo Nova regi o edit vel digite Name e em seguida clique em OK Na janela do documento a regi o passar a ser real ada e identific vel pelo nome que voc deu 8 Na janela do documento selecione o texto de descri o do produto e em seguida escolha Modificar gt Modelos gt Nova regi o edit vel para tornar edit vel esta se o do modelo 9 No campo Nome da caixa de di logo Nova regi o edit vel digite Description e em seguida clique em OK Na janela do documento a regi o passar a ser real ada e identific vel pelo nome que voc deu 10 Escolha Arquivo gt Salvar para que o modelo seja salvo Aparecer a caixa de di logo Atualizar as p ginas perguntando se deseja atualizar todos os documentos no site local A sele o da op o Sim atualizar as p ginas no site completo da Scaal que voc n o deseja atualizar 1 Clique em N o e em seguida em Fechar p
361. lha um editor externo no menu contextual e Selecione a imagem que ser editada e clique em Editar a imagem no inspetor de propriedades e Clique duas vezes no arquivo de imagem na janela do site para iniciar o editor de imagens prim rio Se n o for especificado um editor de imagens o Dreamweaver iniciar o editor padr o para o tipo de arquivo Como inseririmagens 205 206 Cap tulo 7 Nota Quando uma imagem for aberta na janela do site os recursos de integra o do Fireworks descritos acima n o estar o em vigor e o Fireworks n o abrir o arquivo PNG original Para poder utilizar os recursos de integra o do Fireworks abra as imagens a partir da janela do documento Como definir as prefer ncias do editor de imagens externo As prefer ncias podem ser definidas para que o Dreamweaver inicie automaticamente aplicativos diferentes para editar tipos de imagens distintos Por exemplo o Dreamweaver pode ser instru do a iniciar o Fireworks ao editar um GIF Para definir um editor de imagens externo para um tipo espec fico de arquivo 1 Escolha Editar gt Prefer ncias e selecione Editores externos 2 Clique no bot o com sinal de adi o acima da lista de extens es 3 Digite a extens o do nome de arquivo do tipo de imagem a ser editada por exemplo gif ou selecione uma op o da lista de extens es 4 Clique no bot o com sinal de adi o acima da lista de editores 5 Na caixa de di logo que apar
362. lho 2 E i ao par grafo 3 Aplicar o Cabe alho 3 i id ao par grafo 4 Aplicar o Cabe alho 4 j ao par grafo 5 Aplicar o Cabe alho 5 Excluir a coluna da i d ao par grafo tabela 6 Aplicar o Cabe alho 6 Selecionar o r tulo pai hd ao par grafo 7 Selecionar o r tulo filho x 8 Remover o recuo Diminuir a extens o da h Mover para tr s coluna em tabelas Tornar as larguras das camadas iguais em camadas 9 Recuo Avan ar Aumentar a extens o da x coluna em tabelas Tornar as alturas das camadas iguais em camadas Atalhos de teclado 421 Caractere do Control no Control Shift no Control Alt Control Shift Alt teclado Windows ou Windows ou no Windows ou no Windows ou Command no Command Shift Command Command Macintosh no Macintosh Option no Shift Option no Macintosh Macintosh sinal de Reduzir o zoom do x ia subtra o e mapa do site _ sublinhado e Ajustar janela Aumentar o zoom do d d mapa do site e e ponto e gt Parar o plug in ei i v rgula E ka hi e lt e a e 4 e n Ka Ve Barra de espa o Atualizar o layout da Inserir um espa o n o tabela separ vel no Windows Option barra de espa o no Macintosh Tecla de Nenhum Shift Alt no Control no Control Control Control fun o modificador Windows ou
363. lize a op o Localizar em para especificar os arquivos a serem localizados A escolha de Documento atual restringe a busca ao documento ativo Esta op o estar dispon vel apenas quando for escolhida Localizar ou substituir na janela do documento ou no menu contextual do inspetor de origem de HTML A escolha de Arquivos selecionados restringe a busca aos arquivos e pastas que estiverem selecionados na janela do site Esta op o est dispon vel apenas quando uma das op es Localizar ou Substituir tiver sido escolhida na janela do site ativa isto na frente da janela do documento A escolha de Site atual expande a busca para todos os documentos HTML arquivos de biblioteca e documentos de texto localizados no site Ap s a escolha de Site atual o nome deste aparecer direita do menu pop up Se este n o for o site no qual deseja efetuar a busca escolha um outro site no menu pop up Sites atuais na janela do site A escolha de Pasta restringe a busca a um grupo espec fico de arquivos Ap s escolher a pasta clique no cone correspondente pasta para procurar e selecionar o diret rio no qual ser efetuada a busca Utilize a op o Localizar para especificar o tipo de busca a ser efetuada A escolha de Texto permite procurar determinadas seqii ncias de texto na janela do documento Uma busca de texto ignora qualquer HTML que interrompa a sequ ncia Por exemplo uma busca de o c o preto coincidiria com o c o pre
364. lize automaticamente os arquivos conforme forem adicionados e exclu dos selecione a op o Atualizar automaticamente a lista de arquivos remotos para aumentar a velocidade de c pia de arquivos para o site remoto n o selecione essa op o Para atualizar manualmente a janela do site a qualquer momento clique no bot o Atualizar na janela do site Clique em OK e ignore o restante desse procedimento Nota Para atualizar manualmente apenas o painel remoto escolha Exibir gt Atualizar o remoto na janela do site no Windows ou Site gt Exibi o dos arquivos do site gt Atualizar o remoto no Macintosh Utilize a op o FTP se a conex o ao servidor da Web for estabelecida atrav s do protocolo FTP Digite o nome do host de FTP ao qual deseja carregar os arquivos do site da Web O nome do host de FTP o nome completo da Internet de um sistema de computador como ftp mindspring com ou shelll6 ba best com Digite o nome completo do host sem qualquer texto adicional especialmente n o adicione um nome de protocolo antes do nome do host Por exemplo Correto ftp mindspring com Errado ftp ftp mindspring com Errado mindspring com Digite o nome do diret rio do host no site remoto onde ser o armazenados os documentos que estar o vis veis para o p blico tamb m conhecido como raiz do site Consulte Como determinar o diret rio raiz do site remoto na p gina 142 Por exemplo o diret rio do host do site dreamc
365. lo utilize a tecla Tab as teclas de seta e a barra de espa o para mover o ponto de inser o at onde o atributo deve ser adicionado Comece a digitar um nome de atributo v lido para o r tulo O menu suspenso de sugest es aparecer quando houver uma pausa na digita o como na edi o de atributos 7 Continue a editar e adicionar nomes e valores de atributos conforme desejar 8 No final da edi o do r tulo saia do Quick Tag Editor escolhendo um dos seguintes procedimentos e Para sair e descartar todas as altera es que ainda n o tiverem sido aplicadas pressione a tecla Esc Se for utilizado o modo Editar o r tulo com a op o Aplicar as modifica es durante a edi o selecionada todas as altera es que j tiverem sido aplicadas ser o mantidas e Para sair e aplicar todas as altera es pressione a tecla Enter no Windows ou Return no Macintosh ou clique fora do Quick Tag Editor 9 Se for utilizado qualquer HTML inv lido no Quick Tag Editor o Dreamweaver tentar corrigi lo inserindo aspas de fechamento e de sinais de maior onde for necess rio Para selecionar o r tulo pai recipiente do r tulo Siga um dos procedimentos abaixo e Pressione as teclas Control Shift e lt no Windows ou as teclas Command Shift e lt no Macintosh e Escolha Editar gt Selecionar o r tulo pai Para selecionar o primeiro r tulo filho contido no r tulo Siga um dos procedimentos abaixo e Pressio
366. logo Prefer ncias Sobre as ASP As ASP Active Server Pages da Microsoft constituem uma maneira de combinar HTML roteiros gravados em JavaScript ou VBScript e controles ActiveX a fim de trabalhar dinamicamente com HT ML Quando um navegador solicita uma p gina ASP ao Microsoft Web Server o servidor interpreta o c digo ASP e envia o HTML resultante ao navegador Para obter mais informa es sobre as ASP consulte as p ginas de vis o geral das ASP da Microsoft conforme a descri o em Recursos de tecnologias de Web e HTML na p gina 19 Um bloco de c digo ASP inicia com lt e termina com gt Se a op o Exibir gt Elementos invis veis estiver selecionada o Dreamweaver mostrar um cone de ASP na janela do documento para marcar a localiza o do c digo ASP Sobre as JSP As JSP JavaServer Pages da Sun fornecem um modo com base em Java para trabalhar dinamicamente com um conte do HTML ou um outro da Web Quando um navegador solicita uma p gina JSP de um servidor habilitado para JSP este interpreta o c digo JSP e envia o HTML resultante para o navegador Para obter mais informa es sobre JSP consulte a P gina JSP da Sun conforme a descri o em Recursos de tecnologias de Web e HTML na p gina 19 Um bloco de c digo JSP inicia com lt e termina com gt Sobre o PHP PHP que significa PHP Hypertext Preprocessor uma linguagem de cria o de roteiros de servidor Quando um navegador
367. lores padr o de posicionamento e tamanho s o expressos em pixels px Tamb m poss vel especificar as seguintes unidades pc paicas pt pontos pol polegadas mm mil metros cm cent metros ou percentagem do valor da camada m e As abreviaturas devem se seguir ao valor sem um espa o por exemplo 3mm A defini o Estouro controla como as camadas CSS reagir o quando o conte do exceder o tamanho da camada ndice Z determina o ndice z a ordem de empilhamento da camada As camadas com n meros mais elevados aparecer o acima das camadas com n meros menores Os valores podem ser positivos ou negativos mais f cil alterar a ordem de empilhamento das camadas utilizando a paleta de camadas do que digitando valores espec ficos ao ndice z Consulte Como alterar a ordem de empilhamento de camadas na p gina 248 As camadas da Netscape que cont m os r tulos LAYER ou ILAYER tamb m podem ser empilhadas em rela o a outras camadas na p gina Quando voc selecionar uma camada da Netscape aparecer o duas outras op es no canto inferior direito do inspetor de propriedades Utilize a op o A B para selecionar uma posi o de empilhamento relativa e em seguida escolha o nome de outra camada no menu pop up direita A especifica uma camada acima da atual B especifica uma camada abaixo da atual Vis determina o modo inicial de exibi o da camada Utilize uma linguagem de cria o de roteiros como J
368. los HTML 3 Na paleta de estilos HT ML clique com o bot o direito do mouse no Windows ou pressione a tecla Control e clique no Macintosh no estilo e em seguida escolha Editar no menu contextual Aparecer a caixa de di logo Definir o estilo HT ML Para voltar s op es padr o clique em Limpar Quando um estilo HTML for editado o Dreamweaver n o atualizar automaticamente o texto que tiver sido formatado com esse estilo anteriormente Se for necess rio atualizar a formata o aplicada com um estilo utilize a folha de estilos CSS consulte Como formatar o texto com as folhas de estilos CSS na p gina 188 Como formatar o texto 187 188 Cap tulo 6 Para compartilhar os estilos HTML com outros sites ou usu rios 1 Escolha Janela gt Arquivos do site a fim de abrir a janela do site na exibi o Arquivos do site 2 No painel direita abra a pasta raiz do site e em seguida a pasta Biblioteca Voc notar um arquivo chamado styles xml que cont m todos os estilos HTML para o seu site Esse arquivo pode ser colocado obtido devolvido retirado e copiado como qualquer outro no site Para o arquivo styles xml tamb m poder o ser criadas Design Notes Observe que necess rio retirar primeiro o arquivo styles xml para poder criar ou editar um estilo de um site remoto Para obter mais informa es sobre a utiliza o destas op es consulte Como configurar um site remoto na p gina 140
369. lquer elemento que puder ser colocado no corpo de um documento HTML tamb m poder ser colocado em uma camada As camadas proporcionam aos designers de p ginas da Web um controle preciso a n vel de pixels sobre o posicionamento exato dos elementos A coloca o dos elementos da p gina em camadas permite determinar quais objetos aparecem na frente de outros e quais est o fora de lugar ou ocultos Pode ser utilizada tamb m uma linha de tempo para mover uma ou diversas camadas simultaneamente sobre uma tela No Dreamweaver podem ser utilizados dois formatos de camadas para posicionar o conte do em uma p gina Camadas CSS e da Netscape e As camadas CSS tamb m conhecidas como elementos P CSS posicionam o conte do em uma p gina utilizando os r tulos DIV e SPAN As propriedades das camadas CSS s o definidas pela norma Como posicionar elementos HTML com folhas de estilo em cascata CSS do World Wide Web Consortium e As camadas da Netscape posicionam o conte do em uma p gina utilizando os r tulos LAYER e ILAYER da Netscape As propriedades das camadas da Netscape s o definidas pelo formato de camadas patenteado pela Netscape Tanto o Microsoft Internet Explorer 4 0 como o Netscape Navigator 4 0 oferecem suporte s camadas criadas com os r tulos DIV e SPAN Apenas o Navigator oferece suporte s camadas criadas com os r tulos LAYER e ILAYER As vers es mais antigas dos dois navegadores exibir o o conte do de uma camada
370. lu o dependendo das op es de prefer ncia definidas consulte Como definir as prefer ncias de FTP do site na p gina 146 Como obter e colocar os arquivos Se voc estiver trabalhando em um ambiente com v rios usu rios utilize o sistema de devolu o e retirada para transferir os arquivos entre os sites local e remoto consulte Como utilizar o sistema de devolu es e retiradas na p gina 148 Caso esteja trabalhado sozinho no site remoto poss vel utilizar em vez do sistema mencionado os comandos Obter e Colocar para transferir os arquivos sem devolver ou retir los Nota Se for selecionado Site gt Obter ou Site gt Colocar enquanto a janela do documento estiver ativa e o arquivo n o fizer parte do site que estiver aberto o Dreamweaver tentar determinar a qual dos sites definidos localmente pertence o arquivo se ele pertencer a apenas um site local o Dreamweaver abrir esse site e em seguida executar a opera o de obten o ou coloca o Como obter os arquivos de um servidor remoto Obter os arquivos copia os de um site remoto para o site local Se for utilizado o sistema de devolu o e retirada isto se Ativar a devolu o e a retirada de arquivos estiver acionada o comando Obter produzir uma c pia local somente de leitura do arquivo os arquivos continuar o dispon veis no site remoto para os outros membros da equipe retir los Se a op o Ativar a devolu o e retirada
371. lu do e siga um dos procedimentos abaixo Digite o texto na tabela As c lulas da tabela se expandir o automaticamente medida que o texto for digitado Cole o texto copiado de outro documento Utilize o comando Colar como texto para manter os marcadores de par grafos Consulte Como adicionar texto e inserir objetos na p gina 86 Pressione a tecla Tab para deslocar se para a pr xima c lula ou as teclas Shift Tab para voltar c lula anterior Quando a tecla Tab for pressionada na ltima c lula de uma tabela ser adicionada automaticamente outra linha tabela poss vel utilizar tamb m as teclas de seta para mover se entre as c lulas Para adicionar uma imagem a uma tabela 1 2 Clique na c lula na qual ser inserida a imagem Clique no bot o Inserir imagem no painel Comuns da paleta de objetos ou escolha Inserir gt Imagem Na caixa de di logo Selecionar a origem da imagem escolha um arquivo de imagem Para obter informa es sobre a defini o das propriedades da imagem consulte Como definir as propriedades da imagem na p gina 201 Como criar tabelas 217 218 Cap tulo 8 Como importar os dados da tabela Os dados criados em outro aplicativo como o Microsoft Excel e salvos em um formato delimitado separados por tabula es v rgulas dois pontos ponto e v rgula ou outros delimitadores podem ser importados para o Dreamweaver e reformatados como uma tabela Pa
372. lugares aparecer um alerta informando lhe que a sincroniza o n o ser necess ria 7 Na caixa de di logo Sincronizar os arquivos verifique quais arquivos deseja excluir colocar e obter Se n o desejar que o Dreamweaver exclua coloque ou obtenha um determinado arquivo desmarque o clicando na caixa de sele o esquerda do mesmo na coluna A o Gerenciamento desites 155 156 Cap tulo 5 8 Clique em OK Os arquivos ser o automaticamente transferidos e exclu dos conforme a necessidade e o Dreamweaver atualizar o status na caixa de di logo Sincronizar os arquivos 9 Para salvar as informa es relativas verifica o em um arquivo local clique em Salvar o registro Como buscar e substituir poss vel buscar um arquivo nos sites local e remoto a partir das janelas do documento e do site Para exibir a janela do site escolha Janela gt Arquivos do site poss vel realizar uma busca de texto texto circundado por determinados r tulos ou r tulos e atributos HTML no documento atual em arquivos selecionados em um diret rio ou no site inteiro Observe que ser o utilizados comandos diferentes para buscar arquivos e texto e ou HTML nos arquivos Localizar no site local e Localizar no site remoto buscam arquivos enquanto que Editar gt Localizar e Editar gt Substituir procuram texto e r tulos nos arquivos Nota Se for selecionado Site gt Localizar no site local ou Site gt Localizar no site re
373. lula da linha ou coluna que ser exclu da Escolha uma das seguintes op es Para excluir uma linha escolha Modificar gt Tabela gt Excluir a linha ou escolha Tabela gt Excluir a linha no menu contextual Para excluir uma coluna escolha Modificar gt Tabela gt Excluir a coluna ou escolha Tabela gt Excluir a coluna no menu contextual Para adicionar ou excluir linhas ou colunas a partir da base ou da direita de uma tabela 1 Selecione a tabela inteira Clique no canto superior esquerdo da tabela ou clique uma vez na tabela e escolha Modificar gt Tabela gt Selecionar a tabela No inspetor de propriedades siga um dos procedimentos abaixo Aumente o valor da linha ou coluna para adicionar linhas Diminua o valor da linha ou coluna para excluir linhas O Dreamweaver adicionar e remover as linhas da base da tabela e isso adicionar e remover colunas direita O Dreamweaver n o avisar quando as linhas ou colunas que cont m dados estiverem sendo exclu das Como aninhar as tabelas Uma tabela aninhada aquela que est dentro de outra Uma tabela aninhada pode ser configurada como qualquer outra tabela contudo a sua largura est limitada pela largura da c lula na qual ela aparece Para aninhar uma tabela na c lula de uma tabela 1 Siga um dos procedimentos abaixo e Clique na c lula onde dever ser inserida a segunda tabela e escolha Inserir gt Tabela e Clique na c lula onde
374. m anteriormente atualizar o as suas refer ncias ao novo nome Se voc clicar em N o os documentos que fizerem refer ncia ao item com o nome antigo n o atualizar o automaticamente as suas refer ncias ao novo nome Para excluir um item de uma biblioteca 1 2 3 Escolha Janela gt Biblioteca ou clique no bot o Biblioteca no Iniciador Selecione um item na paleta de bibliotecas Clique no cone de lata de lixo ou pressione a tecla Delete A exclus o de um item remove o da biblioteca mas n o altera o conte do dos documentos Modelos e bibliotecas 375 376 Cap tulo 14 Como tornar os itens de biblioteca edit veis em 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 v nculo entre o item no documento e a biblioteca Quando a ocorr ncia do item de biblioteca tornar se edit vel essa inst ncia n o poder ser atualizada na biblioteca Para tornar edit vel um item de biblioteca 1 Selecione um item de biblioteca no documento atual 2 Siga um dos procedimentos abaixo e Clique em Desanexar do original no inspetor de propriedades e No menu contextual escolha Desanexar do original Como editar um comportamento em um item de biblioteca Quando forem criados itens de biblioteca contendo elementos com anexos de comportamentos o Dreamweaver copiar o elemento e o seu manipulador de evento o atributo que especific
375. m ser utilizado s para mover um ou v rios pontos ativos simultaneamente O comando Modificar gt Camadas e pontos ativos tamb m pode ser utilizado para alinhar os pontos ativos traz los para a frente ou coloc los para tr s ou fazer com que tenham a mesma largura e altura Se dois pontos ativos ficarem sobrepostos o primeiro ponto ativo o dominante Como configurar as propriedades dos pontos ativos As propriedades listadas abaixo aparecem no inspetor de propriedades quando um ponto ativo for selecionado Mapa especifica o nome do mapa de imagens Crie um nome exclusivo para cada mapa de imagens de um documento V nculo especifica o arquivo ou URL a ser exibido quando o usu rio clicar no ponto ativo Se for utilizado um arquivo digite um caminho relativo ao documento Os nomes de arquivos iniciados por file n o s o relativos Destino especifica a moldura ou janela na qual a p gina vinculada dever ser carregada A op o de destino n o estar dispon vel at que o ponto ativo selecionado contenha um v nculo Os nomes de todas as molduras no documento atual aparecer o na lista Se a moldura especificada n o existir quando o documento for aberto em um navegador a p gina vinculada ser carregada em uma nova janela que tem o nome que voc especificou Podem ser escolhidos tamb m os seguintes nomes de destino reservados e blank carrega o arquivo vinculado em uma janela do navegador nova e sem nome e par
376. m a apar ncia geral do documento As cores do texto ajudam os usu rios a distinguir entre texto comum e hipertexto e tamb m a examinar quais v nculos foram ou n o visitados Como alterar o t tulo de uma p gina O t tulo de uma p gina HTML ajuda os usu rios a controlar o que est o exibindo enquanto navegam ele serve tamb m para identificar a p gina nas listas de hist rico e marcadores Se uma p gina n o for intitulada ela aparecer na janela do navegador e nessas listas como um Documento sem t tulo Observe que o ato de salvar um documento e lhe dar um nome n o corresponde ao ato de dar um t tulo a uma p gina Para alterar o t tulo de uma p gina 1 Siga um dos procedimentos abaixo e Escolha Modificar gt Propriedades da p gina e No menu contextual escolha Propriedades da p gina clicando com o bot o direito do mouse no Windows ou pressionando a tecla Control e clicando na janela do documento no Macintosh e Escolha Exibir gt Conte do do cabe alho e quando aparecer clique no bot o T tulo Abra o inspetor de propriedades para editar o t tulo 2 Digite o t tulo da p gina na caixa T tulo 3 Se estiver utilizando a caixa de di logo Propriedades da p gina em vez do inspetor de propriedades clique em OK O t tulo aparecer na barra de t tulo da janela do documento O nome do arquivo da p gina e a pasta na qual o arquivo ser salvo aparecer o entre par nteses ao lado do t tulo Com
377. m arquivo ou objeto Clique na guia Todas as informa es Clique no bot o com o sinal de adi o No campo Nome digite a palavra status No campo Valor digite o status Se j existir um valor de status ele ser substitu do pelo novo valor Clique na guia Informa es b sicas e observe que o valor do novo status aparecer no menu pop up Status Nota E poss vel constar apenas um novo valor no menu de status de cada vez Se esse procedimento for realizado novamente o novo valor do status inserido na primeira vez ser substitu do pelo novo valor inclu do posteriormente Para desativar as Design Notes 1 2 3 4 Escolha Site gt Definir os sites Na caixa de di logo Definir os sites selecione o site e clique em Editar Na caixa de di logo Defini o do site clique em Design Notes Desmarque Manter as Design Notes O cancelamento da sele o dessa op o desativa o recurso Design Notes Se esta op o for desmarcada e em seguida voc clicar em Limpar todos os arquivos de Design Notes do site ser o exclu dos Clique em OK Aparecer uma caixa de di logo perguntando se voc gostaria de excluir os arquivos de Design Notes existentes Clique em Sim para exclu los ou em N o para manter esses arquivos Para utilizar as Design Notes apenas localmente 1 2 3 4 Escolha Site gt Definir os sites Na caixa de di logo Definir os sites selecione o site e clique em Editar Na caixa
378. m filme Flash 1 Na janela do documento coloque o ponto de inser o onde deseja inserir o filme 2 Clique no bot o Flash na paleta de objetos 3 Na caixa de di logo que aparecer selecione um arquivo de filme Flash 4 No inspetor de propriedades digite a largura e altura do filme nas caixas L e U Estas s o as nicas propriedades necess rias Consulte Propriedades dos filmes Flash na p gina 288 para obter mais informa es sobre as outras propriedades Propriedades dos filmes Flash Para garantir os melhores resultados tanto no Internet Explorer como no Netscape Navigator o Dreamweaver insere os filmes Flash utilizando os r tulos OBJECT e EMBED OBJECT o r tulo definido pela Microsoft para os controles ActiveX enquanto que EMBED o r tulo definido pela Netscape para os plug ins Para exibir as seguintes propriedades no inspetor de propriedades selecione um filme Flash O inspetor de propriedades inicialmente exibir as propriedades mais comumente utilizadas Clique na seta de expans o situada no canto inferior direito para examinar todas as propriedades Nome especifica um nome que identificar o filme para a cria o de roteiros Digite um nome no campo sem t tulo extrema esquerda do inspetor de propriedades L e U especificam a largura e altura do filme em pixels Tamb m poss vel especificar as seguintes unidades pc paicas pt pontos pol polegadas mm mil metros cm c
379. m v nculo ele n o o leva ao documento vinculado O arquivo associado a um v nculo pode ser aberto no Dreamweaver para edi o mas os v nculos devem ser testados em um navegador Consulte Como testar o site na p gina 166 Para testar os v nculos em um navegador Escolha Arquivo gt Visualizar no navegador ou clique em F12 Voc deve visualizar as suas p ginas em um navegador para testar os seus v nculos Para abrir documentos vinculados no Dreamweaver siga um dos procedimentos abaixo e Selecione o v nculo e escolha Modificar gt Abrir a p gina vinculada e Pressione a tecla Control no Windows ou Command no Macintosh e clique duas vezes no v nculo Nota necess rio que o documento vinculado resida no disco local Como anexar comportamentos a v nculos Um comportamento pode ser anexado a qualquer v nculo em um documento Considere a possibilidade de utilizar os seguintes comportamentos ao inserir elementos vinculados em seus documentos Definir a mensagem de status mostra uma mensagem na barra de status na parte inferior esquerda da janela do navegador Por exemplo poss vel utilizar esta a o para descrever o destino de um v nculo na barra de status em vez de mostrar a URL a ele associada Para ver um exemplo de mensagem de status passe o mouse sobre qualquer um dos bot es de navega o nas p ginas da Ajuda do Dreamweaver Consulte Definir a mensagem de status na p gina 327 Abrir a
380. ma c pia impressa da matriz para refer ncia futura 5 Se um atalho de teclado receber uma nova atribui o procure o item de menu ao qual o atalho foi designado e remova o atributo KEY shortcut do item de menu 6 Localize o item de menu para o qual ser designado o atalho de teclado 7 Seo item de menu j tiver um atalho de teclado procure o atributo key nesta linha Caso contr rio adicione KEY em qualquer posi o dentro do r tulo MENUITEM 8 Entre as aspas do atributo KEY digite o novo atalho de teclado Utilize um sinal de adi o entre as teclas modificadoras e entre os modificadores e as teclas de letras Para obter mais informa es consulte Sobre a sintaxe dos itens de menu na p gina 393 Se o atalho de teclado estiver em uso em outro local e caso n o tiver sido removida a outra utiliza o o atalho ser aplicado apenas ao primeiro item de menu ao qual foi atribu do no menus xml Nota Se desejar voc poder utilizar o mesmo atalho de teclado para um item de menu apenas do Macintosh e para outro apenas do Windows 9 Grave o novo atalho no local apropriado da Matriz de Atalhos de Teclado Como alterar o nome de um item de menu O nome de qualquer de menu pode ser alterado facilmente Para alterar o nome de um item de menu 1 Saia do Dreamweaver 2 Fa a uma c pia de seguran a do arquivo menus xml 3 Abra o arquivo menus xml em um editor de texto como BBEdit HomeSite ou Wordpad
381. ma marca de sele o verde Se um arquivo for acompanhado por uma marca de sele o vermelha porque outro usu rio o retirou n o devolva esses arquivos Um s mbolo de cadeado indica um arquivo somente de leitura no Windows ou bloqueado no Macintosh Os novos arquivos n o cont m nem uma marca de sele o nem um s mbolo de cadeado ao lado 3 Para carregar os arquivos dependentes juntamente com o arquivo selecionado clique em Sim no aviso Para que os arquivos dependentes n o sejam carregados clique em N o sempre conveniente carregar os arquivos dependes ao devolver um novo arquivo mas se as vers es mais recentes dos dependentes j estiverem no servidor remoto n o ser preciso carreg los novamente Para desfazer a retirada de um arquivo Selecione o arquivo e escolha Site gt Desfazer a retirada ou clique com o bot o direito do mouse no Windows ou pressione Control e clique no Macintosh no arquivo e escolha Desfazer a retirada no menu contextual A c pia local do arquivo se tornar somente de leitura e quaisquer altera es feitas ser o perdidas Nota Um arquivo que estiver ativo na janela do documento tamb m poder ser devolvido e retirado Na janela do documento escolha Site gt Devolver ou Site gt Retirar Se o arquivo ativo for retirado a vers o aberta deste ser substitu da pela nova vers o retirada Se o arquivo ativo for devolvido ele dever ser automaticamente salvo antes da devo
382. macromedia DREAMWEAVER 3 Usando o Dreamweaver macromedia Marcas comerciais Macromedia o logotipo Macromedia o logotipo Made With Macromedia Authorware Backstage Director Extreme 3D e Fontographer s o marcas comerciais registradas e Afterburner AppletAce Authorware Interactive Studio Backstage Backstage Designer Backstage Desktop Studio Backstage Enterprise Studio Backstage Internet Studio DECK II Director Multimedia Studio Doc Around the Clock Extreme 3D Flash FreeHand FreeHand Graphics Studio Lingo Macromedia xRes MAGIC Power Applets Priority Access SoundEdit Shockwave Showcase Tools to Power Your Ideas e Xtra s o marcas comerciais registradas da Macromedia Inc Outros nomes de produtos logotipos designs t tulos palavras ou frases mencionados no mbito desta publica o podem ser marcas comerciais marcas de servi os ou nomes comerciais da Macromedia Inc ou de outras entidades podendo ser registrados em certas jurisdi es Isen o de responsabilidade da Apple A APPLE COMPUTER INC N O OFERECE GARANTIAS EXPRESSAS OU IMPL CITAS PARA O PACOTE DE SOFTWARE DE COMPUTADOR CONTIDO NESTA EMBALAGEM SUA COMERCIALIZA O OU ADEQUA O A QUALQUER UTILIZA O ESPEC FICA A EXCLUS O DAS GARANTIAS IMPL CITAS N O PERMITIDA EM ALGUNS ESTADOS A EXCLUS O ACIMA PODE N O SE APLICAR AO SEU CASO ESTA GARANTIA LHE CONCEDE DIREITOS LEGAIS ESPEC FICOS POSS VEL QUE HAJA OUTROS DIREITOS AOS QUAIS O
383. mado sob t d que ele n o pense que a p gina n o possui um conte do Clique no r tulo lt body gt no seletor de r tulos situado no canto inferior esquerdo da janela do documento 7 No menu pop up A es do inspetor de comportamentos escolha Mostrar ocultar as camadas 8 Na lista Camadas com nome selecione a camada denominada carregando 9 Clique em Ocultar 10 Clique em OK Permutar a imagem A a o Permutar a imagem troca uma imagem por outra alterando o atributo SRC do r tulo IMG Utilize esta a o para criar bot es cambi veis e outros efeitos em imagens inclusive a permuta simult nea de mais de uma imagem Nota Como apenas o atributo SRC afetado por esta a o certifique se de que a imagem permutada tenha as mesmas dimens es altura e largura que a original a fim de evitar distor es Para poder utilizar a a o Permutar a imagem 1 Escolha Inserir gt Imagem ou clique no bot o Imagem situado na paleta de objetos para inserir uma imagem 2 Nomeie a imagem no campo de texto mais esquerda no inspetor de propriedades A a o Permutar a imagem funcionar mesmo que voc n o nomeie as imagens esta a o nomeia automaticamente as imagens sem nome quando o comportamento for anexado a um objeto Contudo mais f cil distinguir as imagens na caixa de di logo Permutar a imagem se todas tiverem sido nomeadas previamente 3 Repita as etapas 1 e 2 para inserir outras imagens 4 Sele
384. magem em uma imagem de barra de navega o ou para alterar a exibi o e a es relacionadas s imagens de uma barra de navega o Para obter mais informa es consulte Como inserir uma barra de navega o na p gina 125 Utilize a guia B sico da caixa de di logo Definir a imagem da barra de navega o para criar ou atualizar uma imagem ou conjunto de imagens da barra de navega o para alterar a URL exibida quando um bot o da barra de navega o for clicado e para selecionar uma janela diferente na qual deseja exibir a URL Utilize a guia Avan ado da caixa de di logo Definir a imagem da barra de navega o para alterar o estado de outras imagens em um documento com base no estado do bot o Como padr o a a o de clicar em um elemento da barra de navega o automaticamente retornar todos os outros elementos desta barra ao seu estado Ativo utilize a guia Avan ado se desejar definir um outro estado para uma imagem quando este for Inativo ou Sobreposto Para editar uma a o Definir a imagem da barra de navega o 1 Selecione a imagem da barra de navega o a ser editada e abra o inspetor de comportamentos 2 Na coluna A es do inspetor de comportamentos clique duas vezes na a o Definir a imagem da barra de navega o associada ao evento que estiver alterando 3 Na guia B sico da caixa de di logo Definir a imagem da barra de navega o selecione as op es de edi o de imagens Para definir
385. manho da tabula o 348 op o Tamanho do recuo 348 op o Texto Cores HTML 349 op o Utilizar prefer ncias de formato HTML 347 op o Utilizar a firewall 142 op o Utilizar express es regulares 158 op o Utilizar Local Rede 141 op o Utilizar nenhum 141 op o Utilizar o FTP 141 op o Utilizar o FTP passivo 142 op o Velocidade de conex o 66 op o V nculos ativos 94 op o V nculos visitados 94 op es de Acesso ao servidor 141 op es de Caracteres especiais prefer ncias de regrava o de HTML 347 op es de devolu o retirada 149 op es de exibi o fontes 71 paletas flutuantes 63 op es de localiza o 157 op es de localiza o em 157 op es Recuo e Remover o recuo inspetor de propriedades de texto 183 ordem de empilhamento camadas 248 como alterar com as linhas de tempo 259 ortografia como verificar 198 P p ginas como alterar o t tulo 93 como visualizar em navegadores 170 cor 94 cores padr o do texto 94 Design Notes como utilizar em 172 imagem de fundo 94 propriedades e modelos 362 tamanho 172 tempo de descarga estimativa 172 p ginas da Ajuda e manual Extens o dos recursos do Dreamweaver 13 P ginas da Ajuda em HTML do Dreamweaver 11 paleta de bibliotecas 378 paleta de camadas 237 paleta de estilos CSS 195 paleta de hist rico comandos como criar a partir das etapas do hist rico 101 como automatizar as tarefas com 97 como desfazer as altera es 96 como limp
386. menu Texto gt Formato ou o menu pop up Formato no inspetor de propriedades escolha uma op o e Escolha um formato de par grafo por exemplo Cabe alho 1 Cabe alho 2 Texto pr formatado e assim por diante O r tulo HTML associado ao estilo selecionado por exemplo H1 para Cabe alho 1 H2 para Cabe alho 2 PRE para Pr formatado etc ser aplicado ao par grafo inteiro e Selecione Nenhum para remover um estilo de par grafo Como alterar as caracter sticas da fonte Utilize o inspetor de propriedades ou o menu Texto para alterar as caracter sticas da fonte no texto selecionado Para alterar as caracter sticas da fonte 1 Selecione o texto Caso n o haja qualquer texto selecionado a altera o ser aplicada ao texto digitado a seguir 2 Escolha dentre as seguintes op es e Para alterar a fonte escolha uma combina o de fontes no inspetor de propriedades ou no submenu Texto gt Fonte Os navegadores exibem o texto utilizando a primeira fonte na combina o que estiver instalada no sistema do usu rio Se nenhuma das fontes da combina o tiver sido instalada o navegador exibir o texto conforme as especifica es nas prefer ncias de navegador Consulte tamb m Como modificar as combina es de fontes na p gina 180 Escolha Padr o para remover as faces de tipos previamente aplicadas Padr o aplica a fonte padr o ao texto selecionado a fonte padr o do navegador ou a fonte atribu da ao
387. mo o dos coment rios do Dreamweaver converte os documentos com base em modelos em documentos HT ML comuns e os itens de biblioteca em c digo HTML normal isto eles n o poder o mais ser atualizados quando o modelo original ou o item de biblioteca forem alterados e Remover r tulo s espec fico s remove os r tulos especificados no campo de texto adjacente Utilize esta op o para remover os r tulos personalizados inseridos por outros editores visuais e outros r tulos que voc n o deseja que apare am no seu site por exemplo BLINK Separe v rios r tulos com v rgulas por exemplo FONT BLINK e Combinar os r tulos lt font gt aninhados sempre que poss vel consolida dois ou mais r tulos FONT quando eles controlarem a mesma faixa de texto Por exemplo lt FONT SIZE 7 gt lt FONT COLOR 4FF0000 gt grande e vermelho lt FONT gt lt FONT gt seria alterado para lt FONT SIZE 7 COLOR HFFO000 gt grande e vermelho lt FONT gt e Mostrar o registro quando concluir exibe uma caixa de alerta com os detalhes sobre as altera es feitas no documento logo que a limpeza terminar 3 Clique em OK Dependendo do tamanho do documento e do n mero de op es selecionadas a limpeza poder demorar alguns segundos Como formatar o c digo de origem de HTML nos documentos existentes As op es de formata o da origem de HTML especificadas nas prefer ncias de formato HTML e no arquivo SourceFormat txt ser o apl
388. mo buscar e Pp g substituir na p gina 156 Se estiver realizando uma busca de r tulo ou texto avan ado consulte Como buscar os r tulos e atributos HTML na p gina 159 ou Como buscar texto entre r tulos espec ficos na p gina 160 para obter informa es sobre a defini o de par metros adicionais de busca Clique no bot o Salvar a consulta identificado por um cone em forma de disco O local padr o onde as consultas s o salvas a pasta Configuration Queries contida na pasta do aplicativo do Dreamweaver Na caixa de di logo que aparecer digite o nome do arquivo que identificar a consulta e clique em Salvar Por exemplo se o padr o de busca envolver a localiza o de r tulos IMG sem o atributo ALT a consulta poder se chamar img no alt dwr As consultas de localiza o terminam com a extens o dwq enquanto que as consultas de substitui o terminam com a extens o dwr Para chamar um padr o de busca novamente 1 2 Escolha Editar gt Localizar ou Editar gt Substituir Clique no bot o Carregar a consulta identificado por um cone em forma de pasta A caixa de di logo Carregar a consulta ser aberta automaticamente na pasta Configuration Queries poss vel navegar at uma outra pasta se houver consultas salvas em outras pastas Selecione um arquivo de consulta e clique em Abrir Na caixa de di logo Localizar apenas as consultas de localiza o arquivos dwq esta
389. mo editar 205 como inserir 200 como otimizar no Fireworks 207 como permutar comportamento 331 como pr carregar comportamento 323 como pr carregar automaticamente 208 como redimensionar visualmente 203 como restaurar as permutadas comportamento 332 editores de imagem externos 205 em tabelas 217 formatos com suporte 199 mapas de imagens 211 propriedades 201 redimensionamento 203 imagens cambi veis 208 como criar 208 como criar um v nculo 208 como testar 208 imagens de rastreamento 104 imagens GIF como imagem de rastreamento 104 utiliza es de 199 imagens JPEG como imagem de rastreamento 104 utiliza es de 199 imagens PNG como imagem de rastreamento 104 utiliza es de 199 ndice Ajuda 11 informa es do servidor da Web 140 Iniciador como personalizar 67 como utilizar 67 Mini iniciador 64 inspetor de comportamentos 300 inspetor de imagens 211 inspetor de linhas de tempo 253 inspetor de molduras 269 inspetor de origem de HTML janela do documento como alternar para 340 vis o geral 339 inspetor de propriedades como ajustar os v nculos rompidos 170 como exibir 66 como expandir 66 imagens 201 pontos ativos 213 propriedades do formul rio 382 propriedades dos applets de Java 296 propriedades dos controles ActiveX 295 propriedades dos filmes Flash 288 propriedades dos filmes Shockwave 287 propriedades dos itens de biblioteca 377 propriedades dos plug ins do Netscape Navigator 292 roteiros 358
390. mo t picos relacionados projeto semelhante ou uma finalidade compartilhada poss vel criar documentos personalizados com o Dreamweaver Por m a maioria dos criadores para a Web criam sites coerentes e n o apenas simples conjuntos de documentos da Web n o relacionados O Dreamweaver constitui uma ferramenta para a cria o e gerenciamento de sites assim como para a cria o e edi o de documentos A cria o de um site a partir de um conjunto irregular de documentos j existentes muito mais dif cil do que a cria o de novos documentos a partir do projeto de um site em comum Para obter os melhores resultados projete e planeje o seu site antes de criar qualquer p gina que o integrar Nota Se n o for poss vel aguardar o momento certo para a cria o dos documentos tente utilizar algumas das ferramentas de cria o de documentos do Dreamweaver para criar um exemplo de documento Consulte Como criar e editar os documentos HTML na p gina 84 Mas n o tente criar os documentos definitivos antes de configurar o site A primeira etapa para criar um site da Web o planejamento Consulte Sobre o planejamento de sites na p gina 74 A etapa seguinte envolve a configura o da estrutura b sica do site consulte Como criar um site local na p gina 77 Se voc j tiver um site em um servidor da Web e desejar utilizar o Dreamweaver para edit lo consulte Como editar e atualizar um site j existen
391. moto enquanto a janela do documento estiver ativa e o arquivo n o fizer parte do site que estiver aberto o Dreamweaver tentar determinar a qual dos sites definidos localmente pertence o arquivo se ele pertencer a apenas um site local o Dreamweaver abrir este site e em seguida procurar nele o arquivo Para localizar um arquivo no site local 1 Selecione o arquivo no painel remoto da janela do site ou abra o arquivo em uma janela do documento 2 Escolha Site gt Localizar no site local Apenas no Windows se a janela do site estiver ativa escolha Editar gt Localizar no site local O arquivo real ado no painel Local da janela do site Para localizar um arquivo no site remoto 1 Selecione o arquivo no painel Local da janela do site ou abra o arquivo em uma janela do documento 2 Escolha Site gt Localizar no site remoto Apenas no Windows se a janela do site estiver ativa escolha Editar gt Localizar no site remoto O arquivo ser real ado no painel Remoto da janela do site Para buscar texto e ou HTML nos documentos 1 Escolha uma dentre as seguintes op es Na janela do documento ou do site escolha Editar gt Localizar ou Editar gt Substituir No inspetor de origem de HT ML clique com o bot o direito do mouse no Windows ou pressione a tecla Control e clique no Macintosh e no menu contextual escolha Localizar ou substituir Na caixa de di logo Localizar ou substituir que aparecer uti
392. mover o r tulo no menu contextual Nota Nem todos os r tulos podem ser removidos Como definir as prefer ncias do Quick Tag Editor As prefer ncias do Quick Tag Editor permitem controlar se as edi es realizadas com esse editor ser o ou n o automaticamente atualizadas na janela do documento Os controles do menu suspenso de sugest es tamb m podem ser ajustados Utilize o menu Editar gt Prefer ncias para acessar o painel de prefer ncias do Quick Tag Editor Aplicar as modifica es durante a edi o controla se as altera es do Quick Tag Editor ser o atualizadas automaticamente no documento enquanto voc percorre os atributos no modo Editar o r tulo Se esta op o for desativada ser necess rio pressionar a tecla Enter para aplicar as altera es ao documento Esta op o ignorada nos modos Inseriro HTML e Colocar o r tulo ao redor nesses modos a tecla Enter deve sempre ser pressionada para aplicar as altera es no documento Ativar a sugest o de r tulos controla se a lista de sugest es ser exibida durante a digita o no Quick Tag Editor O limite de tempo tamb m pode ser ajustado antes da exibi o do menu suspenso de sugest es para o r tulo ou atributo Como editar o HTML 345 346 Cap tulo 13 Como definir as prefer ncias de formato HTML As seguintes prefer ncias de formata o de c digo de origem de HT ML podem ser definidas no Deamweaver e As prefer ncias de regrava o de HT
393. mover os v nculos nos 132 como renomear as p ginas nos 130 como salvar como um arquivo de imagem 133 como selecionar v rias p ginas nos 129 mostrar os arquivos ocultos 132 op o Exibir os arquivos dependentes 133 op o Mostrar os t tulos das p ginas 130 v nculos 131 marcador de HTML incorreto 354 marcadores de elementos invis veis 90 material de refer ncia 19 menu Comandos como editar 391 menu Janela 62 menu pop up Tamanho da janela 64 menus contextuais 70 menus de atalhos Consulte menus contextuais menus de salto bot es Ir comportamento 319 bot es Ir como adicionar automaticamente 122 como adicionar os itens de menus 122 como alterar os itens de menu 123 como criar um aviso de sele o para 122 como editar 319 menus como personalizar 391 Mini iniciador como personalizar 67 introdu o 64 modelos atalhos 418 como alterar as cores de realce 363 como aplicar a um documento j existente 368 como criar 361 como criar novos documentos com 85 368 como definir as regi es edit veis 362 como desanexar um documento de 369 como editar 361 como exibir as regi es 364 como localizar as regi es edit veis 369 como modificar 369 como renomear 367 como tornar uma regi o n o edit vel 366 como utilizar as linhas de tempo 367 como utilizar os comportamentos 367 como utilizar os estilos 367 paleta de modelos 367 pasta Modelos 361 prefer ncias 363 propriedades da p gina 362 regi es edit v
394. mpede que sejam efetuados movimentos do mouse n o relacionados grava o como o clique para selecionar um elemento em uma janela ou arrast lo para um novo local e Se voc alternar para um outro documento durante a grava o o Dreamweaver n o gravar as altera es feitas no outro documento Olhe para o ponteiro para determinar se a grava o est se processando O Dreamweaver mant m apenas um comando gravado por vez assim que for iniciada a grava o de um novo comando o antigo se perder Para salvar um novo comando sem perder um comando j gravado salve o comando na paleta de hist rico consulte Como criar novos comandos a partir de etapas do hist rico na p gina 101 Uma vez gravado o comando poss vel salv lo se desejar utilizando a paleta de hist rico Para gravar temporariamente uma s rie de etapas utilizadas com frequ ncia 1 Escolha Comandos gt Iniciar a grava o ou pressione as teclas Control Shift e X no Windows ou Command Shift e X no Macintosh O ponteiro ser alterado indicando a grava o de um comando 2 Quando terminar a grava o escolha Comandos gt Parar a grava o ou pressione as teclas Control Shift e X no Windows ou Command Shift e X no Macintosh O ponteiro voltar ao normal Para executar um comando gravado Escolha Comandos gt Executar o comando gravado ou pressione as teclas Control e P no Windows ou Command e P no Macintosh Par
395. n o Ir para a URL A a o Ir para a URL abre uma nova p gina na janela ou na moldura especificada Esta a o particularmente til para alterar o conte do de duas ou mais molduras com um clique Ela tamb m pode ser chamada em uma linha de tempo para que salte a uma nova p gina depois de um determinado intervalo de tempo Para poder utilizar a a o Ir para a URL 1 Selecione um objeto e abra o inspetor de comportamentos 2 Clique no bot o com o sinal de adi o e escolha Ir para a URL no menu pop up A es 3 Na lista de sele o Abrir em escolha um destino para a URL A lista Abrir em automaticamente listar os nomes de todas as molduras no conjunto de molduras assim como na janela principal Se n o houver molduras a janela principal ser a nica op o Nota Esta a o poder provocar resultados inesperados se houver qualquer moldura com os nomes top blank self ou parent Algumas vezes os navegadores confundem estes nomes com os dos destinos reservados 4 Clique em Procurar para selecionar um documento a ser aberto ou digite o caminho e nome do documento no campo URL 5 Repita as etapas 3 e 4 para abrir outros documentos em outras molduras 6 Clique em OK 7 Verifique se o evento padr o corresponde ao desejado Se n o corresponder escolha um outro evento no menu pop up Se os eventos desejados n o estiverem listados altere o navegador de destino no menu pop up Eventos de Menu d
396. na 297 O filme deve contar com um autor para poder receber estes par metros Qualidade define o par metro QUALITY dos r tulos OBJECT e EMBED que executam o filme Consulte a documenta o do Flash para obter uma descri o das op es As op es s o Baixa Baixa autom Alta autom e Alta Escala define o par metro SCALE dos r tulos OBJECT e EMBED que executam o filme Consulte a documenta o do Flash para obter uma descri o das op es Execu o autom tica executa o filme automaticamente quando a p gina for carregada Loop faz com que o filme seja repetido indefinidamente Como inserir m dia 289 290 Cap tulo 11 Como inserir e editar os objetos Aftershock O Aftershock um utilit rio da Macromedia inclu do no pacote do Director O Aftershock gera c digos HTML e JavaScript a serem associados aos filmes Shockwave e Flash ele pode ser utilizado por exemplo para detectar a vers o de um plug in utilizado pelo visitante de sua p gina e para fornecer um conte do apropriado poss vel abrir os arquivos criados pelo Aftershock no Dreamweaver e em seguida colar o conte do em outros documentos do Dreamweaver Para editar os objetos Aftershock instale este programa no seu sistema selecione o HTML gerado por ele em um documento e no inspetor de propriedades clique em Iniciar o Aftershock No Flash 4 o Aftershock foi absorvido pelo recurso Publicar No entanto o Aftershock ainda til para os usu r
397. nar novas pastas ou arquivos a um site ou renovar a exibi o do site depois de concluir as altera es Tamb m poss vel utilizar a exibi o de Arquivos do site para determinar quais arquivos em cada um dos sites foram atualizados desde a ltima vez em que foram transferidos Para obter mais informa es sobre a sincroniza o do site local com o remoto consulte Como sincronizar os arquivos nos sites local e remoto na p gina 154 Para exibir os arquivos do site Siga um dos procedimentos abaixo e Escolha Janela gt Arquivos do site a fim de abrir a janela do site na exibi o Arquivos do site e Na janela do site clique no bot o Arquivos do site Para abrir um arquivo a partir da exibi o Arquivos do site Clique duas vezes no cone do arquivo Para adicionar uma nova pasta ao site 1 Certifique se de que um arquivo ou pasta esteja selecionada na janela do site a nova pasta ser criada dentro da pasta selecionada ou na mesma pasta que o arquivo selecionado 2 Escolha Arquivo gt Nova pasta na janela do site no Windows ou Site gt Exibir os arquivos do site gt Nova pasta no Macintosh 3 Digite um nome para a nova pasta Para adicionar um novo arquivo ao site 1 Certifique se de que um arquivo ou pasta esteja selecionada na janela do site o novo arquivo ser criado dentro da pasta selecionada ou na mesma pasta que o arquivo selecionado 2 Escolha Arquivo gt Novo arquivo na janela do s
398. nas p ginas leia Como formatar o texto na p gina 177 e Como inserir imagens na p gina 199 Isso tudo que voc precisa para come ar a produzir sites da Web de alta qualidade mas quando estiver pronto para aprender a utilizar as ferramentas mais avan adas de layout e intera o prossiga no restante dos do manualseguindo a ordem dos cap tulos Talvez voc queira saltar o cap tulo Como personalizar o Dreamweaver pelo menos no in cio Para os designers da Web experientes que ainda n o utilizaram o Dreamweaver 1 Comece a trabalhar atrav s do Tutorial do Dreamweaver a fim de aprender os princ pios b sicos da utiliza o do Dreamweaver Leia Princ pios b sicos do Dreamweaver na p gina 61 para obter uma vis o geral mais completa da interface do usu rio do Dreamweaver Embora a maior parte do material em Como criar sites e documentos na p gina 73 e V nculos e navega o na p gina 109 lhe seja provavelmente familiar examine esses cap tulos para ver como os conceitos j conhecidos s o implementados no Dreamweaver preste particular aten o em Como criar um site local na p gina 77 Em seguida leia Gerenciamento de sites na p gina 139 Como formatar o texto na p gina 177 e Como inserir imagens na p gina 199 cont m informa es teis sobre os detalhes da utiliza o do Dreamweaver para criar p ginas HTML b sicas Leia a vis o gera
399. navega o 2 Nalista Elementos da barra de navega o selecione o elemento a ser editado 3 Edite o e em seguida clique em OK Como exibir a estrutura do site Utilize a exibi o do mapa do site para exibir um site local como um mapa visual dos cones vinculados adicionar novos arquivos a um site ou adicionar modificar ou remover v nculos A exibi o do mapa do site ideal para fazer storyboards ou criar o layout da estrutura do site Voc pode configurar rapidamente a estrutura inteira do site e em seguida criar uma imagem impressa do mapa do site Nota A exibi o do mapa do site se aplica apenas aos sites locais Se voc quiser criar um mapa de um site remoto copie o conte do do site remoto no seu disco local Para exibir um mapa de site siga um dos procedimentos abaixo e Escolha Janela gt Mapa do site a fim de abrir a janela do site e Na janela do site clique no bot o Mapa do site A home page do site o ponto de partida do mapa Se o Dreamweaver n o puder determinar a home page do site atual a caixa de di logo Defini o do site ser aberta no painel Layout do mapa do site solicitando a escolha da p gina correta O mapa do site mostra os arquivos HTML e outros elementos da p gina como cones Os v nculos ser o exibidos na ordem em que forem detectados no c digo de origem de HTML e O texto exibido em vermelho indica um v nculo rompido e O texto exibido em azul e marcado com um cone
400. ndows No Macintosh Desfazer Control Z Command Z Refazer Control Y ou Command Y ou Control Shift Z Command Shift Z Recortar Control X Command X Copiar Control C Command C Colar Control V Command V Limpar Delete Delete Selecionar tudo Control A Command A Iniciar o editor externo Control E Command E Propriedades da p gina Control J Command Prefer ncias Control U ou Command U ou Control K Command K Quick Tag Editor A o No Windows No Macintosh Abrir o Quick Tag Editor Control T Command T Selecionar o r tulo pai Selecionar o r tulo filho Control Shift 6 Control Shift 7 Command Shift 6 Command Shift 7 Paleta de hist rico A o No Windows No Macintosh Abrir a paleta de hist rico Iniciar parar o comando de grava o Executar o comando gravado F9 Control Shift X Control P F9 Command Shift X Command P Como editar o texto A o No Windows No Macintosh Criar um novo par grafo Inserir uma quebra de linha Inserir um espa o n o separ vel Mover o texto ou objeto para um outro local na p gina Copiar o texto ou objeto para um outro local na p gina Copiar apenas o texto n o copia os r tulos HTML Colar como texto Selecionar uma palavra Adicionar os itens selecionados biblioteca Alternar entre a janela do documento e o inspetor de HTML Abrir e fechar o inspetor de propriedades Verificar a ortografia
401. ne as teclas Control Shift e gt no Windows ou as teclas Command Shift e gt no Macintosh e Escolha Editar gt Selecionar o r tulo filho Nota Se o r tulo n o contiver outros r tulos o comando Selecionar o r tulo filho escolher o conte do do r tulo atual Para alternar entre os modos do Quick Tag Editor Com o Quick Tag Editor ativo pressione as teclas Control e T no Windows ou as teclas Command e T no Macintosh O Quick Tag Editor altera os modos Inseriro HTML Editar o r tulo e Colocar o r tulo ao redor sempre que o atalho de teclado for utilizado Como editaro HTML 343 344 Cap tulo 13 Sobre o modo Inserir o HTML O Quick Tag Editor iniciar no modo Inserir o HTML quando for aberto sem que haja uma sele o Na abertura ser mostrado um par de sinais de maior e menor com o ponto de inser o entre eles Podem ser digitadas segii ncias de HTML arbitr rias nesse modo do editor incluindo v rios r tulos e texto ou um outro conte do entre os r tulos Quando o editor for fechado o HTML inserido ser colocado no ponto de inser o se algum r tulo for deixado aberto os correspondentes de finaliza o ser o adicionados automaticamente Sobre o modo Editar o r tulo O Quick Tag Editor inicia no modo Editar o r tulo quando a sele o consistir de um r tulo completo um r tulo de abertura e outro correspondente de finaliza o se for aplic vel e o conte do do r tulo se houver
402. nesperado e N o poss vel colar etapas que inclu rem um comando Colar mas n o inclu rem um comando anterior Copiar Se voc colar as etapas em um editor de texto ou em um inspetor de origem de HTML elas aparecer o como c digo JavaScript Este procedimento poder ser til para aprender como gravar os seus pr prios roteiros Para obter mais informa es sobre como utilizar o JavaScript no Dreamweaver consulte Extens o dos recursos do Dreamweaver Princ pios b sicos na p gina 401 Como criar novos comandos a partir de etapas do hist rico poss vel salvar um conjunto de etapas do hist rico como um comando com nome que passar a estar dispon vel no menu Comandos Crie e salve um novo comando se for prov vel a necessidade de percorrer novamente um determinado conjunto de etapas no futuro especialmente se voc desejar utilizar estas etapas quando iniciar o Dreamweaver os comandos salvos s o mantidos em car ter permanente a n o ser que sejam exclu dos enquanto que os comandos gravados e as segii ncias copiadas de etapas n o s o poss vel editar os nomes de comandos colocados no menu Comandos e tamb m exclui los utilizando Editar a lista de comandos Observe que mais complicado editar e excluir comandos inclu dos no menu Comandos ou seja os comandos que n o foram adicionados por voc consulte Como personalizar os menus do Dreamweaver na p gina 391 Para criar um comando 1 Sel
403. net Explorer P ginas da Vis o geral das ASP da Microsoft http msdn microsoft com workshop server asp ASPover asp cont m informa es sobre as Active Server Pages ASP Guia de introdu o 19 20 Introdu o P gina JSP da Sun http java sun com products jsp cont m informa es sobre as JavaServer Pages JSP P ginas PHP http www php net cont m informa es sobre o PHP Hypertext Preprocessor PHP P gina do produto ColdFusion da Allaire http www coldfusion com Products ColdFusion cont m informa es sobre ColdFusion Site XML com http www xml com cont m informa es sobre XML CAP TULO 1 Tutorial do Dreamweaver Este tutorial mostra como utilizar o Dreamweaver para definir um site local e como criar e editar documentos destinados Web Utilize este tutorial para aprender a lidar com os recursos b sicos necess rios ao desenvolvimento de um site da Web e para entrar em contato com alguns dos novos recursos do Dreamweaver 3 Neste tutorial voc criar um site da Web de uma empresa fict cia Scaal Coffee dedicada a produtos finos de caf Ao visitar o site da Scaal na Web os clientes poder o ler sobre a empresa examinar as ofertas especiais da semana e consultar as p ginas de produtos do cat logo on line da empresa 21 22 Cap tulo 1 Durante a visita ao site voc aprender como realizar as seguintes tarefas Definir um site local Criar um documento Ut
404. nhas e Limpar as larguras das colunas para excluir todos os valores de altura de linha e largura de coluna da tabela e Utilize o bot o Converter as larguras da tabela em pixels para converter a largura da tabela de uma percentagem da janela do navegador em sua largura atual em pixels e Utilize o bot o Converter as larguras da tabela em percentagens para converter a largura da tabela de pixels em uma percentagem da janela do navegador Para definir o layout da c lula escolha uma das seguintes op es e No campo Preenchimento da c lula especifique o n mero de pixels entre o conte do da c lula e os seus limites ou parede e No campo Espa o entre c lulas especifique o n mero de pixels entre cada c lula da tabela Quando n o forem atribu dos valores espec ficos de espa amento e preenchimento da c lula o Netscape Navigator Microsoft Internet Explorer e Dreamweaver exibir o a tabela como se o espa amento da c lula fosse definido para 2 e o preenchimento da c lula para 1 Para definir as bordas da tabela escolha uma das seguintes op es e No campo Borda especifique a largura em pixels da borda da tabela A maioria dos navegadores exibe a borda como uma linha tridimensional Caso a tabela esteja sendo utilizada para layout de p gina especifique um valor O para a borda Para exibir os limites da tabela e das c lulas quando a borda for definida como 0 escolha Exibir gt Bordas da Tabela e Utilize
405. no Iniciador 3 Arraste um item da paleta de bibliotecas at a janela do documento ou selecione um item e clique em Inserir Para inserir o conte do do item sem criar uma ocorr ncia deste no documento pressione Control no Windows ou a tecla Option no Macintosh enquanto arrasta um item para fora da paleta de bibliotecas Como alterar um item de biblioteca A edi o de um item de biblioteca altera o arquivo original do mesmo O Dreamweaver permite optar pela atualiza o do item editado em todos os documentos no site atual renomea o dos itens para que percam a conex o com documentos ou modelos e pela exclus o dos itens de uma biblioteca Nota A paleta de estilos CSS e os inspetores de linhas de tempo e de comportamentos n o estar o dispon veis durante a edi o de um item de biblioteca porque esses itens podem conter apenas os elementos BODY O c digo das linhas de tempo e das folhas de estilos CSS faz parte da se o do HEAD enquanto que o inspetor de comportamentos n o estar dispon vel porque ele insere c digo nas se es do HEAD e do BODY Para obter instru es sobre a edi o de comportamentos consulte Como editar um comportamento em um item de biblioteca na p gina 376 Para editar um item de biblioteca 1 Escolha Janela gt Biblioteca ou clique em Biblioteca no Iniciador 2 Selecione um item de biblioteca e clique no cone de Abrir o cone correspondente pasta situado na parte infer
406. no final da barra 6 Mova a camada na p gina para onde dever estar ao final da anima o Se desejar que a camada se mova em uma curva selecione a respectiva barra de anima o e clique mantendo pressionada a tecla Control no Windows ou a tecla Command no Macintosh para adicionar um quadro prim rio na posi o do ponto de inser o ou clique em um quadro no meio da barra de anima o e no menu contextual escolha Adicionar quadro prim rio Repita essa etapa para definir outros quadros prim rios Mantenha pressionado o bot o Executar para visualizar a anima o na p gina Repita o procedimento para adicionar outras camadas e imagens linha de tempo e criar uma anima o mais complexa Como criar uma linha de tempo arrastando um caminho Se desejar criar uma anima o com um caminho complexo a grava o do caminho medida que arrasta a camada poder ser mais eficiente do que a cria o de quadros prim rios individuais Para criar uma linha de tempo arrastando um caminho 1 2 Selecione uma camada Mova a camada at o ponto inicial da anima o Certifique se de ter selecionado o elemento correto Clique no marcador da camada ou utilize a paleta de camadas para selecionar uma camada Consulte tamb m Como manipular as camadas na p gina 243 Escolha Modificar gt Gravar o caminho da camada Arraste a camada pela p gina para criar um caminho Solte o mouse no ponto em que a anima o deve
407. nome o Dreamweaver colar a camada e o seu conte do do documento original juntamente com a sequ ncia de anima o Para aplicar a segl ncia de anima o colada a outra camada no novo documento escolha Alterar o objeto no menu contextual e no menu pop up selecione o nome da segunda camada Se desejar exclua a camada colada Consulte Como aplicar uma segii ncia de anima o a um objeto diferente na p gina 261 Como aplicar uma sequ ncia de anima o a um objeto diferente Para economizar tempo poss vel criar uma segi ncia de anima o e aplic la s camadas restantes do documento Para aplicar uma sequ ncia de anima o existente a outros objetos 1 2 No inspetor de linhas de tempo selecione a segii ncia de anima o e copie a Clique em qualquer quadro do inspetor de linhas de tempo e cole a segii ncia Clique com o bot o direito do mouse no Windows ou pressione a tecla Control e clique no Macintosh na sequ ncia de anima o colada e escolha Alterar o objeto no menu contextual Na caixa de di logo que aparecer escolha outro objeto no menu pop up e clique em OK Repita as etapas 2 a 4 para quaisquer outros objetos aos quais ser associada a mesma seq ncia de anima o Depois de criada a segii ncia de anima o ainda poss vel mudar de opini o sobre as camadas que dever o ser animadas basta seguir as etapas 3 e 4 acima n o necess rio copiar ou colar Como utiliza
408. nome de arquivo tempor rio por exemplo MolduraSemNome 1 para a p gina com o conjunto de molduras SemNome 1 SemNome 2 etc para as p ginas com molduras Quando uma das op es de salvamento for selecionada ser aberta a caixa de di logo Salvar o arquivo j pronta para salvar um documento com o seu nome de arquivo tempor rio Como os arquivos n o t m t tulo poder ser dif cil determinar qual arquivo com moldura est sendo salvo Examine as linhas da sele o da moldura na janela do documento para identificar o documento que est sendo salvo rea selecionada identifica a moldura mencionada na caixa de di logo Salvar o arquivo Como salvar um arquivo com um conjunto de molduras Para salvar um arquivo com um conjunto de molduras escolha uma das seguintes op es e Para salvar o arquivo com um conjunto de molduras escolha Arquivo gt Salvar o conjunto de molduras e Para salvar o arquivo com o conjunto de molduras como sendo novo escolha Arquivo gt Salvar o conjunto de molduras como Como salvar um arquivo de moldura Para salvar um documento inserido em uma moldura clique na moldura e em seguida escolha Arquivo gt Salvar Como utilizar as molduras 271 272 Cap tulo 10 Como salvar todos os arquivos em um conjunto de molduras Para salvar todos os documentos abertos inclusive os individuais os documentos com moldura e os documentos com um conjunto de molduras escolha Arquivo gt Salvar tod
409. nome do modelo 3 Edite o modelo na janela do documento Se desejar salvar informa es adicionais sobre um modelo crie um arquivo Design Notes para o modelo Os documentos que se basearem no modelo n o herdar o as Design Notes do mesmo Para obter mais informa es sobre como utilizar as Design Notes consulte Sobre as Design Notes na p gina 172 Modelos e bibliotecas 361 362 Cap tulo 14 Como definir as propriedades da p gina do modelo Os documentos criados a partir de um modelo herdar o as propriedades da p gina do mesmo com exce o do t tulo da p gina Se um documento utilizar um modelo poss vel alterar o t tulo do documento por m quaisquer altera es feitas s suas outras propriedades da p gina ser o ignoradas As propriedades da p gina de um modelo podem ser definidas atrav s do comando Modificar gt Propriedades da p gina Se precisar alterar as propriedades da p gina de um documento ap s ter aplicado o modelo voc dever modificar as propriedades da p gina do modelo e em seguida atualizar as p ginas que o utilizarem Consulte Como modificar os modelos e atualizar o site na p gina 369 Para definir as propriedades da p gina do modelo 1 Abra o modelo e escolha Modificar gt Propriedades da p gina 2 Especifique as op es desejadas para a p gina e clique em OK Para obter mais informa es sobre as propriedades da p gina consulte Propriedades da p gina na Ajuda d
410. nser o e As prefer ncias da paleta de objetos permitem exibir o conte do da paleta como Apenas texto Apenas cones ou Texto e cones Como utilizar a paleta de hist rico A paleta de hist rico mant m um registro de cada etapa do seu trabalho no Dreamweaver Para exibir a paleta de hist rico escolha Janela gt Hist rico gt Hist rico gt Digitando scaal Novo par grafo Copiar Ee Colar B Aplicar negrito poss vel utilizar a paleta de hist rico para desfazer diversas etapas simultaneamente para execut las novamente e para automatizar as etapas ao criar novos comandos Para obter mais detalhes consulte Sobre a paleta de hist rico na p gina 95 Princ pios b sicos do Dreamweaver 69 70 Cap tulo 2 Como utilizar os menus contextuais O Dreamweaver utiliza amplamente os menus contextuais que se constituem em um m todo para acessar rapidamente os comandos e propriedades mais teis relativos ao objeto ou janela que est sendo trabalhada Os menus contextuais cont m apenas a lista dos comandos que pertencem sele o atual Para poder utilizar os menus contextuais 1 Abrao menu contextual clicando com o bot o direito do mouse no Windows ou pressionando a tecla Control e clicando no objeto ou janela no Macintosh 2 Selecione o comando no menu contextual e solte o bot o do mouse Scaal Home Page Sca al home html Dreamweaver Origem ba
411. nt m linhas de tempo tome cuidado especial para n o mover renomear ou excluir qualquer elemento ao qual se refere a linha de tempo Como utilizar o inspetor de linhas de tempo O inspetor de linhas de tempo representa a altera o das propriedades das camadas e imagens ao longo do tempo Escolha Janela gt Linhas de tempo para abrir o inspetor de linhas de tempo Consulte tamb m Sobre as linhas de tempo na p gina 253 Clique no inspetor de linhas de tempo com o bot o direito do mouse no Windows ou enquanto mant m pressionada a tecla Control no Macintosh q para abrir um menu contextual contendo todos os comandos relevantes Cabe ote de execu o mostra o quadro da linha de tempo que est em exibi o na p gina frimeiner Menu pop up Linha de tempo B ke Cabe ote de execu o 1 Menu pop up Linha de tempo especifica quais linhas de tempo do documento ser o exibidas no inspetor de linhas de tempo Canais de anima o exibem barras para animar as camadas e imagens Como utilizar as camadas 253 254 Cap tulo 9 Barras de anima o mostram a dura o de cada objeto Uma nica linha pode incluir v rias barras que representam diversos objetos Barras diferentes n o podem controlar o mesmo objeto no mesmo quadro Quadros prim rios s o quadros situados em uma barra na qual algumas propriedades do objeto como a posi o haviam sido especificadas O Dreamweaver calcula os valores interm
412. nte utilize a paleta de hist rico Para abrir a paleta de hist rico Escolha Janela gt Hist rico Para desfazer a ltima etapa Arraste o polegar da paleta de hist rico uma etapa acima na lista Esta a o provoca o mesmo efeito que a sele o de Editar gt Desfazer A etapa desfeita se tornar cinza Para selecionar v rias etapas simultaneamente siga um dos procedimentos abaixo e Arraste o polegar at que indique uma etapa e Clique esquerda da etapa o polegar ser automaticamente colocado junto etapa Nota Para paginar automaticamente at uma determinada etapa clique esquerda da mesma a sele o da etapa feita clicando se sobre a mesma A sele o de uma etapa diferente da volta etapa no hist rico dos comandos Desfazer gt Hist rico gt e Colar gt B aplicar negrito Da mesma maneira que uma nica etapa n o pode ser refeita ap s uma nova a o se v rias etapas forem desfeitas n o ser mais poss vel refaz las depois de efetuar uma nova a o no documento j que elas desaparecer o da paleta de hist rico A paleta de hist rico tamb m permite repetir as etapas que aparecem no hist rico de etapas e automatizar as tarefas que se basearem nas etapas efetuadas Como automatizar as tarefas Para repetir uma s rie de etapas apenas algumas vezes execute as novamente diretamente a partir da paleta de hist rico Para automatizar uma tarefa realiz
413. nte padr o associada fam lia de fontes gen ricas Por exemplo a fonte monoespa ada padr o na maioria dos sistemas Courier Como alterar a cor do texto A cor do texto selecionado pode ser alterada para que uma nova cor anule aquela definida nas Propriedades da p gina Se nenhuma cor do texto tiver sido definida nas Propriedades da p gina a cor padr o do texto ser preta Para alterar a cor do texto 1 2 Selecione o texto Escolha dentre as seguintes op es Escolha uma cor na paleta de cores aceitas pelo navegador clicando na caixa de cores no inspetor de propriedades Escolha Texto gt Cor Aparecer a caixa de di logo do sistema Seletor de cores Selecione uma cor e clique em OK Para definir a cor padr o do texto utilize o comando Modificar gt Propriedades da p gina Consulte Como definir as cores padr o do texto na p gina 94 Para retornar o texto cor padr o 1 2 No inspetor de propriedades clique na caixa de cores para abrir a paleta de cores aceitas pelo navegador Clique no bot o Apagar o bot o do meio no canto inferior direito Como formatar o texto 181 182 Cap tulo 6 Como alinhar o texto e os elementos Alinhe o texto na p gina utilizando o inspetor de propriedades ou o submenu Texto gt Alinhamento Centralize qualquer elemento da p gina atrav s do comando Texto gt Alinhamento gt No centro Para alinhar o texto 1 Selecione o texto a ser alinha
414. nteiramente satisfeito com o arquivo original j que seria necess rio repetir a convers o a cada vez que esse arquivo for alterado Nota Se desejar utilizar camadas para dispor os elementos de uma p gina a ser utilizada com os navegadores da vers o 3 0 utilize os comandos do modo de layout no menu Modificar para converter o layout da p gina de tabela em camadas o que dispensar a necessidade de criar um outro arquivo Consulte Como utilizar as camadas para criar tabelas na p gina 250 Para converter um arquivo a ser utilizado com os navegadores da vers o 3 0 1 Escolha Arquivo gt Converter gt Compat vel com navegador 3 0 2 Na caixa de di logo que aparecer escolha se deseja converter camadas em tabelas estilos CSS em markup HT ML estilos de caracteres ou ambos 3 Clique em OK O Dreamweaver abrir o arquivo convertido em uma nova janela sem t tulo Todas as camadas ser o substitu das por uma nica tabela que preservar o posicionamento original Nota N o poss vel converter as camadas sobrepostas ou fora da p gina esquerda ou no alto Sempre que for poss vel o markup CSS ser substitu do por estilos de caracteres HTML Qualquer markup CSS que n o puder ser convertido em HTML ser removido Consulte a Tabela de convers o de CSS em markup HTML na p gina 197 para obter mais informa es sobre os estilos que s o convertidos e os que s o removidos O c digo de linhas de tempo
415. ntida em Configuration Objects Para remover um objeto da paleta de objetos Mova os arquivos HTML GIF e JavaScript correspondentes ao objeto para fora da pasta Configuration Objects Para recarregar as extens es ap s ter feito as altera es na pasta Configuration Objects 1 Pressione a tecla Control e clique no Windows ou pressione a tecla Option e clique no Macintosh no menu pop up no alto da paleta de objetos 2 Escolha Recarregar as extens es Como criar um objeto simples Muitos objetos simples n o necessitam de JavaScript eles cont m apenas o HTML que ser inclu do no documento Para obter informa es b sicas sobre a cria o de objetos mais complexos utilizando a linguagem JavaScript consulte Extens o dos recursos do Dreamweaver Princ pios b sicos na p gina 401 Para criar um objeto simples 1 Crie um novo documento em branco em um editor de texto por exemplo BBEdit ou HomeSite O inspetor de origem de HTML do Dreamweaver pode ser utilizado como editor de texto mas necess rio excluir primeiro todos os r tulos que aparecem no inspetor de HTML quando um novo documento for criado 2 Digite ou cole os r tulos que este objeto deve inserir nos documentos Por exemplo digite lt P gt amp copy 2000 DCD Productions Inc lt BR gt Todos os direitos reservados lt P gt 3 Salve o arquivo Se desejar que o objeto apare a em um dos pain is existentes na paleta de ob
416. nto do letreiro tiver conclu do um loop onFocus NS3 NS4 IE3 IE4 gerado quando o elemento especificado se tornar o foco da intera o com o usu rio Por exemplo a a o de clicar em um campo de texto de um formul rio gera um evento onFocus onHelp IE4 gerado quando o usu rio clicar no bot o Ajuda do navegador ou escolher Ajuda no menu do navegador onKeyDown NS4 IE4 gerado assim que o usu rio pressionar qualquer tecla N o necess rio que o usu rio solte a tecla para que este evento seja gerado onKeyPress NS4 IE4 gerado assim que o usu rio pressionar e soltar qualquer tecla este evento equivale combina o dos eventos onkeyDown e onKeyUp onKeyUp NS4 IE4 gerado assim que o usu rio soltar uma tecla ap s t la pressionado onLoad NS3 NS4 IE3 IE4 gerado quando uma imagem ou p gina tiver terminado de ser carregada onMouseDown NS4 IE4 gerado quando o usu rio pressionar o bot o do mouse N o necess rio que o usu rio solte o bot o do mouse para que este evento seja gerado onMouseMove IE3 IE4 gerado quando o usu rio mover o mouse enquanto indica o elemento especificado Ou seja o ponteiro permanece dentro dos limites do elemento onMouseOut NS3 NS4 IE4 gerado quando o ponteiro se afastar do elemento especificado Em geral o elemento especificado um v nculo onMouseOver NS3 NS4 IE3 IE4 gerado quando o mouse for inicialmente movid
417. ntrole ActiveX Clique em Par metros no inspetor de propriedades para digitar os nomes e valores relativos s propriedades que n o aparecem no inspetor de propriedades N o h um formato padr o universalmente aceito para os par metros dos controles ActiveX para estabelecer os par metros a serem empregados consulte a documenta o relativa ao controle ActiveX a ser utilizado O inspetor de propriedades inicialmente exibir as propriedades mais comumente utilizadas Clique na seta de expans o situada no canto inferior direito para examinar todas as propriedades Nome especifica um nome que identificar o objeto ActiveX para a cria o de roteiros Digite um nome no campo sem t tulo extrema esquerda do inspetor de propriedades L e U especificam a largura e altura do objeto em pixels Tamb m poss vel especificar as seguintes unidades pc paicas pt pontos pol polegadas mm mil metros cm cent metros ou percentagem do valor do objeto pai As abreviaturas devem se seguir ao valor sem um espa o por exemplo 3mm Class ID identifica o controle ActiveX ao navegador Digite um valor ou escolha um valor no menu pop up Quando a p gina tiver sido carregada o navegador utilizar a Class ID para localizar o controle ActiveX necess rio ao objeto ActiveX associado p gina Se o navegador n o conseguir localizar o controle ActiveX especificado ele tentar descarreg lo a partir do local especificado em
418. o Guia de introdu o 15 16 Introdu o Novidades do Dreamweaver 3 Os novos recursos no Dreamweaver 3 aprimoram a edi o do HTML e o gerenciamento do site permitem adicionar elementos como caracteres especiais barras de navega o e mapas de imagens dinamizam o fluxo de trabalho e permitem personalizar e estender os recursos do programa Como editar o HTML O Quick Tag Editor permite modificar adicionar ou remover rapidamente um r tulo HTML sem sair da janela do documento Consulte Como editar um r tulo HTML na janela do documento na p gina 340 Estilos HTML permite definir os estilos utilizando markup de caracteres HTML padr o aceitos por muitos navegadores como os r tulos B e FONT em vez de folhas de estilo em cascata Cascading Style Sheets CSS A paleta de estilos do Dreamweaver 2 0 agora chama se paleta de estilos CSS Consulte Como formatar o texto com os estilos HTML na p gina 184 Inspetor de origem de HTML aprimorado permite ativar os n meros de linhas selecionar linhas inteiras do c digo a partir da margem e arrastar e soltar sele es de HTML O inspetor de origem de HTML tamb m pode ser acoplado a outras paletas flutuantes Consulte Como utilizar o inspetor de origem de HTML na p gina 339 Modelo aprimorado de r tulo de outros fabricantes permite especificar se o Dreamweaver dever ignorar o conte do de determinados tipos de r tulos de outros fabricantes como os
419. o e A segunda linha reservada ao designador PROFILE TYPE BROWSER PROFILE O Dreamweaver utiliza esta linha para determinar quais documentos ser o perfis de navegadores Esta linha n o deve ser alterada ou movida e Dois h fens no in cio de uma linha indicam um coment rio isto a linha ser ignorada durante o processo de verifica o do destino e Deve aparecer um espa o nesses locais antes do sinal de maior gt na linha ELEMENT ap s o par ntese de abertura antes do par ntese de fechamento e antes e depois de cada tra o na lista de valores e Deve aparecer um ponto de exclama o sem um espa o antes de cada uma das seguintes palavras ELEMENT ATTLIST Error msg e htmlmsg IELEMENT ATTLIST lError msg htmimsg Error e Warning devem aparecer dentro de ELEMENT ou da rea ATTLIST e As mensagens msg dever o conter apenas texto simples As mensagens htmimsg dever o conter qualquer HTML v lido inclusive hiperv nculos e Os coment rios em HTML lt gt n o podem ser listados como r tulos nos perfis de navegadores porque interferem na an lise O Dreamweaver n o relata um erro para os coment rios porque eles contam com suporte de todos os navegadores A sintaxe de uma entrada de r tulo lt ELEMENT htmiTag NAME tagName gt lt ATTLIST htmiTag unsupportedAttribute1 Error Imsg unsupported Attribute do htmlTag n o conta com suporte Tente utilizar supportedAt
420. o clique em um quadro no meio da barra de anima o e escolha Modificar gt Linha de tempo gt Adicionar quadro prim rio ou clique em um quadro da barra de anima o enquanto mant m pressionada a tecla Control no Windows ou Command no Macintosh 2 Defina as novas propriedades do objeto escolhendo uma das seguintes op es e Para alterar o arquivo de origem de uma imagem clique no cone correspondente pasta ao lado da caixa Orig no inspetor de propriedades para procurar e selecionar uma nova imagem e Para alterar a visibilidade de uma camada escolha default padr o inherit herdar visible vis vel ou hidden oculta no menu pop up Vis no inspetor de propriedades Consulte tamb m Como alterar a visibilidade de uma camada na p gina 249 e Para alterar o tamanho de uma camada arraste suas al as de redimensionamento ou digite novos valores nas caixas Largura e Altura no inspetor de propriedades Atualmente o Internet Explorer 4 0 e o 5 0 s o os nicos navegadores capazes de alterar dinamicamente o tamanho de uma camada e Para alterar a ordem de empilhamento de uma camada digite um novo valor no campo ndice Z ou utilize a paleta de camadas para alterar a ordem de empilhamento da camada Consulte tamb m Como alterar a ordem de empilhamento de camadas na p gina 248 3 Mantenha pressionado o bot o Executar para examinar a anima o A camada selecionada estar sempre vis vel e no in
421. o escolha Exibir gt Bordas da moldura Quando as bordas da moldura forem exibidas ser adicionado espa o em volta da borda do documento fornecendo lhe um indicador visual das reas da moldura no documento Para criar um conjunto de molduras siga um dos procedimentos abaixo e Escolha Modificar gt Conjunto de molduras gt Dividir a moldura para a esquerda para a direita para cima ou para baixo e Mantendo pressionada a tecla Alt no Windows ou Option no Macintosh arraste uma das bordas da moldura para dentro da janela do documento a fim de dividir o documento vertical ou horizontalmente Arraste uma borda da moldura a partir de um dos cantos para dividir o documento em quatro molduras rquivo Editar Exibir Inserir Modificar Texto Para excluir uma moldura Arraste a borda da moldura para fora da p gina ou at a borda da moldura m e Para inserir um conjunto de molduras predefinido Os conjuntos de molduras predefinidos facilitam a sele o do tipo de conjunto de molduras a ser criado Os cones dos conjuntos de molduras predefinidos no painel de molduras da paleta de objetos s o uma representa o visual de cada conjunto de molduras aplicado a um documento selecionado Molduras _ EB E to ES O conjunto de molduras selecionado envolve o documento atual no qual o ponto de inser o est situado A rea azul do cone correspondente a um conjunto de molduras predefinido representa a p
422. o Dreamweaver Como definir as regi es edit veis de um modelo Em um modelo as regi es edit veis s o as partes de uma p gina que se alteram por exemplo um artigo em um boletim As regi es bloqueadas n o edit veis s o as reas que se mant m constantes de uma p gina para outra como o nome ou logotipo de uma corpora o Como padr o todas as regi es em um modelo s o marcadas como bloqueadas quando salvas para tornar o modelo til necess rio que algumas de suas partes sejam edit veis Enquanto o modelo estiver sendo editado poss vel fazer altera es tanto nas regi es edit veis quanto nas bloqueadas Quando o modelo for aplicado a um documento no entanto as modifica es poder o ser feitas apenas nas regi es edit veis do documento as regi es bloqueadas n o podem ser alteradas Nota Ao nomear uma regi o n o poss vel utilizar os seguintes caracteres aspas simples ou duplas sinais de maior e menor lt gt e tralhas 8 Para definir o conte do de um modelo j existente como uma regi o edit vel 1 No modelo selecione o texto ou conte do a ser tornado edit vel 2 Escolha Modificar gt Modelos gt Marcar como edit vel a sele o 3 Na caixa de di logo Nova regi o edit vel digite um nome para a regi o A regi o edit vel ser real ada no modelo Uma tabela inteira ou uma c lula de uma tabela pode ser marcada como edit vel no entanto n o poss vel ma
423. o HT ML selecionado Se for alterada a formata o de um estilo HTML criado por voc o texto originalmente formatado com esse estilo n o ser atualizado Aplicar os estilos HTML Nesse tutorial voc utilizar um estilo HTML para formatar o texto do documento Our Story 1 Escolha Janela gt Estilos HTML Aparecer a paleta de estilos HTML Estilos HTML par T Estilos HTML Limpar o estilo da sele o S Limpar o estilo do par grafo 1 body a sossl Observe que os estilos na paleta se referem ao site my tutorial A paleta possui tr s itens e Os dois primeiros itens s o comandos do Dreamweaver Limpar o estilo da sele o e Limpar o estilo do par grafo Utilize esses comandos para limpar os estilos existentes no texto selecionado no documento e O outro item um estilo HTML para par grafos denominado body que foi criado para ser utilizado neste tutorial 2 Certifique se de que a op o Aplicar esteja selecionada no canto inferior esquerdo da paleta de estilos HTML 3 No documento my ourstory posicione o ponto de inser o no primeiro e o no p par grafo E poss vel posicionar o ponto de inser o em qualquer ponto de um par grafo para aplicar um estilo a ele 4 Na paleta de estilos HT ML clique no estilo body O texto no primeiro par grafo ser reformatado de acordo com o novo estilo 5 Aplique o estilo body aos outros par grafos do documento Criar os estilos HTML Em seguida voc
424. o HTML for real ado em amarelo claro na janela do documento ou no inspetor de origem de HTML isto significa que o Dreamweaver encontrou um HTML incorreto que n o pode ser exibido Fregientemente esses marcadores de HTML incorretos aparecer o quando for iniciada a digita o de um r tulo no inspetor de origem de HTML e em seguida se alterna para a janela do documento sem completar o r tulo Para corrigir o problema clique no marcador amarelo de HTML incorreto e siga a sugest o no inspetor de propriedades Consulte tamb m Sobre o Roundtrip HTML na p gina 338 Como utilizar os editores de HTML externos Talvez seja conveniente utilizar um editor de texto para codificar manualmente uma quantidade extensa de HTML JavaScript ou VBScript Qualquer editor de texto externo pode ser utilizado com o Dreamweaver incluindo o Bloco de Notas incorporado ao Windows 95 e NT ou o SimpleText incorporado ao Macintosh BBEdit HomesSite vi emacs e TextPad Consulte Como utilizar um editor de texto externo com o Dreamweaver na p gina 354 e Como utilizar o BBEdit com o Dreamweaver apenas no Macintosh na p gina 355 Como utilizar um editor de texto externo com o Dreamweaver poss vel iniciar o editor de texto principal a partir do Dreamweaver para editar o HTML de origem no documento e em seguida voltar ao Dreamweaver a fim de continuar a edi o graficamente O Dreamweaver detecta as altera es que foram salvas
425. o ao redor Por exemplo se a sele o contiver texto sem formata o especial o Quick Tag Editor ser aberto no modo Colocar o r tulo ao redor H uma exce o para essa regra quando a sele o incluir um r tulo de abertura ou finaliza o sem os seu correspondente o Quick Tag Editor iniciar no modo Editar o r tulo em vez de Colocar o r tulo ao redor e a expandir at o r tulo pai e o conte do da sele o No modo Colocar o r tulo ao redor pode ser inserido apenas um r tulo de abertura Se for inclu do mais de um r tulo aparecer uma mensagem de erro e tudo o que for inserido ser ignorado Quando o editor for fechado o r tulo inserido ser colocado no in cio da sele o e um r tulo de finaliza o correspondente no final Sobre os menus de sugest es Os menus pop up de sugest es exibem os r tulos e atributos do arquivo TagAttributeList txt situado na pasta Dreamweaver Configuration Podem ser adicionados ou removidos r tulos desse arquivo para ajud lo em sua edi o de HTML Como remover um r tulo Para remover um r tulo do documento mantendo o conte do inalterado se houver siga um dos procedimentos abaixo e Selecione o r tulo no seletor de r tulos no canto inferior esquerdo da janela do documento Em seguida escolha Remover o r tulo no menu contextual e Selecione algo na janela do documento ou clique para colocar o ponto de inser o na janela Em seguida escolha Re
426. o criar sites e documentos 93 94 Cap tulo 3 Como definir uma imagem de fundo ou a cor da p gina Utilize a caixa de di logo Propriedades da p gina para definir uma imagem ou a cor do fundo da p gina Se forem utilizadas uma imagem e uma cor de fundo a cor aparecer enquanto a imagem for descarregada Se a imagem de fundo contiver algum pixel transparente a cor de fundo transparecer Para definir uma imagem ou cor do fundo 1 Escolha Modificar gt Propriedades da p gina ou selecione Propriedades da p gina no menu contextual 2 Defina uma imagem de fundo e ou uma cor de fundo e Clique no bot o Procurar no Windows ou no bot o Escolher no Macintosh para procurar e selecionar a imagem ou digite o caminho at a imagem de fundo na caixa Imagem do fundo O Dreamweaver colocar lado a lado repetir a imagem de fundo se esta n o 5 preencher inteiramente a janela exatamente como fazem os navegadores Escolha uma cor para o fundo na caixa Cor do fundo Consulte Como escolher as cores na p gina 90 Como definir as cores padr o do texto Defina as cores padr o para um texto comum v nculos visitados ou n o e os v nculos ativos na caixa de di logo Propriedades da p gina ou escolha um esquema de cores predefinido para configurar as cores do texto e do fundo da p gina Para s P 8 3 a obter mais informa es consulte Como escolher as cores na p gina 90 Nota A cor do
427. o de atualiza o autom tica de uma p gina a cada 10 segundos O Dreamweaver possui muitas a es comuns que podem ser disparadas atrav s da utiliza o destes eventos A lista tamb m especifica o navegador que pode gerar cada evento NS3 corresponde ao Netscape Navigator 3 0 NS corresponde ao Netscape Navigator 4 0 IE3 corresponde ao Internet Explorer 3 0 E corresponde ao Internet Explorer 4 0 Para obter informa es sobre os navegadores da vers o 5 0 consulte a Central de Suporte do Dreamweaver no endere o http www macromedia com support dreamweaver Para obter mais informa es sobre os eventos relacionados liga o de dados e a letreiros no Internet Explorer consulte a p gina de refer ncia de Dynamic HTML da Microsoft listada em Recursos de tecnologias de Web e HTML na p gina 19 Observe que a maioria dos eventos n o se aplicam a todos os objetos Para obter mais detalhes sobre quais os eventos que se aplicam aos r tulos em cada navegador consulte os arquivos na pasta Dreamweaver Configuration Behaviors Events onAbort NS3 NS4 IE4 gerado quando o usu rio interromper a carga de uma imagem no navegador por exemplo quando clicar no bot o Parar do navegador enquanto a imagem estiver sendo carregada onAfterUpdate IE4 gerado quando um elemento de dados ligados na p gina tiver terminado a atualiza o da origem dos dados onBeforeUpdate IE4 gerado quando um elemento de dados liga
428. o desenho s c lulas da tabela r tulos TD em vez das linhas r tulos TR selecione a op o Aplicar todos os atributos aos r tulos TD e n o aos TR A formata o aplicada s c lulas da tabela prevalecer sobre aquela aplicada s linhas Contudo a formata o aplicada s linhas da tabela resultar em um c digo de origem de HT ML mais limpo e conciso Consulte Como formatar as tabelas na p gina 221 Clique em Aplicar ou OK para formatar a tabela com o desenho selecionado Como criar tabelas 225 226 Cap tulo 8 Como copiar e colar c lulas poss vel copiar ou colar diversas c lulas da tabela sem que percam a formata o ou copiar apenas o conte do da c lula As c lulas podem ser coladas em um ponto de inser o ou em um local selecionado de uma tabela existente Para colar diversas c lulas da tabela o conte do da rea de trabalho dever ser compat vel com a estrutura da tabela ou da sele o na qual as c lulas ser o coladas Para recortar ou copiar c lulas de uma tabela 1 Selecione uma ou mais c lulas na tabela Para serem recortadas ou copiadas as c lulas selecionadas devem formar um ret ngulo Consulte Como selecionar os elementos da tabela na p gina 219 092598 California Sonoma 3pm 9pm Honey Festival Featuring the Sonoma Strings prego 10 01 98 Pear Canning Demonstration 11am 1pm Bend Oregon 100898 7pm 9pm Benent for Southwest Chamber Ensemble Sc
429. o documento Todas as regi es edit veis no corpo de um modelo s o mostradas em uma lista na base do submenu Modificar gt Modelos Utilize essa lista para selecionar e editar as regi es Para localizar uma regi o edit vel e selecion la no documento Escolha Modificar gt Modelos e selecione o nome da regi o na lista A regi o ser selecionada no documento Inicie a digita o para substituir o conte do da regi o Como desanexar um documento de um modelo Para alterar as regi es edit veis e bloqueadas de uma p gina que utiliza um modelo necess rio desanexar primeiro a p gina do modelo Em seguida edite a p gina como se nenhum modelo tivesse sido aplicado Contudo a p gina n o ser mais atualizada quando isso ocorrer com o modelo Para desanexar um documento de um modelo 1 Abra o documento a ser desanexado 2 Escolha Modificar gt Modelos gt Desanexar de Modelo A p gina ser desanexada do modelo e todas as regi es se tornar o edit veis Como modificar os modelos e atualizar o site Quando for feita uma altera o a um modelo o Dreamweaver solicitar a atualiza o das p ginas que o utilizarem Podem ser utilizados tamb m os comandos de atualiza o para renovar manualmente a p gina atual ou o site inteiro A aplica o dos comandos de atualiza o funciona da mesma maneira que a reaplica o do modelo Para abrir o modelo utilizado para criar o documento atual Escolha Modificar gt Mod
430. o documento do Dreamweaver copi lo na rea de transfer ncia Para colar o HTML do Fireworks em um documento do Dreamweaver 1 Salve o documento do Dreamweaver em um site definido 2 No Fireworks escolha Arquivo gt Exportar 3 Na parte inferior da caixa de di logo Exportar selecione Dreamweaver 3 no menu pop up Estilo e Copiar para a rea de transfer ncia no menu pop up Local 4 No alto da caixa de di logo Exportar navegue at uma localiza o na pasta raiz local do site do Dreamweaver e clique em Salvar para salvar o arquivo de imagem 5 No Dreamweaver coloque o ponto de inser o na janela do documento e escolha Editar gt Colar A imagem e seu HTML associado e o JavaScript se houver ser o adicionados ao documento do Dreamweaver nos locais apropriados imagem aparecer na janela do documento para ver o c digo de origem que foi adicionado escolha Janela gt Origem de HTML Como inserir imagens 209 210 Cap tulo 7 Como inserir o HTML do Fireworks Se a imagem e os arquivos HTML forem criados no Fireworks 2 ou 3 voc poder importar a imagem e o c digo de origem de HTML a ela associado com o objeto Inserir HTML do Fireworks Para inserir o HTML do Fireworks em um documento do Dreamweaver 1 Salve o documento do Dreamweaver em um site definido 2 Coloque o ponto de inser o na janela do documento e siga um dos procedimentos abaixo e Clique no bot o Inserir HTML do Fireworks na pale
431. o documento para torn la ativa 26 Cap tulo 1 Criar a home page do site da Scaal Agora que j conta com a estrutura onde ser armazenado o site da Scaal voc criar uma home page para o site medida que construir este documento voc ir adicionar o t tulo da p gina camadas imagens texto e v nculos a ele o documento conter os mesmos componentes de desenho que a home page conclu da da Scaal Abra os seguintes componentes do espa o de trabalho se ainda n o tiverem sido abertos e A paleta de objetos escolha Janela gt Objetos que ser utilizada para adicionar objetos ao documento e O inspetor de propriedades escolha Janela gt Propriedades que ser utilizado para definir as propriedades ou atributos dos objetos contidos no documento Salve o documento Salve o documento em branco criado quando voc iniciou o Dreamweaver 1 Escolha Arquivo gt Salvar 2 Na caixa de di logo Salvar como selecione a pasta Sites Scaal site onde ser salvo o arquivo 3 No campo Nome do aquivo digite my scaal home html 4 Clique em Salvar Tutorial do Dreamweaver 27 28 Cap tulo 1 Definir o t tulo da p gina A defini o do t tulo da p gina de um documento HTML auxilia os usu rios a identificar e controlar a p gina onde estiverem navegando Quando a p gina for exibida em um navegador o seu t tulo aparecer na barra de t tulo deste Quando a p gina for marcada o seu t tulo aparecer na lis
432. o documento e tempo de descarga k O m e 1 lt body gt lt table gt lt tr gt lt td gt lt p gt lt font gt lt font gt lt img gt 598 x 450 28K 7 8 seg sh E T DE D lt 7 ss DER T E ER Seletor de O menu pop up Mini iniciador r tulos Tamanho da janela Como redimensionar a janela do documento As dimens es atuais da janela do documento em pixels aparecer o na barra de status da mesma a o de clicar no tamanho da janela exibe o menu pop up Tamanho da janela que permite definir o tamanho da janela de modo a caber nos diversos tamanhos comuns de monitores Para ajud lo a desenhar uma p gina com boa apar ncia em um tamanho espec fico ou em diversos tamanhos a janela do documento poder ser ajustada a qualquer um dos tamanhos listados no menu pop up Nota O tamanho da janela fornecido como as dimens es internas da janela do navegador sem bordas enquanto que o tamanho do monitor est listado entre par nteses Assim por exemplo a op o 536 x 196 640 x 480 padr o o tamanho da janela a ser utilizado se for prov vel que os visitantes estejam utilizando o Internet Explorer ou o Netscape Navigator em suas configura es padr o em um monitor de 640 x 480 Para redimensionar a janela do documento de acordo com um tamanho pr determinado Escolha um dos tamanhos no menu pop up situado na parte inferior da janela do documento Para alterar os valores na lista do menu pop up Tamanho da janela
433. o elemento arraste a al a de sele o da parte de baixo e Para ajustar a largura e altura do elemento simultaneamente arraste a al a de sele o do canto e Pressione a tecla Shift e arraste a al a de sele o do canto para preservar as propor es entre largura e altura do elemento enquanto ajusta as suas dimens es Os elementos podem ser redimensionados visualmente at um m nimo de 6 x 6 pixels Para ajustar a largura e a altura de um elemento a um tamanho menor por exemplo 1 x 1 pixel utilize o inspetor de propriedades a fim de digitar um valor num rico Para retornar o elemento s suas dimens es originais clique nos identificadores L e U no inspetor de propriedades Como utilizar um editor de imagens externo Uma imagem selecionada pode ser aberta em um editor de imagens externo diretamente no Dreamweaver Quando voc retornar ao Dreamweaver ap s salvar o arquivo de imagem as altera es feitas na imagem aparecer o na janela do documento O Macromedia Fireworks pode ser utilizado como um editor de imagens externo O Fireworks 3 utiliza as Design Notes para determinar onde est o arquivo PNG original no seu disco r gido local ou solicitar que o encontre O Fireworks 2 n o utiliza as Design Notes mas solicitar que localize o arquivo original PNG O Fireworks 1 procura automaticamente a pasta que cont m o arquivo selecionado para um arquivo PNG com o mesmo nome Por exemplo se for selecionada uma
434. o hist rico de etapas poss vel copiar as etapas de um documento e col las em outro Para reutilizar as etapas de um documento em outro documento 1 Inicie com o documento que cont m as etapas a serem reutilizadas 2 Selecione as etapas na paleta de hist rico 3 Clique no bot o Copiar as etapas na paleta de hist rico para copiar as etapas 4 Abra o outro documento 5 Posicione o ponto de inser o no local desejado ou selecione um objeto ao qual deseja aplicar as etapas 6 Escolha Editar gt Colar para colar as etapas As etapas ser o executadas novamente medida que forem coladas na paleta de hist rico do documento A paleta de hist rico as mostrar como apenas uma etapa denominada Colar as etapas Nota O comando Copiar as etapas difere do comando Copiar N o poss vel utilizar o comando Copiar do menu Editar para copiar as etapas embora elas sejam coladas com o comando Editar gt Colar O fechamento de um documento limpar o seu hist rico Se voc desejar utilizar etapas de um documento ap s t lo fechado copie as etapas com Copiar as etapas ou salve as como um comando consulte Como criar novos comandos a partir de etapas do hist rico na p gina 101 antes de fechar o documento Copie com cuidado as etapas que incluem um comando Copiar ou Colar e N o utilize Copiar as etapas se uma das etapas for um comando Copiar a tentativa de colar estas etapas poder acarretar um comportamento i
435. o para indicar o elemento especificado Ou seja quando o ponteiro passa a indicar o elemento Em geral o elemento especificado para este evento um v nculo onMouseUp NS4 IE4 gerado quando o bot o do mouse for solto onMove NS4 gerado quando uma janela ou moldura for movida onReadyStateChange IE4 gerado quando o estado do elemento especificado for alterado Os estados do elemento podem ser n o inicializado carregando e conclu do onReset NS3 NS4 IE3 IE4 gerado quando um formul rio for redefinido aos seus valores padr o onResize NS4 IE4 gerado quando o usu rio redimensionar a janela do navegador ou uma moldura onRoweEnter IE4 gerado quando o ponteiro de registro da origem dos dados ligados tiver sido alterado onRowExit IE4 gerado quando o ponteiro de registro da origem dos dados ligados estiver prestes a ser alterado onscroll TE4 gerado quando o usu rio rolar para cima ou para baixo na p gina onselect NS3 NS4 IE3 IE4 gerado quando o usu rio selecionar texto em um campo de texto onStart 1E4 gerado quando o conte do de um elemento do letreiro iniciar um loop onSubmit NS3 NS4 IE3 IE4 gerado quando o usu rio enviar um formul rio onUnload NS3 NS4 IE3 IE4 gerado quando o usu rio deixar a p gina Como anexar um comportamento poss vel anexar comportamentos ao documento inteiro ou seja ao r tulo BODY ou aos v nculos imagens
436. o som na p gina 322 CAP TULO 12 Como utilizar os comportamentos Os comportamentos permitem a intera o do usu rio com a p gina a fim de alter la ou executar certas tarefas Um comportamento uma combina o entre um evento e uma a o Por exemplo quando o usu rio mover o mouse sobre uma imagem um evento esta poder ser real ada uma a o Uma a o consiste de c digo previamente escrito em JavaScript que realiza determinadas tarefas como a abertura da janela de um navegador a execu o de um som ou a interrup o de um filme Shockwave Os eventos s o definidos pelos navegadores para cada elemento da p gina por exemplo onMouseOver onMouseOut e onClick s o eventos associados a v nculos na maior parte dos navegadores enquanto que onLoad um evento associado a imagens e ao corpo do documento Os eventos s o gerados pelos navegadores em resposta a a es do usu rio por exemplo quando um visitante sua p gina mover o ponteiro sobre um v nculo o navegador gerar um evento onMouseOver e chamar a fun o JavaScript se houver que tiver sido associada ao evento Os eventos que podem ser utilizados para disparar uma determinada a o variam de acordo com o navegador utilizado Ao anexar um comportamento a um elemento da p gina voc estar especificando uma a o e o evento que a disparar Diversas a es podem ser disparadas pelo mesmo evento e poss vel especificar a ordem na qual as a
437. o tiver sido alterado fora do Dreamweaver n o haver problemas em clicar em Parar quando o bot o aparecer Como alterar um v nculo no site inteiro Al m de o Dreamweaver atualizar os v nculos automaticamente sempre que voc transferir ou renomear um arquivo tamb m poss vel alterar manualmente todos os v nculos inclusive mailto FTP nulos e de roteiros para que estes indiquem outras localiza es Esta op o pode ser utilizada a qualquer momento por exemplo as palavras os filmes deste m s podem ser vinculadas a movies julho html no site inteiro e em primeiro de agosto esses v nculos devem ser alterados para indicar movies agosto html mas particularmente til quando for necess rio excluir um arquivo vinculado a outros arquivos Para alterar um v nculo no site inteiro 1 Selecione um arquivo no painel local na janela de site 2 Escolha Site gt Alterar o v nculo no site inteiro 3 Na caixa de di logo que aparecer clique no cone correspondente pasta para procurar e selecionar um arquivo ou no campo Nos v nculos a digite o caminho e o nome do arquivo de um novo arquivo ao qual ser estabelecido um v nculo 4 Clique em OK O Dreamweaver atualizar os documentos que se vincularem ao arquivo selecionado de maneira que indiquem o novo arquivo utilizando o formato de caminho existente no documento por exemplo se o caminho antigo for relativo a documento o novo caminho tamb m ser do me
438. ocultar os arquivos do mapa do site na p gina 132 Para modificar o t tulo de uma p gina 1 Certifique se de que a op o Mostrar os t tulos das p ginas esteja selecionada Escolha Exibir gt Mostrar os t tulos das p ginas no Windows ou Site gt Exibi o do mapa do site gt Mostrar os t tulos das p ginas no Macintosh Siga um dos procedimentos abaixo Selecione uma p gina e em seguida clique no seu t tulo Quando o t tulo se tornar um campo edit vel digite um novo t tulo de documento Selecione uma p gina e em seguida escolha Arquivo gt Renomear no Windows ou Site gt Renomear no Macintosh Para alterar a home page siga um dos procedimentos abaixo e No painel Pasta local da janela do site clique no arquivo a ser alterado para home page e escolha Definir como home page no menu contextual e Escolha Site gt Nova home page no Windows ou Site gt Exibi o do mapa do site gt Nova home page no Macintosh para criar uma nova home page e Escolha Site gt Definir como home page no Windows ou Site gt Exibi o do mapa do site gt Definir como home page no Macintosh para transformar uma p gina existente em uma home page Para atualizar a exibi o do mapa do site depois de ter conclu do as altera es e Clique em qualquer local da janela do mapa do site para cancelar a sele o dos arquivos e em seguida escolha Exibir gt Atualizar o local no Windows ou Site gt
439. ocumento na moldura Para alterar a cor do fundo de um documento em uma moldura 1 Siga um dos procedimentos abaixo e Posicione o cursor na moldura e escolha Modificar gt Propriedades da p gina e Mantendo pressionado o bot o direito do mouse no Windows ou a tecla Control no Macintosh clique na moldura e no menu contextual escolha Propriedades da p gina 2 Clique no menu pop up Fundo para selecionar uma cor Como controlar o conte do de molduras com os v nculos Utilize o menu pop up Destino no inspetor de propriedades para selecionar uma moldura na qual abrir um arquivo poss vel definir a abertura de um arquivo em uma nova janela a substitui o das informa es na mesma moldura que o v nculo e a substitui o das informa es em outra moldura O conte do indicado por um v nculo pode anular a moldura ou aparecer em uma janela de navegador inteiramente nova Para designar uma moldura 1 Selecione um texto ou objeto 2 No campo V nculo no inspetor de propriedades siga um dos procedimentos abaixo e Digite o nome do arquivo a ser vinculado e Clique no cone correspondente pasta e selecione o arquivo a ser vinculado e Clique e arraste o cone do indicador de arquivos para selecionar o arquivo a ser vinculado Para especificar uma ncora no outro arquivo a ser vinculado digite o sinal de n mero antes do nome da ncora Consulte Como criar v nculos a uma ncora com nome na p
440. ogo Novo estilo defina o novo estilo Consulte Como criar uma folha de estilos CSS na p gina 192 Ao terminar de definir os estilos clique em Salvar Como editar uma folha de estilos CSS externa Quando uma folha de estilos CSS que controla o texto no documento for editada o texto inteiro ser reformatado instantaneamente As edi es afetam todos os documentos vinculados folha de estilos Para editar uma folha de estilos CSS externa 1 Abra qualquer documento que esteja vinculado folha de estilos CSS externa a ser alterada Siga um dos procedimentos abaixo Escolha Janela gt Estilos CSS ou clique no bot o Estilos CSS no Iniciador Na paleta de estilos CSS clique no cone de Abrir a folha de estilos Escolha Texto gt Estilos CSS gt Editar a folha de estilos Na caixa de di logo Editar a folha de estilos selecione o nome da folha de estilos externa e clique em Editar Aparecer uma segunda caixa de di logo Editar a folha de estilos que exibir os estilos na folha de estilos externa Edite os estilos Consulte Como criar uma folha de estilos CSS na p gina 192 Ao terminar de definir os estilos clique em Salvar Como formatar o texto 191 192 Cap tulo 6 Como criar uma folha de estilos CSS Crie uma folha de estilos CSS para automatizar a formata o dos r tulos HTML ou de uma faixa de texto identificada pelo atributo CLASS Para criar uma folha de estilos CSS 1 Esc
441. olha Janela gt Estilos CSS e clique no bot o Novo estilo na paleta de estilos css Escolha uma dentre as seguintes op es de estilo CSS Criar estilo personalizado classe cria um estilo que pode ser aplicado como um atributo CLASS a uma faixa ou bloco de texto Redefinir o r tulo HTML redefine a formata o padr o de um r tulo HTML espec fico Utilizar o seletor CSS define a formata o para uma determinada combina o de r tulos ou para todos os r tulos que cont m um atributo ID espec fico Digite um nome r tulo ou seletor para o novo estilo Os nomes de estilos CSS personalizados devem iniciar com um ponto Caso o ponto n o seja colocado o Dreamweaver o digitar Para redefinir um estilo de r tulo HTML digite um r tulo HTML ou escolha algum no menu pop up Para um seletor CSS digite qualquer crit rio v lido para um seletor por exemplo TD H2 ou amp myStyle ou escolha um seletor no menu pop up Clique em um nome de painel no lado esquerdo da caixa de di logo e escolha as defini es de formata o do novo estilo CSS no painel correspondente Deixe alguns atributos em branco caso n o sejam importantes para o estilo Os atributos que n o aparecerem na janela do documento s o marcados com um asterisco na caixa de di logo Defini o do estilo Alguns dos atributos de estilo CSS que podem ser definidos no Dreamweaver t m uma apar ncia diferente no Microsoft Internet Explorer 4 0 e no Netsca
442. omo obter ajudas iee iberren spend ss ua De ana nas ee 419 Matriz de atalhos de teclado cccicciciiiciiciicia 420 NDICE REMISSIVO c 425 INTRODU O Guia de introdu o O Dreamweaver um editor visual profissional que cria e gerencia sites e p ginas da Web Com esse programa f cil criar e editar p ginas compat veis com diversos navegadores e plataformas O Dreamweaver oferece ferramentas avan adas de desenho e layout bem como facilita a utiliza o dos recursos do HTML din mico como os comportamentos e camadas animadas sem gravar uma linha de c digo A verifica o do navegador de destino detecta os problemas potenciais que seu trabalho possa apresentar em todas as plataformas e navegadores A tecnologia Roundtrip HT ML da Macromedia importa documentos HTML sem reformatar o c digo e o Dreamweaver pode ser definido para limpar e reformatar o HTML quando voc quiser O Dreamweaver pode ser totalmente personalizado Voc pode criar os seus pr prios objetos e comandos modificar os menus e atalhos de teclado al m de gravar c digo JavaScript para estender os recursos do Dreamweaver com novos comportamentos e inspetores de propriedades Requisitos do sistema Os seguintes hardware e software s o necess rios para executar o Dreamweaver Para o Microsoft Windows e Um processador Pentium da Intel ou equivalente de 120 MHz ou mais r pido executando o Windows 95 Windows 98 ou Windows NT vers
443. onalizar os menus do Dreamweaver O Dreamweaver cria todos os menus com a estrutura definida em um arquivo XML denominado menus xml e situado na subpasta Configuration Menus dentro da pasta do aplicativo do Dreamweaver A edi o desse arquivo modificar os menus do Dreamweaver na pr xima vez que o programa for iniciado Para obter informa es b sicas sobre a XML consulte Sobre o XML na p gina 371 poss vel adicionar alterar e remover atalhos de teclado para os itens de menu editando o arquivo menus xml Os itens de menu tamb m podem ser reordenados renomeados e removidos Nota Sempre fa a uma c pia de seguran a do arquivo menus xml em uso ou de qualquer arquivo de configura o do Dreamweaver antes de modific lo f cil cometer erros ao editar o arquivo de configura o de menus e no Dreamweaver n o h qualquer modo de reverter ao conjunto anterior de menus Contudo a pasta Configuration cont m uma c pia de seguran a do arquivo menus xml padr o denominada menus bak para reverter ao conjunto de menus padr o substitua o menus xml por uma c pia do menus bak Como editar o menu Comandos Determinados comandos podem ser adicionados ao menu Comandos alterando os seus nomes sem editar o arquivo menus xml Para criar novos comandos que s o colocados automaticamente no menu Comandos utilize a paleta de hist rico consulte Como criar novos comandos a partir de etapas do hist rico na p gina 1
444. ontes codifica o Utilize as prefer ncias de fontes codifica o para definir uma codifica o da fonte padr o nos novos documentos e para definir as fontes que o Dreamweaver utilizar para exibir cada codifica o de fonte A codifica o de um documento determinar como o documento ser exibido em um navegador As defini es de fontes do Dreamweaver permitem trabalhar em um texto com a fonte e o tamanho preferidos sem afetar a apar ncia do documento quando este for visualizado por outras pessoas em um navegador Princ pios b sicos do Dreamweaver 71 72 Cap tulo 2 Para alterar a codifica o do documento atual Escolha Modificar gt Propriedades da p gina e em seguida selecione uma codifica o no menu pop up Codifica o do documento Para alterar a codifica o padr o a ser utilizada na cria o de novos documentos Escolha Editar gt Prefer ncias clique em Fontes codifica o na lista de Categorias e escolha uma codifica o no menu pop up Codifica o padr o Para definir as fontes a serem utilizadas em cada tipo de codifica o 1 Escolha Editar gt Prefer ncias e clique em Fontes codifica o na lista de Categorias 2 Selecione o tipo de codifica o como Ocidental Latinl ou japon s por exemplo na lista Defini es de fontes e em seguida escolha as fontes a serem utilizadas na codifica o nos menus pop up de fontes situados abaixo da lista Defini es de fontes Usando
445. or Imsg O Internet Explorer 3 0 oferece suporte a COLOR nas r guas horizontais por m o Netscape Navigator 3 0 n o oferece gt 6 Error pode ser utilizado para todas as situa es de erro ou tamb m Warning para indicar que o r tulo ser ignorado mas n o causar um erro Extens o dos recursos do Dreamweaver Princ pios b sicos O Dreamweaver foi projetado para ser extens vel Ele inclui um int rprete de JavaScript para que voc possa ler e executar o c digo JavaScript e fornece uma interface de programa o de aplicativos API um amplo conjunto de fun es JavaScript que permite aos programadores estender os recursos do Dreamweaver O Dreamweaver tamb m oferece o Document Object Model DOM que permite s extens es examinar e modificar a estrutura e o conte do de um documento Com a API de JavaScript poss vel criar objetos a es de comportamento comandos inspetores de propriedades paletas flutuantes e conversores de dados todos denominados coletivamente como extens es Voc pode criar tamb m novos objetos e comandos simples sem conhecer programa o consulte Como alterar a paleta de objetos na p gina 388 e Como criar novos comandos a partir de etapas do hist rico na p gina 101 para obter mais detalhes Por m se o objetivo for mais avan ado para adicionar recursos ao Dreamweaver preciso gravar extens es nas linguagens JavaScript ou C Para obter mais informa es sobre
446. orizontal 2 Siga um dos procedimentos abaixo e Escolha Inserir gt R gua horizontal Escolha Janela gt Objetos para abrir a paleta de objetos e em seguida clique no bot o R gua horizontal Para modificar uma r gua horizontal 1 Na janela do documento selecione a r gua horizontal 2 Escolha Janela gt Propriedades para abrir o inspetor de propriedades e modificar as propriedades conforme o desejado Como selecionar os elementos na janela do documento Normalmente voc clica em um elemento para selecion lo Se um elemento estiver invis vel talvez seja preciso torn lo vis vel antes de escolh lo Utilize as t cnicas abaixo para selecionar os elementos e Para selecionar um elemento vis vel na janela do documento arraste o mouse sobre o elemento ou clique nele e Para selecionar um elemento invis vel escolha Exibir gt Elementos invis veis se esta op o j n o estiver selecionada e em seguida clique no marcador do elemento Consulte Sobre os elementos invis veis na p gina 90 Alguns objetos aparecem na p gina em um lugar diferente de onde est inserido o seu c digo Por exemplo uma camada pode estar em qualquer posi o na p gina mas o c digo que a define est em uma posi o fixa O Dreamweaver exibe os marcadores na janela do documento para mostrar a localiza o do c digo dos elementos invis veis e Para selecionar um r tulo completo inclusive o seu conte do se hou
447. ormata o na paleta de estilos HTML coincidem com as do inspetor de propriedades 4 Clique em OK Para criar um novo estilo HTML com base em um estilo HTML j existente 1 Certifique se de que n o haja qualquer texto selecionado na janela do documento 2 Na paleta de estilos HTML selecione um estilo 3 Clique com o bot o direito do mouse no Windows ou pressione a tecla Control e clique no Macintosh no estilo e em seguida escolha Duplicar no menu contextual Aparecer a caixa de di logo Definir o estilo HT ML Para voltar s op es padr o clique em Limpar 4 Conclua as etapas 3 e 4 das instru es para criar um novo estilo com base no texto existente Para criar um novo estilo HTML a partir do zero 1 Na paleta de estilos HTML clique no cone de Novo estilo poss vel tamb m escolher Texto gt Estilos HTML gt Novo estilo Aparecer a caixa de di logo Definir o estilo HTML 2 Conclua as etapas 3 e 4 das instru es para criar um novo estilo com base no texto existente Clique em Limpar para redefinir a caixa de di logo para as op es padr o 3 Clique em OK Para editar um estilo HTML existente 1 Certifique se de que n o haja qualquer texto selecionado na janela do documento 2 Na paleta de estilos HTML verifique se a op o Aplica o autom tica est desativada Se Aplica o autom tica estiver ativada o estilo HTML ser aplicado quando for selecionado na paleta de esti
448. ory selecionada Esta a imagem original que ser substitu da por outra real ada quando o ponteiro do mouse passar sobre ela x Permutar a imagem Imagens TT Ajuda Definir a origem como Procurar p i I Pr camegar as imagens F Restaurar as imagens onMouseDut Clique em Procurar para ir at a pasta Scaal site Images selecione bm ourstory over gif e em seguida clique em Selecionar no Windows ou Escolher no Macintosh para selecionar a imagem Essa imagem substituir a original durante o evento onMouseOver Permutar a imagem DK Imagens Po Ajuda Definir a origem como Images btn thiswesk over gif a i K Pr camegar as imagens FP Restaurar as imagens onMouseOut Aceite as defini es padr o de pr carga e restaura o de imagens A op o Pr carregar as imagens carrega a imagem permutada no cache do navegador durante o carregamento da p gina a fim de que n o seja notada nenhuma pausa antes que apare a a imagem real ada quando o usu rio mover pela primeira vez o ponteiro do mouse sobre a imagem Our Story A op o Restaurar as imagens onMouseOut designa automaticamente a a o Restaurar a imagem permutada para o evento onMouseOut referente a essa imagem Este procedimento retornar a imagem ao seu estado original quando o usu rio mover o ponteiro do mouse para fora dela 7 Clique em OK para fechar a caixa de di logo Permutar a imagem e aplicar as altera
449. os Nota Ao salvar os arquivos utilize as linhas de sele o de molduras na janela do documento para ajud lo a identificar os documentos com molduras e aqueles com um conjunto de molduras Sobre as propriedades das molduras e conjuntos de molduras As molduras e os conjuntos de molduras t m inspetores de propriedades pr prios e As propriedades das molduras determinam o nome da moldura arquivo de origem margens pagina o redimensionamento e bordas de cada moldura em um conjunto e As propriedades dos conjuntos de molduras controlam as dimens es das molduras assim como a cor e largura das bordas entre elas Para exibir as propriedades da moldura 1 Escolha Janela gt Propriedades para exibir o inspetor de propriedades caso n o esteja aberto 2 Siga um dos procedimentos abaixo e Mantendo pressionada a tecla Alt no Windows ou as teclas Option e Shift no Macintosh clique na moldura e Clique em uma moldura no inspetor de molduras Como definir as propriedades das molduras Utilize o inspetor de propriedades da moldura para denominar uma moldura e definir as bordas e margens Para examinar todas as seguintes propriedades das molduras clique na seta de expans o localizada no canto inferior direito do inspetor de propriedades Para especificar as propriedades das molduras 1 Selecione uma moldura seguindo um dos procedimentos abaixo e Clique em uma moldura no inspetor de molduras e Mantendo pres
450. os mas como uma maneira de exibir as etapas na ordem em que foram efetuadas Para definir o n mero de etapas que a paleta de hist rico manter e mostrar 1 Escolha Editar gt Prefer ncias e selecione Geral na lista de categorias 2 Digite o N mero m ximo de etapas da paleta de hist rico O valor padr o dever ser suficiente para as necessidades da maioria dos usu rios Quanto mais alto o n mero maiores ser o os requisitos de mem ria da paleta de hist rico Se o n mero m ximo de etapas definido na paleta de hist rico for excedido as primeiras etapas ser o descartadas Para apagar a lista da paleta de hist rico do documento atual No menu contextual da paleta de hist rico escolha Limpar o hist rico Este comando tamb m limpa todas as informa es relacionadas aos comandos Desfazer no documento atual depois de escolher Limpar o hist rico n o ser mais poss vel desfazer as etapas que tiverem sido limpas Observe que o comando Limpar o hist rico n o desfaz etapas ele simplesmente remove o registro das etapas da mem ria do Dreamweaver Como criar sites e documentos 95 96 Cap tulo 3 Como desfazer as altera es Para desfazer a ltima opera o realizada em um documento escolha Editar gt Desfazer da mesma maneira que faria em qualquer outro aplicativo O nome do comando Desfazer no menu Editar ser alterado refletindo a ltima opera o efetuada Para desfazer mais de uma etapa simultaneame
451. os a um documento na p gina 114 e Como criar v nculos a uma ncora com nome na p gina 119 respectivamente mas h tamb m outros tipos de v nculos V nculo nulo aquele n o designado Utilize esse tipo de v nculo para ativar os objetos ou o texto em uma p gina Quando o texto ou objeto estiver ativo a ele poder ser anexado um comportamento para permutar uma imagem ou exibir uma camada quando o ponteiro for movido sobre o v nculo Para obter informa es sobre a anexa o de comportamentos a objetos consulte Como anexar um comportamento na p gina 303 V nculos de roteiros executam o c digo JavaScript ou chamam uma fun o JavaScript sendo teis para fornecer informa es adicionais ao usu rio sobre um item sem sair da p gina da Web atual Os v nculos de roteiros tamb m podem ser utilizados para c lculos valida es de formul rios e outras tarefas de processamento quando um usu rio clicar em um determinado item Para criar um v nculo nulo 1 Selecione o texto uma imagem ou um objeto na janela do documento 2 No inspetor de propriedades digite um sinal de n mero na caixa V nculo Para criar um v nculo de roteiro 1 Selecione o texto uma imagem ou um objeto na janela do documento 2 No campo V nculo do inspetor de propriedades digite javascript seguido de c digo JavaScript ou de uma chamada a fun o Por exemplo quando for digitado javascript alert Este recurso n o es
452. os documentos que utilizam os modelos apenas as regi es bloqueadas est o real adas Somente o conte do edit vel n o real ado poder ser alterado T Quebra autom deliha T N meros de inha TO PIU oyCOror peet As regi es Sprankiapi lt p gt t lt td gt bloqueadas est o lt td vidth 367 valign top bgcolor CCCC99 gt lt gBeginEditeble ii image here lt fEndEditable gt lt td gt real adas lt td width 218 bgcolor CC9933 rowspan 4 gt enhsp lt td gt lt tr gt lt tr gt lt td width 149 height 45 gt gnbsp lt td gt Apenas as rEgIOES sra width s bgcolor CCcc99 gt snbsp lt td gt edit veis podem ser lt td width 367 bgcolor CCCC99 height 45 gt lt font face Verdana Ar Rss product namej lt gEndEditable gt lt font gt lt font gt lt td gt modificadas lt tr gt lt tr gt lt td width 149 gt enhsp lt td gt lt td width 5 bgcolor HCCCC99 gt enhsp lt td gt lt td vidth 367 hgcolor fCCCC99 gt lt font face Verdana Arial Helveti production description lt fEndEditable gt lt font gt lt td gt lt tr gt lt tr gt lt td width 149 gt cnbsp lt td gt 364 Cap tulo 14 Como exibir o HTML edit vel e o bloqueado O conte do edit vel delimitado no HTML atrav s dos coment rios do Dreamweaver amp BeginEditable e 4EndEditable O c digo de origem de HTML de um alocador de espa o ed
453. os em Acima e Abaixo e zero em esquerda e direita Para permitir apenas o movimento horizontal digite valores positivos em esquerda e direita e zero em Acima e Abaixo Digite os valores do destino de soltura em pixels nos campos esquerda e Acima O destino de soltura o ponto at o qual voc deseja que o usu rio arraste a camada A camada ter alcan ado o destino de soltura quando as suas coordenadas esquerda e do alto coincidirem com os valores digitados nos campos esquerda e Acima Os valores se relacionam ao canto superior esquerdo da janela do navegador Clique em Obter a posi o atual para preencher automaticamente os campos com a posi o da camada Digite um valor em pixels no campo Encaixar se distante a fim de determinar a dist ncia m nima do destino de soltura da qual o usu rio dever se aproximar para a camada se encaixar no destino Quanto maior o valor mais f cil ser para o usu rio detectar o destino de soltura 10 No caso de quebra cabe as simples e manipula es de cen rios n o h 1 necessidade de ultrapassar este ponto Para definir a al a de arraste da camada controlar o movimento da camada enquanto est sendo arrastada e disparar uma a o quando a camada for solta clique na guia Avan ado Para especificar se o usu rio dever clicar em uma determinada rea da camada para que esta seja arrastada escolha rea dentro da camada no menu pop up Al a de arras
454. os utilizados para identificar o filme Shockwave poss vel escolher os r tulos OBJECT e EMBED ou apenas um destes r tulos Recomendamos o valor padr o OBJECT e EMBED Alinhar determina como o filme ser alinhado na p gina Consulte Como alinhar os elementos na p gina 203 para obter uma descri o de cada op o Cor do fundo especifica uma cor de fundo para a rea do filme Esta cor tamb m aparecer enquanto o filme n o estiver sendo executado durante a carga e ap s a sua execu o Ident define o par metro opcional Ident do ActiveX Este par metro utilizado mais frequentemente para passar informa es entre os controles ActiveX Bordas especifica a largura da borda ao redor do filme Espa o V e Espa o H especificam o n mero de pixels de espa o em branco acima abaixo e em ambos os lados do filme Imagem Alt apenas com o r tulo OBJECT especifica uma imagem a ser exibida se o navegador do usu rio n o oferecer suporte aos controles ActiveX Par metros abre uma caixa de di logo na qual podem ser digitados par metros adicionais a serem passados ao filme Shockwave Consulte Sobre os par metros na p gina 297 O filme Shockwave deve contar com um autor para poder receber estes par metros Como inserir m dia 287 288 Cap tulo 11 Como inserir filmes Flash A tecnologia Flash da Macromedia constitui a solu o mais eficiente para a produ o de gr ficos e anima es com base em
455. ottsdale Arizona Sele o correta As c lulas podem ser recortadas ou copiadas 09 25 98 California Sonoma 3pm 9pm Honey Festival Featuring the Sonoma Strings asian 10 01 98 Pear Canning Demonstration 11am 1pm Bend Oregon 10 0898 7pm 9pm Benefit for Southwest Chamber Ensemble Scottsdale Arizona Sele o incorreta Estas c lulas n o podem ser recortadas ou copiadas 2 Recorte ou copie as c lulas utilizando os comandos no menu Editar Se for selecionada a linha ou coluna inteira esta ser removida da tabela quando for escolhida a op o Editar gt Recortar Para colar as c lulas da tabela 1 Escolha onde as c lulas ser o coladas Para colar as c lulas antes ou acima de uma determinada c lula clique nesta c lula Para criar uma nova tabela com as c lulas coladas clique no local onde a tabela dever aparecer contanto que n o seja dentro de outra tabela Escolha Editar gt Colar Se forem coladas linhas ou colunas inteiras em uma tabela existente estas ser o adicionadas tabela Quando for colada uma c lula individual o conte do da c lula selecionada ser substitu do contanto que o conte do da rea de transfer ncia seja compat vel com o da c lula selecionada Se a colagem tiver que ser feita fora de uma tabela as linhas colunas ou c lulas ser o utilizadas para definir uma nova tabela Para remover o conte do e manter a c lula intacta 1 2 Selecione uma ou mais c lu
456. ows ou pressione a tecla Command e clique no Macintosh e no menu contextual escolha Editar ou clique duas vezes no estilo HTML e no menu contextual escolha Editar 3 Na caixa de di logo Definir o estilo HT ML especifique as defini es para o estilo As op es Aplicar a determinam se o estilo ser aplicado ao texto selecionado Sele o ou ao bloco de texto atual Par grafo As op es Ao aplicar determinam se as defini es do estilo ser o adicionadas formata o original do texto Adicionar ao estilo existente ou removidas da formata o original e substitu das pelas novas defini es Limpar o estilo existente Para aplicar um estilo HTML existente Na paleta de estilos HT ML selecione um estilo e Sea caixa de sele o Aplica o autom tica situada na parte inferior da paleta estiver selecionada clique uma vez no estilo e Sea caixa de sele o Aplica o autom tica n o estiver selecionada clique no estilo e em seguida clique em Aplicar Como formatar otexto 185 186 Cap tulo 6 Para limpar a formata o do texto em um documento 1 Selecione o texto formatado 2 Na paleta de estilos HTML clique em Limpar o estilo do par grafo ou Limpar o estilo da sele o A aplica o de Limpar o estilo do par grafo remove a formata o do bloco de texto selecionado no documento A aplica o de Limpar o estilo da sele o remove a formata o do texto selecionado Nota Utilize Limpar
457. p FFFFFF e g coincidir com e em tabela f em fraude e g em Aguarde Caractere Coincidir com Exemplo abc Qualquer um dos caracteres que n o aeiou coincidir inicialmente com esteja dentro dos colchetes r em cravo b em biblioteca e Especifique uma faixa de caracteres f em OFF com um h fen a f equivale a abcdef por exemplo No Um limite de palavra como um bb coincidir com b em blasf mia espa o ou retorno de carro por m n o coincidir com qualquer ocorr ncia de abrir ou liberdade B Um limite sem palavra Bb coincidir com b em liberdade por m n o coincidir com blasf mia d Qualquer caractere num rico d coincidir com 3 em C3PO e 2 Equivale a 0 9 m apartamento 2G AD Qualquer caractere n o num rico D coincidir com S em 9005S e Q Equivale a 0 9 em Q45 f Alimenta o de formul rio n Alimenta o de linha r Retorno de carro s Qualquer caractere contendo espa os Scoluna coincidir com coluna em em branco inclusive 100 colunas por m n o coincidir espa os tabula es alimenta es de com colunas formul rio ou de linha S Qualquer caractere que n o contenha Scoluna coincidir com coluna em espa os em branco colunas por m n o coincidir com 100 colunas t
458. para estabelecer um v nculo a um documento em outro servidor Os v nculos de caminhos absolutos tamb m podem ser utilizados para vincular as p ginas de um site que est o no seu computador local em uma apresenta o na Web por exemplo Contudo essa abordagem n o recomendada porque os v nculos se romperiam fazendo com os arquivos n o abrissem se fossem transferidos para outra localiza o ou fosse alterada a estrutura de arquivos no site Sobre os caminhos relativos a documento Caminhos relativos a documento s o os mais apropriados para os v nculos locais na maioria dos sites da Web S o particularmente teis quando o documento e o vinculado est o na mesma pasta e possivelmente permanecer o juntos O caminho relativo a documento tamb m utilizado para estabelecer um v nculo a um documento em outra pasta especificando o caminho atrav s da hierarquia de pastas do documento atual ao vinculado Na especifica o desse caminho n o consta a parte da URL absoluta que a mesma para ambos os documentos fornecido apenas o segmento do caminho que diferente Para estabelecer um v nculo com outro arquivo na mesma pasta que o documento atual basta indicar o nome do arquivo a ser vinculado Para vincular a um arquivo em uma subpasta da pasta do documento atual forne a o nome da subpasta coloque uma barra inclinada para a direita e em seguida o nome do arquivo a ser vinculado Para vincular a um arquivo em uma pasta m
459. para o Dreamweaver Se desejar importar o conte do de um arquivo do Word inicie o Word e salve o arquivo como HTML antes de import lo para o Dreamweaver Para criar um novo documento a partir de um modelo 1 Escolha Arquivo gt Novo a partir de modelo Aparecer uma caixa de di logo com uma lista de modelos dispon veis para o site atual necess rio criar antes os modelos nos quais se basear o os documentos consulte Como criar os modelos na p gina 361 Quando for criado um documento com base em um modelo algumas partes do documento ser o bloqueadas para que n o sejam alteradas O arquivo do modelo determinar quais regi es ser o edit veis Este procedimento assegura a consist ncia quando o modelo for utilizado para diversos documentos em um site 2 Selecione um modelo e clique em Selecionar Para modificar as partes edit veis de um modelo selecione o conte do do alocador de espa o e digite sobre o mesmo As partes n o edit veis do modelo s o identificadas por uma cor real ada Para personalizar as cores real adas consulte Como definir as prefer ncias dos modelos na p gina 363 Para saber mais sobre a maneira de criar e trabalhar com modelos consulte Modelos e bibliotecas na p gina 359 Como criar sites e documentos 85 86 Cap tulo 3 Como adicionar texto e inserir objetos A inclus o do cont udo das p ginas feita atrav s da digita o ou colagem de texto e da inse
460. parecer quando o documento for aberto localmente em um navegador Contudo o Dreamweaver exibe as server side includes tanto na janela do documento como na janela de visualiza o do navegador Para poder exibir o conte do inclu do o Dreamweaver utiliza um conversor que reflete a maneira que o servidor utilizaria para processar as instru es contidas na inclus o Quando uma server side include for colocada em um documento ser inserida apenas uma refer ncia a um arquivo externo O Dreamweaver exibir o conte do do arquivo externo na janela do documento facilitando assim o desenho das p ginas por m esse conte do n o poder ser editado diretamente em um documento Para poder editar o conte do de uma server side include voc dever editar diretamente o arquivo a ser inclu do Todas as altera es feitas no arquivo externo ser o automaticamente transpostas para os documentos que o inclu rem Para inserir uma server side include 1 Escolha Inserir gt Server side include ou clique no bot o SSI no painel Comuns da paleta de objetos 2 Na caixa de di logo que aparecer clique no cone correspondente pasta para procurar um arquivo ou digite o caminho at o arquivo a ser inclu do Em seguida clique em OK Como exibir as server side includes no Dreamweaver Como padr o o Dreamweaver processa todas as server side includes inclus es do servidor incondicionais e exibe as na janela do documento Para especific
461. pe Navigator 4 0 e alguns n o contam com suporte de qualquer navegador Consulte os t picos seguintes na Ajuda do Dreamweaver para obter informa es sobre defini es espec ficas e Painel Defini o de estilo do tipo Painel Defini o de estilo do fundo e painel Defini o de estilo do bloco Painel Defini o de estilo de caixa e Painel Defini o de estilo de borda Painel Defini o de estilo de lista e Painel Defini o de estilo de posicionamento Painel Defini o de estilo de extens es Quando for criado um estilo classe personalizado ele aparecer na paleta de estilos CSS e no submenu Texto gt Estilos CSS Os estilos de r tulos HTML e os estilos de seletor CSS n o aparecer o na paleta de estilos CSS porque n o podem ser aplicados mas ser o representados automaticamente na janela do documento onde ocorrer o r tulo ou seletor Como aplicar um estilo CSS classe personalizado Os estilos classes personalizados s o o nico tipo de estilo CSS que pode ser aplicado a qualquer texto em um documento sem levar em considera o os r tulos que o controlam A paleta de estilos CSS exibe os nomes de todos os estilos dispon veis N o confunda os estilos CSS com op es como Negrito ou Vari vel do submenu Texto gt Estilo essas op es s o atributos de formata o predefinidos que correspondem a r tulos HTML espec ficos Quando dois ou mais estilos CSS forem aplicados ao mesmo texto
462. petor de pontos ativos ser mostrado abaixo do inspetor de propriedades Para obter informa es sobre o inspetor de pontos ativos consulte Como configurar as propriedades dos pontos ativos na p gina 213 Como inserir imagens 2n 212 Cap tulo 7 5 No inspetor de pontos ativos clique no cone correspondente pasta para procurar o arquivo a ser aberto quando o usu rio clicar no ponto ativo ou digite o nome do arquivo no campo V nculo 6 Para fazer com que o documento vinculado apare a em um lugar diferente da janela ou moldura digite um nome de janela na caixa Destino ou escolha um nome de moldura no menu pop up Consulte Como criar os v nculos na p gina 113 7 Na caixa Alt digite um texto diferente do que mostrado para o ponto ativo nos navegadores somente de texto Alguns navegadores exibem esse texto como uma dica de ferramenta quando o usu rio parar o mouse sobre o ponto ativo 8 Repita as etapas 4 a 7 para definir outros pontos ativos no mapa de imagens Para selecionar v rios pontos ativos em um mapa de imagens Quando a imagem estiver selecionada siga um dos procedimentos abaixo e Pressione a tecla Shift e clique nos outros pontos ativos a serem selecionados e Pressione as teclas Control e A no Windows ou Command e A no Macintosh Quando uma imagem for copiada de um documento para outro os pontos ativos a ela associados tamb m ser o copiados As teclas de seta ou o mouse pode
463. petor de propriedades para posicionar as camadas em um documento Inicialmente voc redimensionar e mover as camadas medida que disp e a p gina em seguida voc definir a posi o das duas camadas inferiores para que se alinhem no alto 1 Redimensione a camada superior arrastando as suas al as para dentro at que elas estejam em volta do logotipo da Scaal e do texto a seguir 2 Redimensione a camada de navega o a camada inferior esquerda arrastando as suas al as at que elas estejam em volta das imagens 3 Mova a camada de texto posicionando a ao lado da camada de navega o Selecione a camada e em seguida utilize as teclas de seta ou arraste a camada pela sua guia As camadas n o se sobrepor o porque a op o Evitar sobreposi es est selecionada na paleta de camadas EEE our story L brave new world coffee products this week 4 Se nem todos os campos das propriedades das camadas estiverem vis veis no inspetor de propriedades clique na seta de expans o no canto inferior direito do inspetor de propriedades 5 Selecione a camada que cont m as imagens de navega o Mantenha pressionada a tecla Shift e selecione a camada que cont m o texto Ambas as camadas foram selecionadas 6 No campo T do inspetor de propriedades digite 100px Este procedimento posicionar com precis o ambas as camadas a 100 pixels do alto do documento Eoemato Nenhum B Fon
464. por m n o o posicionar o 235 236 Cap tulo 9 As propriedades de posicionamento de camadas incluem esquerda e No alto coordenadas x e y respectivamente ndice z tamb m denominado ordem de empilhamento e Visibilidade Os elementos posicionados podem ser definidos no Dreamweaver com os r tulos DIV SPAN LAYER e ILAYER Consulte Como definir as prefer ncias de camadas na p gina 239 Como criar as camadas Crie as camadas utilizando as t cnicas de inser o arrastar e soltar ou de desenho Uma vez criada a camada utilize a paleta de camadas para selecionar aninh la dentro de outra camada ou alterar a sua ordem de empilhamento Consulte Sobre a paleta de camadas na p gina 237 As propriedades padr o das camadas r tulo visibilidade altura largura etc s o especificadas nas prefer ncias de camadas Para alterar as defini es padr o escolha Editar gt Prefer ncias e selecione Camadas Consulte Como definir as prefer ncias de camadas na p gina 239 Como padr o o Dreamweaver cria camadas com o r tulo DIV e insere o c digo da camada na posi o do ponto de inser o ou durante o desenho das camadas no alto da p gina logo ap s o r tulo BODY Se for criada uma camada aninhada o Dreamweaver inserir o c digo dentro do r tulo que define a camada m e Ao criar camadas para impedir que se sobreponham ative a op o Evitar sobreposi es na paleta de camadas ou escol
465. portados se forem salvos em um formato de arquivo que aceite dados delimitados Os separadores do delimitador que podem ser utilizados s o v rgula dois pontos ponto e v rgula ou espa o N o poss vel selecionar partes de uma tabela para exportar ela sempre exportada inteira Se apenas alguns dados da tabela forem necess rios por exemplo as primeiras seis linhas ou colunas crie uma nova tabela copie as informa es para a nova tabela e exporte a Para exportar uma tabela 1 Coloque o ponto de inser o em qualquer c lula da tabela a ser exportada 2 Escolha Arquivo gt Exportar gt Exportar a tabela Aparecer a caixa de di logo Exportar a tabela Exportar tabela x Delimitado MEMES Exportar Quebras de windows Cancelar linha Ajuda 3 No menu pop up Delimitador selecione um valor de delimitador para os dados da tabela 4 No menu Quebras de linha selecione as quebras de linha do sistema operacional para o qual o arquivo estiver sendo exportado Windows Macintosh ou MS DOS 5 Clique em Exportar 6 Na caixa de di logo que aparecer digite um nome para o arquivo e clique em Salvar CAP TULO 9 Como utilizar as camadas Uma camada um recipiente para um conte do HTML normalmente delineado pelo r tulo DIV ou SPAN que pode ser posicionado em qualquer local da p gina As camadas podem conter objetos de texto imagens formul rios plug ins e at mesmo outras camadas qua
466. portamento 4 Clique em OK na caixa de di logo do comportamento Todas as ocorr ncias desse comportamento na p gina ser o atualizadas CAP TULO 13 Como editar o HTML O Dreamweaver fornece interfaces gr ficas para criar e editar arquivos HTML Contudo s vezes voc precisar ter acesso direto ao c digo HTML subjacente O Dreamweaver fornece este acesso atrav s do inspetor de origem de HTML consulte Como utilizar o inspetor de origem de HT ML na p gina 339 e do Quick Tag Editor consulte Como editar um r tulo HTML na janela do documento na p gina 340 O Dreamweaver oferece tamb m modos teis de manusear os arquivos HTML criados com outros programas Com o Roundtrip HT ML voc pode ter certeza de que o Dreamweaver n o modificar o c digo HT ML que voc criou a menos que instrua o programa para isso podem ser definidas v rias op es para o que o Dreamweaver dever ou n o regravar consulte Como definir as prefer ncias de formato HTML na p gina 346 Por outro lado o Dreamweaver pode limpar o HTML desordenado e desnecess rio de acordo com a sua conveni ncia utilizando os recursos Limpar o HTML e Limpar o HTML do Word consulte Limpar o HTML na p gina 350 e Limpar o HTML do Microsoft Word na p gina 352 337 338 Cap tulo 13 Sobre o Roundtrip HTML O Roundtrip HTML uma ferramenta exclusiva do Dreamweaver que permite mover os documentos entre o Dreamweaver e um
467. pt 1 Selecione um objeto e abra o inspetor de comportamentos 2 Clique no bot o com o sinal de adi o e escolha Chamar o JavaScript no menu pop up A es 3 Digite o JavaScript a ser executado ou o nome de uma fun o Por exemplo para criar um bot o Voltar digite if history length gt 0 fhistory back J Se tiver encapsulado o c digo em uma fun o digite apenas o nome da fun o goBack por exemplo 4 Clique em OK 5 Verifique se o evento padr o corresponde ao desejado Se n o corresponder escolha um outro evento no menu pop up Se os eventos desejados n o estiverem listados altere o navegador de destino no menu pop up Eventos de Alterar a propriedade Utilize a a o Alterar a propriedade para alterar o valor de uma das propriedades de um objeto a cor de fundo de uma camada ou a a o relacionada a um formul rio por exemplo As propriedades que podem ser afetadas s o determinadas pelo navegador um n mero maior de propriedades poder ser alterado por este comportamento no Microsoft Internet Explorer IE 4 0 do que no TE 3 0 ou nas vers es 3 0 e 4 0 do Netscape Navigator Por exemplo poss vel definir dinamicamente a cor do fundo de uma camada Nota Utilize esta a o apenas se j estiver muito familiarizado com HTML e JavaScript Para poder utilizar a a o Alterar a propriedade 1 Selecione um objeto e abra o inspetor de comportamentos 2 Clique no bot o com o sinal de adi o
468. pt ou VBScript para alterar as propriedades de posicionamento e estilos CSS dos elementos depois que a p gina tiver sido carregada No Netscape Navigator 4 0 as propriedades dos estilos CSS n o podem ser alteradas ap s a carga da p gina apenas as propriedades de posicionamento Como formatar o texto 189 190 Cap tulo 6 Como criar ou vincular uma folha de estilos CSS externa Uma folha de estilos CSS um arquivo de texto externo que cont m especifica es de estilos e formata o Quando uma folha de estilos CSS externa for editada todos os documentos a ela vinculados ser o atualizados com essas altera es A Ajuda do Dreamweaver consiste de p ginas HTML que utilizam uma folha de estilos CSS vinculada denominada help css Para examinar a apar ncia do c digo para uma defini o de folha de estilos CSS abra o arquivo help css na pasta Help html em um editor de texto Abra qualquer um dos arquivos de t picos aqueles iniciados por um n mero para examinar como a folha de estilos CSS est vinculada ao documento atrav s de um r tulo LINK bem como os estilos CSS espec ficos s o aplicados Para criar ou vincular uma folha de estilos CSS externa 1 Escolha Janela gt Estilos CSS ou clique no bot o Estilos CSS no Iniciador 2 Na paleta de estilos CSS clique no cone de Abrir a folha de estilos 3 Na caixa de di logo Editar a folha de estilos clique em V nculo 4 Na caixa de di logo Vincular a folha de es
469. quadro direita Clique em Executar e mantenha pressionado o bot o do mouse para executar a linha de tempo continuamente Execu o autom tica inicia a execu o autom tica de uma linha de tempo quando a p gina for carregada em um navegador A execu o autom tica anexa um comportamento ao r tulo BODY da p gina que executa a a o Executar a linha de tempo quando a p gina for carregada Loop provoca a repeti o indefinida da linha de tempo quando a p gina estiver aberta em um navegador op o Loop insere o comportamento Ir para o quadro da linha de tempo no canal de comportamentos ap s o ltimo quadro da anima o Clique duas vezes no marcador deste quadro para editar os par metros do comportamento e alterar o n mero de repeti es Como criar uma anima o de linha de tempo As linhas de tempo criam anima es alterando a posi o tamanho visibilidade e ordem de empilhamento das camadas As linhas de tempo tamb m podem alterar os arquivos de origem das imagens As linhas de tempo podem mover apenas as camadas Para mover imagens ou texto crie uma camada utilizando o bot o Camada na paleta de objetos e em seguida insira imagens texto ou qualquer outro tipo de conte do na camada Consulte Como criar as camadas na p gina 236 Para criar uma anima o de linha de tempo 1 Se desejar animar uma camada mova a at o ponto inicial da anima o 2 Escolha Janela gt Linhas de tempo Como
470. que possa admitir par metros como um filme Shockwave um controle ActiveX um plug in do Navigator ou um applet de Java na janela do documento 2 Abra a caixa de di logo utilizando um dos seguintes m todos e Clique com o bot o direito do mouse no Windows ou pressione a tecla Control e clique no objeto no Macintosh e no menu contextual escolha Par metros e Abra o inspetor de propriedades caso ainda esteja fechado expanda o clicando na seta de expans o localizada no canto inferior direito e clique no bot o Par metros Para digitar um valor de um par metro na caixa de di logo Par metros 1 Clique no bot o com o sinal de adi o 2 Na coluna Par metro digite o nome do par metro 3 Na coluna Valor digite o valor do par metro Para remover os par metros Selecione um par metro e pressione a tecla Delete Para reordenar os par metros Utilize os bot es de seta acima e abaixo Como utilizar os comportamentos para controlar m dia poss vel adicionar comportamentos p gina a fim de iniciar e interromper diversos objetos de m dia Controlar o Shockwave ou Flash permite executar parar rebobinar ou ir para um quadro de um filme Shockwave ou Flash Consulte Controlar o Shockwave ou Flash na p gina 313 Executar o som permite executar um som Por exemplo poss vel executar um efeito sonoro sempre que o usu rio passar o ponteiro do mouse sobre um v nculo Consulte Executar
471. que processa as informa es do formul rio especificadas como URL Clique no cone da pasta para localizar o aplicativo ou digite o caminho correspondente a ele M todo define a maneira como ser o processados os dados do formul rio 3 No inspetor de propriedades escolha um dos seguintes m todos de processamento dos dados do formul rio Obter acrescenta valores do formul rio URL e envia uma solicita o GET ao servidor Como o tamanho das URLs est limitado a 8192 caracteres n o utilize o m todo GET com formul rios longos Enviar envia os valores do formul rio no corpo de uma mensagem e uma solicita o POST ao servidor Padr o utiliza o m todo padr o do navegador geralmente GET Como adicionar um objeto a um formul rio Depois de adicionar um objeto a um formul rio poss vel definir as suas propriedades utilizando o inspetor de propriedades Para adicionar um objeto a um formul rio 1 N Siga um dos procedimentos abaixo Posicione o ponto de inser o dentro dos limites do formul rio e escolha um objeto no menu Inserir gt Objeto de formul rio Posicione o ponto de inser o dentro dos limites do formul rio e clique em um bot o de objeto no painel Formul rios localizado na paleta de objetos Arraste um bot o de objeto at o local desejado dentro dos limites do formul rio Especifique as propriedades do objeto no inspetor de propriedades escolha Janela gt Propriedades par
472. quipe possam retir los Se a op o Ativar a devolu o e retirada de arquivos estiver desativada a obten o de um arquivo transferir uma c pia com os privil gios de leitura e grava o Observe que os arquivos copiados s o aqueles selecionados no painel que estiver ativo na janela do site Se o painel remoto estiver ativo o arquivos remotos selecionados ser o copiados para o site local se o painel local estiver ativo as vers es remotas dos arquivos locais selecionados ser o copiadas para o site local Consulte Como obter os arquivos de um servidor remoto na p gina 151 Colocar copia os arquivos selecionados do site local para o site remoto Observe que os arquivos copiados s o aqueles selecionados no painel que estiver ativo na janela do site Se o painel local estiver ativo o arquivos locais selecionados ser o copiados para o site remoto se o painel remoto estiver ativo as vers es locais dos arquivos remotos selecionados ser o copiadas para o site remoto Consulte Como colocar os arquivos em um servidor remoto na p gina 153 Retirar transfere uma c pia do arquivo do servidor remoto para o site local substituindo a c pia local do arquivo j existente se houver e marca esse arquivo como retirado do servidor Esta op o n o estar dispon vel se Ativar a devolu o e retirada de arquivos estiver desativada no site atual Consulte Como devolver e retirar os arquivos de um servidor remoto na p gin
473. quivo gt Abrir a sele o no Windows ou Site gt Abrir no Macintosh V nculos e navega o 129 130 Cap tulo 4 Para adicionar um arquivo j existente ao site siga um dos procedimentos abaixo Arraste um arquivo do Windows Explorer ou do Localizador do Macintosh e solte o em um arquivo do mapa do site A p gina ser adicionada ao site e um v nculo ser criado entre ela e o arquivo no qual for solta Selecione Site gt V nculo a um arquivo existente no Windows ou Site gt Exibi o do mapa do site gt V nculo a um arquivo existente no Macintosh Para criar um novo arquivo e adicionar um v nculo 1 Selecione um arquivo HTML no mapa do site e depois siga um dos procedimentos abaixo Selecione Site gt V nculo a um novo arquivo no Windows ou Site gt Exibi o do mapa do site gt V nculo a um novo arquivo no Macintosh Escolha V nculo a um novo arquivo no menu contextual Na campo Nome do arquivo da caixa de di logo V nculo a um novo arquivo digite um nome de arquivo No campo T tulo digite um t tulo de p gina para o arquivo No campo Texto do v nculo digite o texto do v nculo que conecta o arquivo selecionado ao novo arquivo O v nculo aparecer no arquivo selecionado Clique em OK O arquivo ser salvo na mesma pasta que o arquivo selecionado Se for adicionado um novo arquivo a uma ramifica o oculta o novo arquivo tamb m estar oculto Consulte Como mostrar e
474. r o de objetos como imagens tabelas e camadas Para adicionar texto ao documento siga um dos procedimentos abaixo e Digite o texto diretamente na janela do documento e Copie o texto de outro aplicativo passe ao Dreamweaver posicione o ponto de inser o na janela do documento e escolha Editar gt Colar como texto O Dreamweaver n o conservar a formata o aplicada no outro aplicativo por m conservar as quebras de linha Para obter mais informa es sobre a formata o de texto consulte Como formatar o texto na p gina 177 Para inserir tabelas imagens e outros objetos no documento escolha uma das seguintes op es e Utilize os comandos no menu Inserir para adicionar os objetos especificados no documento na posi o do ponto de inser o e Escolha Janela gt Objetos para abrir a paleta de objetos Localize o tipo de objeto desejado e clique nele ou arraste o para inserir o objeto na janela do documento Para a maioria dos objetos aparecer uma caixa de di logo que solicita a escolha da op o ou do arquivo desejado Para ocultar a caixa de di logo escolha Editar gt Prefer ncias selecione Geral e desmarque a op o Mostrar a caixa de di logo quando inserir objetos Nota Para inserir diversos espa os consecutivos utilize Inserir gt Espa o n o separ vel Por m se desejar alinhar os itens em colunas utilize uma tabela Como inserir datas O Dreamweaver conta com um objeto Data
475. r parar O Dreamweaver adicionar uma barra de anima o linha de tempo com o n mero apropriado de quadros prim rios No inspetor de linhas de tempo clique no bot o Rebobinar em seguida mantenha pressionado o bot o Executar para visualizar a anima o Como utilizar as camadas 257 258 Cap tulo 9 Como modificar as linhas de tempo Ap s ter definido os componentes b sicos de uma linha de tempo fa a altera es teis como adicionar e remover quadros alterar o in cio da anima o etc Para modificar uma linha de tempo siga um dos procedimentos abaixo Para tornar a anima o mais longa arraste o marcador do quadro final Todos os quadros prim rios da anima o ser o acomodados no novo espa o mantendo constantes as suas posi es relativas Pressione a tecla Control no Windows ou Command no Macintosh enquanto arrasta o marcador do quadro final para impedir que os outros quadros prim rios se movam Para antecipar ou retardar a chegada da camada posi o do quadro prim rio mova o marcador do quadro prim rio para a direita ou esquerda ao longo da barra Para alterar o in cio de uma anima o selecione uma ou todas as barras associadas anima o pressione a tecla Shift para selecionar mais de uma barra simultaneamente e arraste para a esquerda ou direita Para alterar a localiza o de toda uma anima o selecione a barra inteira e arraste o objeto sobre a p gina O Dreamweaver
476. r uma imagem com uma cor mais clara do que a que foi mostrada ou seja o bot o ser real ado e o usu rio clica no bot o Nossa est ria Na p gina Nossa est ria o bot o Nossa est ria torna se mais escuro e o bot o da imagem da home page ser mostrado no estado normal Voc pode criar uma barra de navega o copi la em outra p ginas no seu site e editar os comportamentos da p gina para mostrar os diferentes estados medida que as p ginas s o acessadas Como inserir uma barra de navega o Para criar uma barra de navega o 1 Siga um dos procedimentos abaixo Escolha Inserir gt Barra de navega o No painel Comuns da paleta de objetos selecione Inserir a barra de navega o Aparecer a caixa de di logo Inserir a barra de navega o E E BES x Elementos da barra Cancelar de navega o Nome do elemento EMENT Imagem ativa Procurar lmagemsobreposta U Procurar Imagem inativa Procurar Imagem sobreposta ERRE Procura punan ea Piocuiar na Janela principal Tm Op es IV Pr canegar as imagens I Mostrar a imagem inativa inicialmente inseri Horzontamente m JM Utilizar as tabelas No campo Nome do elemento digite o nome do elemento da barra de navega o O nome aparecer na lista Elementos da barra de navega o O bot o de seta para cima ou para baixo pode ser utilizado para organizar os elementos na barra de navega o Selecione
477. r ncias na p gina 71 387 388 Cap tulo 16 Como alterar a paleta de objetos Como padr o a paleta de objetos dividida em seis pain is Caracteres Comuns Formul rios Molduras Cabe alho e Invis veis Para obter informa es sobre esses pain s consulte Como utilizar a paleta de objetos na p gina 68 Os pain is correspondem s pastas contidas na pasta Configuration Objects dentro da pasta do aplicativo do Dreamweaver Para cada objeto da paleta de objetos h dois ou tr s arquivos na pasta correspondente e Um arquivo GIF que cont m um cone correspondente ao objeto e Um arquivo HTML que cont m o HTML a ser inserido no seu arquivo ou um formul rio HTML que permite especificar os dados a serem inclu dos por exemplo o texto de um coment rio e Um arquivo JavaScript opcional que gera o HTML a ser inclu do no seu arquivo Voc pode mover objetos de um painel para outro renomear pain is e remover objetos de uma paleta Uma vez feitas as altera es as extens es podem ser recarregadas para que essas modifica es apare am na paleta de objetos Para mover um objeto de um painel para outro da paleta de objetos Mova os arquivos HTML e GIF do objeto e o arquivo JavaScript se houver de uma pasta para outra dentro da pasta Configuration Objects Certifique se de ter movido todos os arquivos do objeto Para renomear um painel na paleta de objetos Renomeie a pasta correspondente co
478. r o dispon veis Na caixa de di logo Substituir tanto as consultas de localiza o arquivos dwq quanto as de substitui o arquivos dwr estar o dispon veis Clique em Localizar o pr ximo Localizar todos Substituir ou Substituir todos para iniciar a busca Gerenciamento de sites 161 Sobre as express es regulares As express es regulares consistem de padr es que descrevem as combina es de caracteres no texto Utilize essas express es em suas buscas para que o auxiliem a descrever conceitos como frases iniciadas com O e valores de atributo que contenham um n mero A tabela a seguir lista os caracteres especiais em express es regulares bem como seus significados e exemplos de uso Para localizar o texto contendo um dos caracteres especiais da tabela preceda o caractere especial com uma barra invertida Por exemplo para localizar o asterisco na frase algumas condi es se aplicam o padr o de busca poderia ter a seguinte apar ncia aplicaml Se n o for colocada uma barra inclinada antes do asterisco ser o localizadas todas as ocorr ncias de aplicam assim como de aplic aplica e aplicar e n o apenas aquelas seguidas do sinal de asterisco Caractere Coincidir com Exemplo xly n n m abc 162 Cap tulo 5 In cio da entrada ou linha Final da entrada ou linha O caractere precedente zero ou mais vezes O caractere precedente uma
479. r 89 como sobrepor 338 de outros fabricantes 402 em perfis de navegadores 398 especifica es 403 inv lidos 338 OL 182 tabela 221 TAGSPEC 403 UL 182 XML 338 r tulos de cabe alhos 178 ndice remissivo 439 r tulos de outros fabricantes como impedir a regrava o 407 como personalizar 402 r tulos de par grafos 178 r tulos incorretos como corrigir 354 r tulos inv lidos como exibir 338 r tulos sobrepostos 338 Roundtrip HTML 338 se o HEAD como editar o conte do na 106 server side includes como editar 380 como inserir 379 como processar e exibir 379 op es de convers o 380 vis o geral 379 servidores AppleTalk 141 como definir 140 como resolver problemas de configura o 143 NFS 141 op es de acesso 141 servidores AppleTalk 141 servidores da Web Consulte servidores servidores NFS 141 440 ndice remissivo sites atalhos 416 cache 134 como adicionar arquivos e pastas 82 como ajustar os v nculos rompidos 169 como alterar a exibi o 81 como alterar os v nculos no site inteiro 135 como buscar arquivos nas 156 como descarregar e editar sites remotos j existentes 78 como devolver e retirar arquivos 150 como exibir 79 como remover da lista de sites 84 como selecionar os arquivos atualizados 82 como testar 166 como verificar os v nculos 168 como visualizar em navegadores 170 compatibilidade com os navegadores 164 167 Design Notes como utilizar em 172 estrutura e navega
480. r as camadas 261 262 Cap tulo 9 Como renomear as linhas de tempo Para renomear a linha de tempo exibida no inspetor de linhas de tempo siga um dos procedimentos abaixo e Escolha Modificar gt Linha de tempo gt Renomear a linha de tempo e digite um novo nome na caixa de di logo Renomear a linha de tempo e Digite um novo nome no menu pop up Nome da linha de tempo no inspetor de linhas de tempo Se o documento contiver a a o de comportamento Executar a linha de tempo por exemplo se ele contiver um bot o que deve ser clicado para iniciar a linha de tempo edite o comportamento para que ele represente o novo nome da linha de tempo Dicas de anima o para as linhas de tempo As seguintes sugest es podem melhorar o desempenho das anima es e facilitar a sua cria o e Mostre e oculte as camadas em vez de alterar o arquivo de origem nas anima es que compreendem v rias imagens A altern ncia de arquivos de origem de uma imagem poder tornar a anima o mais lenta porque a nova imagem dever ser descarregada Se todas as imagens forem descarregadas simultaneamente em camadas ocultas antes da execu o da anima o n o haver pausas percept veis ou imagens ausentes e Estenda as barras de anima o para criar um movimento mais suave Se a anima o e as imagens estiverem saltando entre as posi es arraste o quadro final da barra de anima o da camada para permitir o movimento ao longo de um n m
481. r de origem de HTML Para exibir os marcadores do roteiro na janela do documento escolha Exibir gt Elementos invis veis Consulte tamb m Como definir as prefer ncias de elementos invis veis na p gina 90 Para inserir um roteiro 1 Coloque o cursor onde deve ser adicionado o roteiro 2 Clique no bot o Roteiro na paleta de objetos ou escolha Inserir gt Roteiro 3 Na caixa de di logo que aparecer escolha a linguagem de roteiro no menu pop up Se voc utilizar o JavaScript e n o tiver certeza de sua vers o escolha JavaScript em vez de JavaScript1 1 ou JavaScript1 2 4 Digite o c digo que deve aparecer entre os r tulos do roteiro Para estabelecer um v nculo com um arquivo de roteiro externo clique em OK sem digitar nada e em seguida adicione a refer ncia ao arquivo de origem no inspetor de propriedades digite o nome do arquivo na caixa Origem ou clique no cone correspondente pasta para procurar e selecionar o arquivo Como editaro HTML 357 358 Cap tulo 13 Para editar o roteiro 1 Selecione o cone de Roteiro 2 No inspetor de propriedades clique em Editar Como definir as propriedades dos roteiros Aparecer o as seguintes propriedades no inspetor de propriedades quando um marcador de roteiro for selecionado Linguagem especifica JavaScript ou VBScript como a linguagem do roteiro Origem especifica um arquivo de roteiro vinculado externamente Digite o caminho ou clique na pasta p
482. r de propriedades escolha Janela gt Propriedades 2 Na janela do documento clique no objeto de menu de salto para selecion lo Aparecer o cone de menu de lista no inspetor de propriedades 3 No inspetor de propriedades clique no bot o Valores da lista 4 Altere os itens do menu e em seguida clique em OK V nculos e navega o 123 124 Cap tulo 4 Como criar as barras de navega o Uma barra de navega o composta por uma imagem ou conjunto de imagens que exibe m as altera es com base nas a es de um usu rio Antes de utilizar o comando Inserir a barra de navega o crie um conjunto de imagens da barra de navega o para os estados de uma imagem a ser exibida Uma imagem pode apresentar quatro estados e Ativa a imagem que aparecer quando a p gina for inicialmente carregada e Sobreposta a imagem que aparecer quando o ponteiro for movido sobre uma imagem e Inativa a imagem que aparecer quando o usu rio clica sobre ela e Inativa e sobreposta a imagem que aparecer quando o ponteiro for movido sobre ela ap s o clique do usu rio O exemplo seguinte demonstra como os diferentes estados da imagem de um bot o podem ser exibidos quando um usu rio visualiza a home page o bot o de imagem da home page torna se escurecido e os outros bot es da barra de navega o se mant m em seu estado normal ou ativados Na home page o usu rio move o ponteiro sobre o bot o Nossa est ria aparece
483. r na Web atualizado regularmente Tour guiado e filmes Show Me Os filmes Show Me na Ajuda do Dreamweaver apresentam uma introdu o animada a alguns dos principais recursos do Dreamweaver O Tour guiado inclui uma segii ncia de todos os filmes Show Me Os filmes Show Me tamb m podem ser vistos nas respectivas se es de vis o geral No sum rio da Ajuda o seguinte cone indica que um t pico cont m um filme Show Me Os filmes Show Me necessitam do plug in Shockwave inclu do no CD do Dreamweaver Se a sua c pia do Dreamweaver tiver sido adquirida eletronicamente voc poder descarregar o plug in Shockwave mais recente no site da Macromedia na Web em http www macromedia com shockwave download Ajuda do Dreamweaver As p ginas da Ajuda em HTML do Dreamweaver cont m informa es completas sobre todos os recursos do Dreamweaver Estes navegadores s o os mais recomendados para visualizar a Ajuda do Dreamweaver e No Windows Netscape Navigator 4 0 ou Microsoft Internet Explorer 4 0 e suas respectivas vers es mais avan adas e No Macintosh Internet Navigator 4 0 e mais avan ado o Internet Explorer para Macintosh n o recomendado porque n o pode executar os filmes Show Me Caso seja utilizado um navegador 3 0 todo o conte do ainda estar acess vel mas alguns recursos como a Busca n o funcionar o A Ajuda do Dreamweaver utiliza amplamente o JavaScript Certifique se de que esta linguagem esteja
484. r os sites para adicionar ou alterar as informa es relativas ao servidor remoto e s prefer ncias de devolu o retirada Para associar um servidor remoto a um site local existente 1 Escolha Definir os sites no menu pop up Sites atuais na janela do site ou selecione Site gt Definir os sites 2 Site scaal Arquivo Editar Exibir Site Janela Ajuda avocadoB Navegacolm tutorial scaal Sito senza nome 1 Ca Images CRS 3 Library Ca Templa PP Dw3c Pasta local Aparecer uma caixa de di logo com uma lista dos sites definidos atuais escolha um site existente e clique em Editar Se n o houver sites definidos crie um site local antes de continuar consulte Como criar um site local na p gina 77 Na lista de categorias esquerda clique em Informa es do servidor da Web Escolha uma dentre as seguintes op es de Acesso ao servidor Utilize Nenhum caso n o planeje carregar o seu site em um servidor Em seguida clique em OK e ignore o restante desse procedimento Utilize Local Rede se o servidor da Web estiver montado como uma unidade da rede no Windows ou como um servidor AppleTalk ou NES no Macintosh ou se o servidor da Web estiver em execu o no computador local Clique no cone correspondente pasta para procurar e selecionar a pasta do servidor na qual est o armazenados os arquivos do site Se voc desejar que o painel remoto da janela do site atua
485. r um arquivo de cache no qual ele armazenar informa es sobre todos os v nculos do site local Esse arquivo de cache ser criado quando a op o Cache estiver selecionada na caixa de di logo Defini o do site e ser atualizado imperceptivelmente durante a utiliza o do Dreamweaver para adicionar alterar ou excluir v nculos a arquivos no site local Para criar um arquivo de cache do site 1 Escolha Site gt Definir os sites 2 Selecione o site na caixa de di logo Definir os sites e em seguida clique em Editar Na categoria Informa es locais marque a caixa de sele o Cache em Op es de gerenciamento de v nculos Para criar novamente o cache do site Escolha Site gt Recriar o cache do site Na primeira vez em que v nculos a arquivos forem adicionados alterados ou exclu dos no site local ap s ter iniciado o Dreamweaver este aplicativo lhe solicitar o carregamento do cache Se voc clicar em Sim o cache ser carregado e todos os v nculos ao arquivo alterado ser o automaticamente atualizados Se escolher N o as altera es poder o ser observadas no cache por m este n o ser carregado e os v nculos n o ser o atualizados poss vel que o cache demore alguns minutos a ser carregado nos sites maiores a maior parte deste per odo gasta na compara o entre os hor rios dos arquivos no site local e aqueles registrados no cache a fim de verificar se este est desatualizado Se nenhum arquiv
486. ra de linha por exemplo n o localizar um r tulo lt br gt ou lt p gt Os caracteres de retorno aparecem como espa os na janela do documento e n o como quebras de linha 4 Utilize uma das seguintes op es para expandir ou limitar a busca e A op o Coincidir mai sc min sc restringe a busca ao texto que coincidir com a caixa do texto a ser localizado Por exemplo se voc tentar localizar o chap u marrom n o encontrar O chap u marrom Nota A op o Ignorar os diferentes espa os em branco trata qualquer espa o em branco como espa o simples com o intuito de coincidir com a busca Por exemplo com esta op o selecionada este texto coincidiria com este texto por m n o com estetexto Esta op o n o estar dispon vel quando Utilizar express es regulares estiver selecionada neste caso ser necess rio escrever textualmente a express o normal a fim de ignorar qualquer espa o em branco Observe que os r tulos lt p gt e lt br gt n o s o considerados espa o em branco e A op o Utilizar express es regulares acarreta a interpreta o de certos caracteres e sequ ncias pequenas de caracteres como w e b da sequ ncia de busca como operadores comuns de express es Por exemplo a busca de o c o p w b coincidir com o c o preto e o c o policial Consulte Sobre as express es regulares na p gina 162 Sobre as buscas de origem de HTML Utilize a op o Origem de HTML na caixa de d
487. ra importar os dados da tabela 1 Siga um dos procedimentos abaixo e Escolha Arquivo gt Importar gt Importar os dados da tabela e Escolha Inserir gt Dados tabulares Aparecer a caixa de di logo Importar os dados da tabela ou Inserir dados tabulares dependendo da sua sele o Fora os t tulos essas caixas de di logo s o id nticas Inserir dados tabulares x K es pe Ajuda Arquivo de dados Procurar Delimitador Tabula o Y Cancelar Largura da tabela e Ajustar aos dados C Set Percentagem Preenchimento da c lula Formatar a linha do alto fts em formato Espa amento entre as c lulas Borda i 2 Digite o nome do arquivo a ser importado no campo Arquivo de dados 3 No menu pop up Delimitador selecione o formato do delimitador que corresponda ao formato do documento a ser importado Se for selecionado Outro aparecer um campo direita do menu pop up Digite o delimitador utilizado para separar os dados da tabela Nota Caso voc n o selecione ou especifique o delimitador utilizado quando o arquivo foi salvo o arquivo n o ser importado de modo adequado e os dados n o ser o formatados corretamente na tabela N o ser exibida uma mensagem de erro ou de advert ncia para alert lo sobre a ocorr ncia do problema 4 Para a Largura da tabela selecione uma das seguintes op es e Selecione Ajustar aos dados para criar uma tabela que se ajuste seqii nci
488. ras selecionado Consulte Sobre as propriedades das molduras e conjuntos de molduras na p gina 272 Para selecionar uma moldura na janela do documento Pressione a tecla Alt no Windows ou as teclas Option e Shift no Macintosh e clique dentro de uma moldura Para selecionar um conjunto de molduras na janela do documento Clique na borda de uma moldura na janela do documento Para mover a sele o at a pr xima moldura siga um dos procedimentos abaixo e Para mover a sele o at a pr xima moldura Pressione a tecla Alt no Windows ou a tecla Command no Macintosh mais a tecla de seta direita ou esquerda e Para mover a sele o at o conjunto pai de molduras Pressione a tecla Alt no Windows ou a tecla Command no Macintosh mais a tecla de seta para cima e Para mover a sele o at a moldura filha Pressione a tecla Alt no Windows ou a tecla Command no Macintosh mais a tecla de seta para baixo Como salvar os arquivos de molduras e de conjuntos de molduras Um arquivo de conjunto de molduras e seus arquivos de molduras associados devem ser salvos para que a p gina possa ser visualizada em um navegador poss vel salvar uma p gina com um conjunto de molduras ou com uma moldura individualmente ou salvar todos os arquivos de molduras abertos e a p gina com o conjunto de molduras Quando o Dreamweaver for utilizado para criar documentos com molduras a cada novo documento ser dado um
489. rcar v rias c lulas como edit veis simultaneamente As camadas e o seu conte do s o elementos separados ao ser transformada em edit vel a posi o da camada pode ser alterada a marca o do conte do da camada como edit vel permite alter lo Para definir uma nova regi o edit vel em um modelo 1 No modelo coloque o ponto de inser o onde deseja incluir uma regi o edit vel 2 Escolha Modificar gt Modelos gt Nova regi o edit vel 3 Na caixa de di logo Nova regi o edit vel digite um nome para a regi o O nome da regi o entre chaves ser inserido no modelo como um alocador de espa o real ado Quando o modelo for aplicado a um documento o alocador de espa o poder ser substitu do por texto imagens ou qualquer outro conte do Como definir as prefer ncias dos modelos poss vel utilizar as prefer ncias de realce do Dreamweaver para personalizar as cores de realce das regi es edit veis e bloqueadas de um modelo A cor das regi es edit veis aparece no modelo a cor das regi es bloqueadas aparece nos documentos que utilizam o modelo Voc poder utilizar estas cores como aux lio para se lembrar e quem quer que esteja utilizando os seus modelos das se es que n o podem ser editadas no documento Para alterar as cores de realce do modelo 1 Escolha Editar gt Prefer ncias e selecione Realce 2 Clique na caixa de cores das Regi es edit veis e selecione uma cor de realce Fa a o me
490. recem no menu pop up da barra de status Consulte Como redimensionar a janela do documento na p gina 65 Velocidade da conex o determina a velocidade da conex o em quilobits por segundo utilizada no c lculo do tamanho de descarga O tamanho da descarga da p gina exibido na barra de status O tamanho da descarga de imagens exibido no inspetor de propriedades quando uma imagem for selecionada Mostrar o Mini iniciador na barra de status faz com que o Dreamweaver exiba o Mini iniciador na parte inferior da janela do documento Os bot es no Mini iniciador abrem janelas paletas e inspetores Como utilizar o inspetor de propriedades O inspetor de propriedades permite examinar e editar as propriedades do elemento selecionado na p gina Um elemento da p gina um objeto ou texto poss vel selecionar elementos da p gina na janela do documento ou no inspetor de origem de HTML Para mostrar ou ocultar o inspetor de propriedades escolha Janela gt Propriedades H nculo 28 Destino F Formato Nenhum Fonte padr o R Tam Nenhum E FE A maioria das altera es feitas s propriedades ser imediatamente aplicada janela do documento Para algumas propriedades necess rio clicar fora de seus campos de texto para a edi o de propriedades ou pressionar a tecla Tab para alternar para outra propriedade e aplicar a altera o O tipo de elemento selecionado determinar as
491. regar as Design Notes para compartilhar tiver sido selecionada voc poder compartilhar as Design Notes com as outras pessoas de sua equipe Quando um arquivo for colocado ou obtido o Dreamweaver automaticamente colocar ou obter o arquivo de Design Notes a ele associado Caso esteja trabalhando sozinho no site voc poder cancelar a sele o desta op o para melhorar o desempenho das transfer ncias de arquivos quando a op o for desmarcada as Design Notes ser o mantidas localmente mas n o ser o carregadas com os arquivos Clique em OK Para adicionar Design Notes a um documento 1 Enquanto o documento estiver ativo na janela do documento escolha Arquivo gt Design Notes O arquivo tamb m pode ser selecionado na janela do site e em seguida escolhendo Arquivo gt Design Notes Se o arquivo residir em um site remoto retire primeiro o arquivo e em seguida selecione o na pasta local Consulte Como devolver e retirar os arquivos de um servidor remoto na p gina 150 ou Como obter e colocar os arquivos na p gina 151 Na guia Informa es b sicas adicione notas de v rios tipos Escolha o status do documento no menu pop up Status Digite os coment rios na caixa de texto Notas Clique no cone de data logo acima do campo de texto Notas para inserir a data atual local Para que o arquivo de Design Notes seja sempre aberto simultaneamente abertura do arquivo selecione Mostrar quando o arqu
492. regi es edit veis como r tulos XML Neste exemplo o r tulo doctitle identifica o t tulo do modelo e Edit Region refere se regi o edit vel lt doctitle gt lt I CDATA lt title gt newstemplate lt title gt gt lt doctitle gt lt Edit Region gt lt I CDATALEdit RegionH gt lt Edit Region gt e Os r tulos XML padr o do Dreamweaver utilizam o r tulo item name Neste exemplo item name doctitle e item name Edit Region s o utilizados para identificar o t tulo do modelo e a regi o edit vel lt item name doctitle gt lt I CDATA lt title gt newstemplate lt title gt gt lt item gt lt item name Edit Region gt lt CDATA Edit Region gt lt item gt lt item gt Sobre os itens de biblioteca As bibliotecas cont m elementos de p ginas como por exemplo imagens texto e outros objetos a serem reutilizados ou atualizados com freq ncia no site da Web Estes elementos s o denominados itens de biblioteca Quando um item de biblioteca for colocado em um documento o Dreamweaver inserir uma c pia do c digo de origem de HTML no arquivo e criar uma refer ncia ao item externo original A refer ncia ao item externo da biblioteca torna poss vel 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 emiss o dos comandos de atualiza o no submenu Modificar gt Biblioteca O Dreamweaver armazena os itens de b
493. reio eletr nico abrir uma nova janela de mensagem utilizando o programa de correio eletr nico associado ao navegador do usu rio sempre que for clicado Na janela de mensagem eletr nica o campo Para ser atualizado automaticamente com o endere o especificado no v nculo de correio eletr nico Para criar um v nculo de correio eletr nico utilizando o comando Inserir o v nculo de correio eletr nico 1 Najanela do documento posicione o ponto de inser o onde dever aparecer o v nculo de correio eletr nico ou selecione o texto a ser mostrado neste lugar Siga um dos procedimentos abaixo e Escolha Inserir gt V nculo de correio eletr nico e No painel Comuns da paleta de objetos selecione Inserir o v nculo de correio eletr nico 2 No campo Texto na caixa de di logo Inserir o v nculo de correio eletr nico digite ou edite o texto que aparecer no documento como um v nculo de correio eletr nico 3 No campo Correio eletr nico digite o endere o eletr nico do destinat rio 4 Pressione OK Para criar um v nculo de correio eletr nico utilizando o inspetor de propriedades 1 Selecione uma imagem um texto ou um objeto na janela do documento 2 No campo V nculo do inspetor de propriedades digite mailto seguido de um endere o de correio eletr nico Como criar v nculos nulos e de roteiros Os tipos mais comuns de v nculos ocorrem entre documentos e ncoras com nome descritos em Como criar v ncul
494. repita a etapa 4 a fim de restringir mais ainda a busca Gerenciamento desites 159 160 Cap tulo 5 6 Inicie a busca e Escolha Localizar o pr ximo para real ar a pr xima inst ncia do texto da busca no documento Escolha Localizar todos para gerar uma lista de todas as inst ncias do texto da busca no documento Se a busca for realizada em um diret rio ou site o comando Localizar o pr ximo real ar a pr xima inst ncia do texto da busca no documento ou caso n o haja nenhuma abrir o documento seguinte que cont m o texto procurado Localizar todos gera uma lista de documentos que cont m o texto da busca Como buscar texto entre r tulos espec ficos Utilize a op o Texto Avan ado na caixa de di logo Localizar ou substituir para buscar determinadas segii ncias de texto que poder o estar ou n o em um conjunto de r tulos de conten o Por exemplo poss vel buscar a express o Sem t tulo entre os r tulos lt title gt a fim de localizar todas as p ginas sem t tulo no site Consulte Como buscar e substituir na p gina 156 para obter informa es sobre os v rios tipos de buscas Para realizar uma busca de texto avan ada 1 Escolha Editar gt Localizar ou Editar gt Substituir e especifique em quais arquivos dever ser feita a busca conforme a explica o em Como buscar e substituir na p gina 156 No menu pop up Localizar selecione Texto Avan ado Digite o texto
495. representando um globo indica um arquivo em um outro site ou um v nculo especial como um v nculo de correio eletr nico ou de roteiro e Uma marca de sele o verde indica um arquivo retirado por voc e Uma marca de sele o vermelha indica um arquivo retirado por outro usu rio e Um cone com um cadeado indica um arquivo somente de leitura no Windows ou bloqueado no Macintosh V nculos e navega o 127 128 Cap tulo 4 Como padr o o mapa exibe dois n veis da estrutura do site a partir da home page atual Clique nos sinais de adi o ou subtra o no Windows ou na seta de expans o no Macintosh ao lado de uma p gina a fim de mostrar ou ocultar as p ginas vinculadas abaixo do segundo n vel home html product search html ourstorg html gifts html thisweek html B product blends B products search B product foods B product blends B product tools ht 8 product foods h B product wear htm B product tools ht B product results B product wear htm Como padr o os arquivos ocultos e dependentes n o s o exibidos no mapa do site Os arquivos ocultos s o arquivos HTML marcados como ocultos O conte do das p ginas de arquivos dependentes diferente de HTML podendo incluir imagens modelos arquivos Shockwave ou Flash Consulte Como modificar o layout do mapa do site na p gina 128 e Como mostrar e ocultar os arquivos do mapa do site na p gina
496. resentam os elementos invis veis como formul rios ncoras com nome coment rios e roteiros A possibilidade de visualizar os elementos invis veis permite selecionar e exibi los e tamb m alterar as suas propriedades no inspetor de propriedades Os marcadores de elementos que aparecem quando a op o Exibir gt Elementos invis veis for escolhida dependem das defini es no painel Elementos invis veis na caixa de di logo Prefer ncias Por exemplo poss vel especificar que as ncoras com nome dever o estar vis veis mas n o as quebras de linha Consulte Como definir as prefer ncias de elementos invis veis na p gina 90 poss vel criar certos elementos invis veis como coment rios ncoras com nome e roteiros utilizando os bot es no painel Invis veis da paleta de objetos poss vel modificar estes elementos utilizando o inspetor de propriedades Consulte Como utilizar a paleta de objetos na p gina 68 Como definir as prefer ncias de elementos invis veis Utilize as prefer ncias de Elementos invis veis para selecionar os tipos de elementos que estar o vis veis quando for selecionada a op o Exibir gt Elementos invis veis Os elementos invis veis como roteiros coment rios e ncoras com nome s o representados por marcadores na janela do documento A possibilidade de visualizar os elementos invis veis permite selecionar estes marcadores para que as suas propriedades possam ser alteradas
497. ria ou instru o do usu rio por exemplo Escolha uma op o Um aviso de sele o no menu escolhido novamente ap s cada sele o no menu e Utilize um bot o Ir que permite ao usu rio visitar de novo o v nculo que estiver selecionado Como inserir um menu de salto Para criar um menu de salto 1 Escolha Inserir gt Objeto de formul rio gt Menu de salto Aparecer a caixa de di logo Inserir o menu de salto 2 Se desejar criar um aviso de sele o no campo Texto da caixa de di logo Inserir o menu de salto digite o texto que dever aparecer para avisar o usu rio Em Op es marque a caixa de sele o Selecionar o primeiro item ap s a altera o da URL e em seguida clique no bot o com o sinal de adi o para incluir um item de menu 3 No campo Texto da caixa de di logo Inserir o menu de salto digite o texto que aparecer na lista do menu 4 No campo Ap s selecionar v para a URL selecione o arquivo a ser aberto e siga o procedimento abaixo e Clique em Procurar e em seguida selecione o arquivo a ser aberto e Digite o caminho do arquivo a ser aberto 5 No menu pop up Abrir as URLs em selecione uma localiza o na qual o arquivo ser aberto seguindo um dos procedimentos abaixo e Selecione Janela principal para abrir o arquivo na mesma janela Selecione uma moldura na qual o arquivo ser aberto Nota Se a moldura a ser designada n o aparecer no menu pop up Destino saia d
498. riedades espec fico pode ser utilizado para o r tulo Se a primeira linha do inspetor de propriedades contiver esse nome de r tulo com um asterisco de cada lado ent o o inspetor poder ser utilizado para esses tipos de r tulos Por exemplo o TAG NAME para o c digo ASP ASP os inspetores de propriedades que podem examinar o c digo ASP devem conter ASP na primeira linha Para obter informa es sobre a API de inspetor de propriedades consulte Inspetores de propriedades em Extens o dos recursos do Dreamweaver Determina se o r tulo o conte do como em IMG ou se envolve o conte do como em CODE Necess rio para r tulos normais n o delimitados por sequ ncias de caracteres Determina se o conte do do r tulo dever aparecer na janela do documento ou se ser representado por um icone Necess rio para os r tulos nonempty vazios Aplica se apenas aos r tulos que aparecem fora dos atributos Descreve o que o r tulo pode conter e o que pode cont lo Necess rio block model especifica que o r tulo pode conter elementos em n vel de bloco como DIV e P e que o r tulo pode aparecer apenas na se o BODY ou dentro de outros r tulos de conte do de corpo do texto como DIV LAYER ou TD head model especifica que o r tulo pode acomodar conte do de texto e aparecer apenas na se o HEAD marker model especifica que o r tulo pode conter qualquer c digo HTML v lido e pode aparecer em qualquer
499. rios experientes e programadores do Dreamweaver tentem editar esse arquivo pois h uma grande probabilidade da ocorr ncia de erros graves nesse programa Consulte Como editar o perfil de formata o da origem de HTML na p gina 396 Como definir as prefer ncias de regrava o de HTML As prefer ncias de regrava o de HTML determinam as a es do Dreamweaver quando abre os documentos HTML Essas prefer ncias n o t m efeito quando o HTML for editado no inspetor de origem de HTML Se estas op es forem desativadas o Dreamweaver exibir itens de markup inv lidos na janela do documento para o HTML que seria regravado Se um documento HTML for importado do Word poder ser utilizado o comando Limpar o HTML do Word para remover os c digos HTML desnecess rios Consulte Limpar o HTML do Microsoft Word na p gina 352 para obter mais informa es Ajustar os r tulos abertos e aninhados incorretamente regrava os r tulos sobrepostos ou aninhados indevidamente Por exemplo lt b gt lt i gt text lt b gt lt i gt ser regravado como lt b gt lt i gt text lt i gt lt b gt Esta op o tamb m inserir aspas e colchetes de fechamento se estiverem faltando Remover os r tulos de finaliza o adicionais exclui os r tulos de finaliza o que n o apresentarem os correspondentes de abertura Advertir ao ajustar ou remover os r tulos exibe um resumo do HTML tecnicamente inv lido que o Dreamweaver tentou corrigir
500. ript v nculos relativos e absolutos para documentos controles ActiveX plug ins da Netscape etc contanto que os plug ins ou controles ActiveX necess rios estejam instalados Os conte dos vinculados aos caminhos relativos raiz n o aparecer o quando os documentos forem visualizados em um navegador local Isso ocorre porque os navegadores n o reconhecem as ra zes dos sites mas os servidores o fazem Para visualizar o conte do vinculado aos caminhos relativos raiz coloque o arquivo em um servidor remoto e exiba o nesse local Consulte tamb m Sobre os caminhos absolutos na p gina 110 poss vel definir at 20 navegadores para a visualiza o Todos os navegadores definidos aparecer o no menu Visualizar no navegador Para visualizar o site em um navegador Siga um dos procedimentos abaixo e Escolha Arquivo gt Visualizar no navegador e Pressione F12 para exibir o documento no navegador prim rio e Pressione Control F12 no Windows ou Command F12 no Macintosh para exibir o documento no navegador secund rio Para alterar o navegador prim rio ou definir um navegador secund rio 1 Escolha Arquivo gt Visualizar no navegador gt Editar a lista de navegadores 2 Defina as prefer ncias de visualiza o como preferir Como definir as prefer ncias de visualiza o no navegador As prefer ncias de visualiza o no navegador exibem os navegadores prim rio e secund rio definidos atualmente Para
501. rquivos do site e a cria o e edi o de documentos contidos nesta pasta Estes arquivos s o ent o periodicamente copiados para um servidor da Web que permite a exibi o do site por outras pessoas Esta abordagem melhor do que criar e editar arquivos no pr prio site ativo da Web pois ela permite testar as altera es no site local antes de torn las publicamente visualiz veis e em seguida efetuar uma s rie de altera es simult neas ao site Como planejar a estrutura do site O cuidado na organiza o do site desde o in cio pode posteriormente economizar tempo Se come ar a criar documentos sem pensar em que local da hierarquia da pasta eles dever o ser armazenados poss vel que voc tenha que lidar com uma pasta dif cil de ser acessada e com demasiados arquivos ou que os arquivos relacionados estejam espalhados em pastas com nomes semelhantes Classifique o seu site em categorias Coloque p ginas relacionadas na mesma pasta por exemplo os press releases informa es de contato e oportunidades de empregos em sua empresa poder o ser armazenados em uma pasta enquanto que as p ginas relativas ao seu cat logo on line poder o ser armazenadas em outra pasta Sempre que necess rio utilize subpastas Decida onde colocar itens como imagens e arquivos de som Por exemplo conveniente colocar todas as imagens em um nico local para facilitar a localiza o das mesmas quando forem inseridas em uma p gina A
502. rra de menus no Macintosh 3 Para sincronizar o site inteiro escolha Site nome do site inteiro no menu pop up Sincronizar Para sincronizar apenas os arquivos selecionados escolha Apenas os arquivos locais selecionados ou Apenas os arquivos remotos selecionados se o painel remoto for o local onde foi realizada a sele o mais recente 4 Escolha uma dire o para a c pia dos arquivos Selecione Colocar os arquivos mais novos no remoto se desejar carregar todos os arquivos locais com as datas de modifica o mais recentes que os seus correspondentes remotos e Selecione Obter os arquivos mais novos do remoto se desejar descarregar todos os arquivos remotos com datas de modifica o mais recentes do que as de seus correspondentes remotos e Escolha Obter e colocar os arquivos mais novos para colocar as vers es mais recentes de todos os arquivos nos sites remoto e local 5 Decida se ir excluir ou n o os arquivos no site de destino que n o tiverem correspondentes no site de origem Se for escolhido Colocar os arquivos mais novos no remoto e selecionada a op o Excluir o Dreamweaver excluir os arquivos no site remoto para os quais n o haja correspondentes locais Se for escolhido Obter os arquivos mais novos do remoto o Dreamweaver excluir os arquivos no site local para os quais n o haja correspondentes remotos 6 Clique em OK Se a vers o mais recente de cada arquivo escolhido j estiver em ambos os
503. rregar as imagens na p gina 323 Permutar a imagem troca uma imagem por outra alterando o atributo SRC do r tulo IMG Utilize esta a o para criar bot es cambi veis e outros efeitos em imagens inclusive a permuta simult nea de mais de uma imagem Consulte Permutar a imagem na p gina 331 Restaurar a imagem permutada restaura o ltimo conjunto de imagens permutadas aos seus arquivos de origem anteriores Esta a o ser adicionada automaticamente sempre que voc anexar a a o Permutar a imagem a um objeto como padr o n o ser necess rio selecion la manualmente Consulte Restaurar a imagem permutada na p gina 332 Os comportamentos tamb m podem ser utilizados para criar sistemas de navega o mais sofisticados como uma barra de navega o ou um menu de salto Consulte Como criar as barras de navega o na p gina 124 e Como criar menus de salto na p gina 122 CAP TULO 8 Como criar tabelas As tabelas s o uma ferramenta de desenho de Web muito avan ada para organizar os dados e as imagens em uma p gina HT ML As tabelas proporcionam aos designers da Web os meios de adicionar uma estrutura horizontal e vertical a uma p gina As tabelas consistem de tr s componentes b sicos e linhas espa amento horizontal colunas espa amento vertical e c lulas o recipiente criado pela interse o de uma linha e uma coluna Utilize as tabelas para organizar os dados tabulares
504. rtir das imagens Our Story Products e This Week s p ginas correspondentes Voc perceber que h diversas maneiras de criar v nculos utilizando o Dreamweaver Inicialmente adicione um v nculo da imagem Our Story para a p gina Our Story utilizando o inspetor de propriedades 1 Em qualquer um dos dois pain is da janela do site clique duas vezes no cone correspondente ao arquivo DW3 scaal home html O arquivo DW3 scaal home html ser aberto 2 Na janela do documento clique na imagem Our Story para selecion la N o clique duas vezes na imagem sen o o Dreamweaver abrir a caixa de di logo Selecionar a origem da imagem 3 Escolha Janela gt Propriedades para abrir o inspetor de propriedades caso ainda esteja fechado O inspetor de propriedades exibe as informa es sobre a imagem selecionada Imagem 1K les Dig estbn ourstory up gif Ey Alinhar Padr do navegad Q ourstory ula V nculo ourstory html so Aa Mapa Espa o Y Destino Borda 0 Is ONA Espero Orig baina Nota O campo V nculo cont m um sinal de n mero criado quando voc anexou imagem o comportamento Permutar a imagem N o remova o sinal de n mero que ser substitu do pelo nome do arquivo do documento ao qual est sendo criado o v nculo 4 No inspetor de propriedades clique no cone correspondente pasta direita do campo V nculo 5 Na caixa de di logo Selecionar o arquivo procure my ourstory
505. s raiz no seu navegador sem usar Visualizar no navegador no Dreamweaver os v nculos n o funcionar o Quando o recurso Visualizar no navegador for utilizado para visualizar um documento que cont m v nculos relativos raiz o Dreamweaver converter temporariamente esses v nculos apenas no arquivo visualizado para usar os caminhos file absolutos Contudo poss vel visualizar apenas uma p gina de cada vez que utilize os v nculos relativos raiz se um v nculo for seguido a partir da p gina visualizada os v nculos relativos raiz da nova p gina n o ser o convertidos e o navegador n o poder segui los A exibi o de p ginas em conjuntos de molduras que utilizam v nculos relativos raiz causa problemas semelhantes Para visualizar um conjunto de p ginas que utilizam v nculos relativos raiz siga um dos procedimentos abaixo e Coloque os arquivos em um servidor remoto e exiba os nesse local e Apenas no Windows Escolha Editar gt Prefer ncias e nas prefer ncias de Visualizar no navegador selecione Visualizar utilizando o servidor local Para usar essa op o necess rio que um servidor da Web esteja em execu o no seu computador local Como criar os v nculos O r tulo HTML para criar um v nculo de hipertexto chamado de r tulo de ncora O Dreamweaver cria um par de r tulos de ncora para objetos texto ou imagens criados para serem vinculados Por exemplo se for selecionado n
506. s anterior Selecionar o conjunto pai de molduras Selecionar a primeira moldura filha ou conjunto filho de molduras Adicionar uma nova moldura ao conjunto de molduras Adicionar uma nova moldura ao conjunto de molduras utilizando o m todo de empurramento Enquanto mant m a tecla Alt pressionada clique na moldura Alt seta direita Alt seta esquerda Alt seta acima Alt seta abaixo Enquanto mant m a tecla Alt pressionada arraste a borda da moldura Enquanto mant m as teclas Alt e Control pressionadas arraste a borda da moldura Clique na moldura mantendo pressionadas a teclas Shift e Option Command seta direita Command seta esquerda Command seta acima Command seta abaixo Enquanto mant m a tecla Option pressionada arraste a borda da moldura Enquanto mant m as teclas Command e Option pressionadas arraste a borda da moldura Atalhos de teclado 413 414 Ap ndice A Como trabalhar com as camadas A o No Windows No Macintosh Selecionar uma camada Selecionar e mover uma camada Adicionar ou remover a camada da sele o Mover a camada selecionada um determinado n mero de pixels Mover a camada selecionada um incremento de encaixe Redimensionar a camada selecionada um determinado n mero de pixels Redimensionar a camada selecionada um incremento de encaixe Alinhar as camadas selecionadas parte inferior superior esquerda direita da
507. s renomeie os com designa es mais curtas e Observe que muitos servidores podem utilizar v nculos simb licos no UNIX atalhos no Windows ou apelidos no Macintosh para conectar uma pasta em uma parte do disco do servidor a uma outra que esteja em uma localiza o diferente Por exemplo o subdiret rio public html do seu diret rio principal no servidor pode ser na verdade um v nculo para outra parte do servidor Na maioria dos casos esses apelidos n o provocam qualquer efeito sobre a capacidade de conex o pasta ou diret rio adequado mas se for poss vel conectar se a uma parte do servidor mas n o a outras pode ocorrer um problema devido ao apelido Gerenciamento desites 143 144 Cap tulo 5 Em geral quando ocorrer um problema em uma transfer ncia de FTP examine o registro do FTP escolhendo Janela gt Registro de FTP do site na janela do documento no Windows ou Site gt Registro do FTP no Macintosh Caso apare a uma mensagem de erro como n o poss vel colocar o arquivo poss vel que n o haja espa o no site remoto Verifique o registro do FTP para obter informa es mais detalhadas Sobre a janela do site Utilize a janela do site para executar as opera es padr o de manuten o de arquivos como por exemplo criar novos documentos HTML mover arquivos criar pastas e excluir itens para layout de navega o do mapa do site consulte Como exibir a estrutura do site na p gina
508. s camadas selecionadas assumir o a largura ou altura da ltima camada selecionada real ada em preto No inspetor de propriedades abaixo de Camadas m ltiplas digite os valores de largura e altura Os valores ser o aplicados a todas as camadas selecionadas Como utilizar as camadas 245 246 Cap tulo 9 Como mover as camadas Qualquer pessoa que j tenha trabalhado com aplicativos gr ficos b sicos estar familiarizado com o procedimento de transfer ncia de camadas na janela do documento Se a op o Evitar sobreposi es estiver ativada n o ser poss vel mover uma camada para que esta se sobreponha a outra Consulte Como evitar as sobreposi es de camadas na p gina 251 Para mover uma ou mais camadas siga um dos procedimentos abaixo Para mover arrastando selecione as camadas e arraste a al a de sele o da ltima camada selecionada real ada em preto e Para mover um pixel por vez selecione as camadas e utilize as teclas de seta Pressione a tecla Shift e uma das teclas de seta para mover a camada de acordo com o incremento de encaixe na grade Para obter informa es sobre a defini o de incrementos de encaixe na grade consulte Como encaixar as camadas na grade na p gina 247 Como alinhar as camadas Utilize os comandos de alinhamento de camadas para alinhar uma ou mais camadas com uma borda da ltima camada selecionada Durante o alinhamento de camadas quando uma camada m e
509. s conjuntos de molduras para definir as bordas e o tamanho das molduras A defini o da propriedade de uma moldura anular o par metro correspondente a um conjunto de molduras Por exemplo a defini o das propriedades da borda em uma moldura anular essas mesmas propriedades definidas no conjunto de molduras Os conjuntos de molduras predefinidos s o utilizados para aplicar rapidamente um conjunto a um documento Esses conjuntos compartilham os seguintes valores de propriedades padr o n o haver bordas barras de rolagem e redimensionamento de molduras quando forem visualizadas em um navegador Para alterar os valores padr o selecione as op es desejadas no inspetor de propriedades Para exibir as propriedades do conjunto de molduras Escolha Janela gt Propriedades para exibir o inspetor de propriedades caso n o esteja aberto 2 Siga um dos procedimentos abaixo e Clique em uma borda entre duas molduras na janela do documento e Clique na borda que circunda as molduras no inspetor de molduras 3 Para examinar todas as propriedades dos conjuntos de molduras clique na seta de expans o no canto inferior direito do inspetor de propriedades mainFrame Molduras IE Bordas ESE Cordaborda E To rr Linhas 1 Colunas 2 Larg da borda O Valor Unidades Sele o de Coluna 161 Pieis z lin tcol i a Como utilizar as molduras 275 276 Cap tulo 10 Para
510. s de outros fabricantes O Dreamweaver corrige alguns tipos de erros no HT ML para obter informa es sobre os erros espec ficos que s o consertados consulte Como definir as prefer ncias de regrava o de HTML na p gina 346 Como padr o o Dreamweaver n o altera o HTML nos arquivos com determinadas extens es de nome de arquivo inclusive asp ASP cfm ColdFusion e php PHP Esse padr o definido para que o Dreamweaver n o modifique acidentalmente o c digo contido nos r tulos de outros fabricantes O comportamento de regrava o padr o do Dreamweaver pode ser alterado para que o programa regrave o HTML quando esses arquivos forem abertos podem ser adicionados outros tipos de arquivos lista daqueles que o Dreamweaver n o regravar O Dreamweaver tamb m codificar determinados caracteres especiais quando forem digitados no inspetor de propriedades Com fregi ncia conveniente permitir que o Dreamweaver realize essa codifica o ele torna os caracteres especiais mais prov veis de serem visualizados corretamente em v rias plataformas e navegadores Contudo como essa codifica o pode interferir no c digo contido nos r tulos de outros fabricantes ou at mesmo nos pr prios r tulos altere o comportamento de codifica o do Dreamweaver Como personalizar o Dreamweaver 407 408 Cap tulo 16 Para permitir que o Dreamweaver regrave o HTML em todos os arquivos 1 Escolha Editar gt Prefer ncias e
511. s e os caminhos dos documentos Ao criar v nculos essencial compreender o caminho de arquivo entre o documento do qual parte o v nculo e o que est sendo vinculado Cada p gina da Web tem um endere o nico chamado Universal Resource Locator URL Para obter informa es detalhadas sobre as URLs consulte a p gina do World Wide Web Consortium sobre como atribuir nomes e endere os Contudo quando criado um v nculo local entre dois documentos no mesmo site normalmente a URL inteira do documento que est sendo vinculado n o especificada em vez disso indicado um caminho relativo a documento atual ou da pasta raiz do site Abaixo est o os tr s tipos de caminhos de documento e Caminhos absolutos por exemplo http www macromedia com dreamweaver contents html e Caminhos relativos a documento por exemplo dreamweaver contents html e Caminhos relativos raiz por exemplo support dreamweaver contents html Com o Dreamweaver poss vel selecionar facilmente o tipo de caminho de documento a ser criado para os v nculos Consulte Como criar v nculos a um documento na p gina 114 Sobre os caminhos absolutos Caminhos absolutos fornecem a URL completa do documento vinculado inclusive o protocolo a ser utilizado normalmente http para as p ginas da Web Por exemplo http www macromedia com support dreamweaver contents html um caminho absoluto Deve ser utilizado um caminho absoluto
512. s estilos CSS em um arquivo compat vel com navegador 3 0 1 Escolha Arquivo gt Converter gt Compat vel com navegador 3 0 2 Na caixa de di logo que aparecer escolha Estilos CSS em markup HTML Quando a op o Tabelas em camadas for selecionada o Dreamweaver substituir todas as camadas por uma tabela e manter o posicionamento original Os estilos CSS ser o substitu dos onde for poss vel pelos r tulos HTML como B e FONT Qualquer markup CSS que n o puder ser convertido em HTML ser removido Consulte Tabela de convers o de CSS em markup HTML na p gina 197 para obter informa es sobre quais estilos ser o convertidos e quais ser o removidos 3 Clique em OK O Dreamweaver abrir o arquivo convertido em uma nova janela sem t tulo Nota Este procedimento de convers o dever ser efetuado sempre que o arquivo original for alterado para atualizar o arquivo compat vel com os navegadores da vers o 3 0 Por esse motivo recomendamos que isto seja efetuado apenas depois que voc estiver inteiramente satisfeito com o arquivo original Tabela de convers o de CSS em markup HTML Os atributos CSS relacionados na tabela abaixo s o convertidos em markup HTML com o comando Arquivo gt Converter gt Compat vel com navegador 3 0 Consulte Como converter os estilos CSS em markup HTML na p gina 196 Os atributos n o contidos na tabela ser o removidos Atributo CSS Convertido em cor fam li
513. s outros atributos que n o estiverem explicitamente ativos Por exemplo se voc n o definir qualquer atributo para a janela ela poder ser aberta com 640 por 480 pixels e possuir uma barra de navega o barra de ferramentas de localiza o barra de status e barra de menus Se voc definir a largura explicitamente como sendo 640 e a altura como sendo 480 pixels e n o definir outros atributos a janela ser aberta com 640 por 480 pixels e n o possuir barras de navega o de ferramentas de localiza o de status ou de menus qualquer al a de redimensionamento ou barras de rolagem Para poder utilizar a a o Abrir a janela do navegador 1 Selecione um objeto e abra o inspetor de comportamentos 2 Clique no bot o com o sinal de adi o e escolha Abrir a janela do navegador no menu pop up A es 3 Clique em Procurar para selecionar um arquivo ou digite a URL a ser exibida 4 Defina qualquer uma das seguintes op es Largura da janela especifica a largura da janela em pixels Altura da janela especifica a altura da janela em pixels Barra de ferramentas de navega o a linha de bot es do navegador que inclui Voltar Avan ar Origem e Recarregar Barra de ferramentas de localiza o a linha de op es do navegador que incluem o campo de localiza o Barra de status a rea situada na parte inferior da janela do navegador na qual s o exibidas as mensagens como o tempo de carga restante e as URLs
514. s r tulos e atributos abertos daqui em diante at que seja cancelada novamente esta op o Os r tulos e atributos digitados no inspetor de origem de HTML e no Quick Tag Editor tamb m ser o convertidos para a caixa especificada da mesma forma que os r tulos e atributos inseridos utilizando a paleta de objetos Por exemplo se desejar que os nomes de r tulos sejam convertidos sempre em letras min sculas especifique min sculas em Caixa do r tulo e em seguida selecione Ignorar a caixa de op o R tulos Em seguida quando for aberto um documento que contenha nomes de r tulos em mai sculas o Dreamweaver os converter em min sculas Centraliza o especifica se os elementos devem ser centralizados utilizando DIV ALIGN center ou CENTER Ambos fazem parte da especifica o HTML 4 0 Transitional mas CENTER conta com suporte de um n mero maior de navegadores Como definir as prefer ncias de cores HTML Utilize as prefer ncias de cores HT ML para controlar as cores do fundo do texto e dos r tulos no inspetor de origem de HTML Fundo especifica a cor do fundo para o inspetor de origem de HTML Essa cor aparecer apenas quando voc clicar ou digitar no inspetor de origem de HTML se o inspetor n o estiver ativado a sua cor de fundo ser cinza m dio Texto especifica a cor do texto que aparece entre os r tulos por exemplo no c digo lt b gt algum texto lt b gt as palavras algum texto aparecem na cor da op
515. s s mbolos n o sejam exibidos corretamente nos navegadores diferentes das vers es 3 e 4 do Navigator e das vers es 3 e 4 do Internet Explorer e O painel Formul rios cont m bot es para criar os formul rios e seus elementos e O painel Molduras cont m estruturas comuns dos conjuntos de molduras e O painel Cabe alho cont m bot es para adicionar diversos elementos HEAD como os r tulos META KEYWORDS e BASE e O painel Invis veis cont m bot es para criar objetos que n o s o vis veis na janela do documento como as ncoras com nome Escolha Exibir gt Elementos invis veis para mostrar os cones que marcam a posi o desses objetos Clique nos cones dos elementos invis veis na janela do documento a fim de selecionar os objetos e alterar as suas propriedades Consulte Sobre os elementos invis veis na p gina 90 Algumas configura es das prefer ncias gerais afetam a paleta de objetos Para modific las escolha Editar gt Prefer ncias e em seguida selecione Geral e Ao inserir objetos como os imagens tabelas roteiros e elementos HEAD uma caixa de di logo solicitar informa es adicionais Essas caixas de di logo podem ser suprimidas ao se desativar a op o Mostrar a caixa de di logo quando inserir objetos Ao inserir um objeto com esta op o desativada ser o conferidos valores de atributos padr o ao objeto Utilize o inspetor de propriedades para alterar as propriedades do objeto ap s a i
516. s v nculos ativos a cor assumida por um v nculo quando este for clicado Para definir as cores padr o do texto siga um dos procedimentos abaixo e Escolha Modificar gt Propriedades da p gina e em seguida escolha as cores para as op es Cor do texto Cor do v nculo V nculos visitados e V nculos ativos e Escolha Comandos gt Definir o esquema de cores e em seguida escolha uma Cor do fundo e um conjunto de cores para o Texto e os V nculos A caixa de amostras exibe a apar ncia do esquema de cores no navegador Sobre a paleta de hist rico A paleta de hist rico mostra uma lista com todas as etapas do seu trabalho no documento ativo desde a cria o ou abertura do mesmo A paleta de hist rico n o mostra as etapas efetuadas em outras molduras janelas de documentos ou na janela do site Ela permite desfazer uma ou mais etapas execut las novamente e criar novos comandos para automatizar tarefas repetitivas Hi D gt Hist rico gt Digitando scaal Novo par grafo Copiar el Colar B Aplicar negrito Etapas Polegar deslizante Bot o Executar novamente Bot o Copiar as etapas Bot o de comando Salvar como O bot o deslizante polegar da paleta de hist rico indica inicialmente a ltima etapa efetuada Nota N o poss vel reorganizar a ordem das etapas na paleta de hist rico N o encare a paleta de hist rico como um conjunto arbitr rio de comand
517. selecione a categoria Regrava o de HTML 2 Siga um dos procedimentos abaixo e Exclua uma ou mais extens es da lista de extens es e Cancele a sele o de Nunca regravar o HTML op o Em arquivos com as extens es Para adicionar tipos de arquivos que o Dreamweaver n o deve regravar 1 Escolha Editar gt Prefer ncias e selecione a categoria Regrava o de HTML 2 Certifique se de que a op o Nunca regravar o HTML Em arquivos com as extens es esteja selecionada e adicione as novas extens es de arquivos lista no campo de texto Para desativar as op es de codifica o do Dreamweaver 1 Escolha Editar gt Prefer ncias e selecione a categoria Regrava o de HTML 2 Cancele uma ou ambas as op es de Caracteres especiais Para obter informa es sobre as outras prefer ncias de regrava o de HTML consulte Como definir as prefer ncias de regrava o de HTML na p gina 346 AP NDICE A Atalhos de teclado menu Arquivo A o No Windows No Macintosh Novo documento Control Shift N Command N Nova janela Control N n o dispon vel Abrir um arquivo HTML Control 0O ou arraste o Command O arquivo da janela Explorer ou do site para a janela do documento Abrir na moldura Control Shift O Command Shift O Fechar Control W Command W Salvar Control S Command S Salvar tudo Control Shift S Command Shift S Sair Control Q Command Q 409 410 Ap ndice A menu Editar A o No Wi
518. serem validados 9 Clique em OK Se estiver validando v rios campos quando o usu rio enviar o formul rio o evento onSubmit aparecer automaticamente no menu pop up Eventos 10 Se estiver validando um determinado campo certifique se de que o evento padr o seja onBlur ou onChange Se n o for selecione onBlur ou onChange no menu pop up Ambos os eventos disparam a a o Validar o formul rio assim que o usu rio mover o cursor para fora do campo A diferen a entre estes eventos est na ocorr ncia invari vel de onBlur se o usu rio tiver digitado no campo ou n o enquanto que onChange ocorrer apenas se o usu rio tiver alterado de qualquer maneira o conte do do campo O evento onBlur prefer vel quando voc tiver especificado que o campo necess rio Como utilizar os comportamentos 335 336 Cap tulo 12 Como atualizar um comportamento Se as suas p ginas contiverem comportamentos que tiverem sido criados com uma vers o mais antiga do Dreamweaver esses comportamentos n o ser o atualizados automaticamente quando as p ginas forem abertas na vers o atual do Dreamweaver Entretanto quando voc atualizar uma ocorr ncia de um comportamento em uma p gina todas as outras ocorr ncias do comportamento na p gina tamb m ser o atualizadas Para atualizar um comportamento em uma p gina 1 Selecione um elemento ao qual foi anexado o comportamento 2 Abra o inspetor de comportamentos 3 Clique duas vezes no com
519. sionada a tecla Alt no Windows ou as teclas Option e Shift no Macintosh clique em uma moldura na janela do documento 2 Escolha Janela gt Propriedades para abrir o inspetor de propriedades Clique na seta de expans o situada no canto inferior direito para examinar todas as propriedades Molduras E Molduras mainFrame IRO 1 Colunas 2 Larg daborda O ES Molduras Bordas n o z Cor da borda C f E Linhas 3 Para denominar uma moldura digite um nome no campo Nome da moldura Nota Nome da moldura determina o nome da moldura a ser utilizado como refer ncia de destino e roteiro de hiperv nculos O nome de uma moldura dever conter apenas uma palavra S o permitidos os sinais de sublinhado por m h fens pontos e espa os n o o s o Os nomes das molduras devem iniciar com uma letra ao inv s de um n mero N o utilize as palavras reservadas do JavaScript por exemplo top ou navigator como nomes de molduras Como utilizar as molduras 273 274 Cap tulo 10 Escolha uma dentre as seguintes op es de molduras Orig determina o documento de origem da moldura Digite um nome de arquivo ou clique no cone correspondente pasta para procurar e selecionar o arquivo Tamb m poss vel abrir um arquivo em uma moldura posicionando o cursor na mesma e escolhendo Arquivo gt Abrir na moldura Pagina o determina se as barras de rolagem aparecer o quando n o houver
520. smo para as Regi es bloqueadas 3 Clique em Mostrar para exibir ou ocultar essas cores na janela do documento 4 Clique em OK Para exibir as cores de realce na janela do documento Escolha Exibir gt Elementos invis veis As cores de realce aparecem somente na janela do documento quando a op o Exibir gt Elementos invis veis estiver ativada Modelos e bibliotecas 363 Como exibir as regi es edit veis e bloqueadas As regi es edit veis e bloqueadas aparecem na janela do documento como objetos e textos real ados Para obter informa es sobre a defini o das prefer ncias de realce consulte Como definir as prefer ncias dos modelos na p gina 363 Nos modelos apenas as regi es edit veis est o real adas No entanto o conte do das regi es edit veis e bloqueadas pode ser alterado lt lt Modelo gt gt my product page dwt Dreamweaver cmm Arquivo Edtar Exibir Inserir Modificar Texto Comandos Site Janela Ajuda Locked Region Contains material that doesn t change ig Use templates to create a standard design for a page and apply that design to several documents in Tanto as regi es your site Templates make it easy to quickly create several pages that share a theme bloqueadas quanto as edit veis podem ser modificadas Locked regions are highlighted in documents that use templates 650x 450 27K 8 seg sa LU T D DlA As regi es edit veis est o real adas N
521. smo tipo Ap s a altera o de um v nculo no site inteiro o arquivo selecionado se tornar rf o ou seja nenhum arquivo na unidade local o indicar A exclus o do mesmo n o causar problemas pois n o romper quaisquer v nculos existentes no site local V nculos e navega o 135 136 Cap tulo 4 Nota Lembre se de que como todas as altera es est o ocorrendo localmente ser necess rio excluir manualmente o arquivo correspondente no site remoto e colocar ou devolver quaisquer arquivos nos quais tiverem ocorrido altera es nos v nculos para que os visitantes do seu site possam visualiz las Para alterar os v nculos de correio eletr nico FTP nulos ou de roteiros no site inteiro 1 Abra o mapa do site 2 Escolha Site gt Alterar o v nculo no site inteiro 3 Na caixa de di logo Alterar o v nculo no site inteiro digite as seguintes informa es e No campo Alterar todos os v nculos a digite o nome completo do v nculo que est sendo alterado e No campo Em v nculos a digite o nome completo do v nculo de substitui o 4 Clique em OK Por exemplo para atualizar todos os v nculos de correio eletr nico que levam ao seu endere o antigo digite mailto juserQisp com na caixa Alterar todos os v nculos a e digite mailto juser interfaceQisp com na caixa Em v nculos a Como testar os v nculos Os v nculos n o est o ativos na janela do documento isto quando voc clica em u
522. solicita uma p gina PHP de um servidor habilitado para PHP este interpreta o c digo PHP e envia o HTML resultante para o navegador Para obter mais informa es sobre PHP consulte as P ginas PHP conforme a descri o em Recursos de tecnologias de Web e HTML na p gina 19 Um bloco de c digo PHP inicia com lt e termina com gt Se a op o Exibir gt Elementos invis veis estiver selecionada o Dreamweaver mostrar um cone de PHP na janela do documento para marcar a localiza o do c digo PHP Sobre a ColdFusion A ColdFusionTM constitui outra maneira de tratar as p ginas dinamicamente Quando um navegador solicita uma p gina ColdFusion de um servidor este a passa ao software ColdFusion Server que interpreta os roteiros na p gina e envia o HTML resultante para o navegador Para obter mais informa es sobre ColdFusion consulte a P gina do produto ColdFusion conforme a descri o em Recursos de tecnologias de Web e HTML na p gina 19 O Dreamweaver reconhece aproximadamente 50 r tulos ColdFusion consulte o arquivo ColdFusion xml na pasta Configuration T hirdParty Tags para obter mais detalhes Se a op o Exibir gt Elementos invis veis estiver selecionada o Dreamweaver exibir um cone de ColdFusion na janela do documento para marcar a localiza o dos r tulos ColdFusion para os quais RENDER CONTENTS tiver sido definido como FALSE no ColdFusion xml Como impedir a regrava o de r tulo
523. stilo como sendo de uma sele o ao inv s de um par grafo Estilos HTML para o T Estilos HTML a Limpar o estilo da sele o A Limpar o estilo do par grafo 1 body a soaal Ao aplicar um estilo a uma sele o necess rio selecionar a faixa de texto a ser reformatado 7 Na janela do documento selecione a palavra Scaal no primeiro par grafo 8 Selecione o estilo scaal na paleta de estilos HTML O texto do documento exibir o novo estilo SCAAL 9 Aplique o estilo scaal a outras sele es e em seguida feche a paleta de estilos HTML 10 Escolha Arquivo gt Salvar para salvar as altera es feitas ao documento my ourstory 1 Escolha Arquivo gt Fechar para fechar o documento Criar um mapa visual do site Utilize a op o Mapa do site do Dreamweaver para fornecer uma representa o visual de alto n vel da estrutura de um site local A exibi o de Mapa do site tamb m pode ser utilizada para incluir novos arquivos no site adicionar remover e alterar os v nculos al m de criar um arquivo de imagem do site que pode ser exportada e impressa a partir de um aplicativo de edi o de imagens Na janela Mapa do site a home page de um site sempre aparecer acima do mapa do site abaixo dela poss vel ver a quais arquivos a home page estar vinculada Voc definir DW3 scaal home html como sendo a home page de my tutorial site Esta p gina semelhante home page que voc criou Ela
524. strar ocultar o v nculo no Windows ou Site gt Exibi o do mapa do site gt Mostrar ocultar o v nculo no Macintosh Para mostrar ou ocultar os arquivos marcados como ocultos siga um dos procedimentos abaixo e Escolha Exibir gt Mostrar os arquivos marcados como ocultos no Windows ou Site gt Exibi o do mapa do site gt Mostrar os arquivos marcados como ocultos no Macintosh e Escolha Exibir gt Layout no Windows ou Site gt Exibi o do mapa do site gt Layout no Macintosh para abrir a caixa de di logo Defini o do site e selecionar a op o Exibir os arquivos marcados como ocultos Como padr o os arquivos dependentes j est o ocultos poss vel optar por mostr los ou n o no mapa do site Para mostrar os arquivos dependentes siga um dos procedimentos abaixo e Escolha Exibir gt Mostrar os arquivos dependentes no Windows ou Site gt Exibi o do mapa do site gt Mostrar os arquivos dependentes no Macintosh e Escolha Exibir gt Layout no Windows ou Site gt Exibi o do mapa do site gt Layout no Macintosh para abrir a caixa de di logo Defini o do site e selecionar a op o Exibir os arquivos dependentes Como exibir o site a partir de uma ramifica o poss vel exibir os detalhes de uma determinada se o de um site tomando como ponto de refer ncia uma das ramifica es do mapa do site Para exibir uma ramifica o diferente Selecione a p gina a ser exi
525. sulte Propriedades dos menus de lista na Ajuda do Dreamweaver Campos de arquivos permitem que o usu rio procure os arquivos nos discos r gidos carregando os como dados do formul rio Consulte Propriedades dos campos de arquivos na Ajuda do Dreamweaver Como criar formul rios 383 384 Cap tulo 15 Campos ocultos permitem armazenar informa es como o destinat rio dos dados do formul rio ou o assunto do formul rio que n o forem relevantes ao usu rio mas que ser o utilizadas pelo aplicativo que processa o formul rio Consulte Propriedades dos campos ocultos na Ajuda do Dreamweaver Menu de salto permite inserir um menu no qual cada op o se vincula a um documento ou arquivo Consulte Como criar menus de salto na p gina 122 3 Se desejar digite um identificador ou texto descritivo ao lado do objeto poss vel aplicar formata o de texto aos identificadores dos objetos do formul rio Para obter mais informa es consulte Como alterar as caracter sticas da fonte na p gina 179 Como processar os formul rios Os formul rios s o processados pelo roteiro ou aplicativo especificado no atributo ACTION do r tulo FORM Selecione um formul rio e examine a a o a ele associada no inspetor de propriedades Os formul rios mais simples utilizam JavaScript ou VBScript para efetuar todo o processamento dos formul rios no cliente o que evita a necessidade de enviar os dados do formul rio ao servidor
526. suporte sejam inseridos na lista daqueles que contam com suporte salve o perfil em um arquivo separado com um novo nome como Nomedonavegador x x limitado O novo nome do perfil serve para preservar o perfil original somente com os r tulos que contam com suporte 4 Exclua os r tulos ou atributos que n o contam com suporte do navegador Essa etapa desnecess ria quando for criado um perfil para a pr xima vers o do Netscape Navigator ou Microsoft Internet Explorer porque raramente os navegadores deixam de oferecer suporte aos r tulos 5 Adicione as mensagens de erro personalizadas de acordo com a sintaxe mostrada em Sobre a formata o dos perfis de navegadores na p gina 398 Os perfis que acompanham o Dreamweaver cont m uma lista de todos os r tulos que contam com suporte eles podem incluir tamb m as linhas de coment rios com alguns r tulos utilizados comumente por m n o contando com suporte Para adicionar uma mensagem de erro personalizada remova os dois h fens no in cio da linha e adicione msg message ou htmlmsg lt tag gt message lt tag gt depois de Error Por exemplo esta nota o dever aparecer no perfil do Netscape Navigator 3 0 lt ELEMENT HR name Horizontal Rule gt lt ATTLIST HR COLOR Error gt Para adicionar uma mensagem personalizada remova os h fens e adicione a mensagem precedida por msg lt ELEMENT HR name Horizontal Rule gt lt ATTLIST HR COLOR Err
527. t 19 my scaal h me html 2KB Microsoft 28 produets edfhtml 5KB Microsoft 19 9KB Microsoft 19 5KB Microsoft 19 5KB Microsoft 19 7KB Microsoft 19 7KB Microsoft 19 products indk html Imagem K Lhe Origlagestspacer_clear gif 3 ulaz V nculo IDW3 scaal homeht y Mapa Emil par JH lt bodp cube OEDTRSIST 20876589 o NI ONA esresoi ona tal sa Clique no cone de Mapa do site na janela do site O mapa do site ser atualizado refletindo a adi o do v nculo DW3 home htm o e my_ourstorg htm DY3 products html Um sinal de adi o ao lado de um arquivo no mapa do site indica que o arquivo possui v nculos a outros documentos Clique no sinal de adi o para exibir os arquivos associados clique no sinal de subtra o para reduzir a exibi o do mapa do site Agora voc alterar um v nculo utilizando o menu contextual 50 Cap tulo 1 9 Na janela do documento clique com o bot o direito do mouse no Windows ou pressione a tecla Control e clique na imagem This Week Esta imagem est vinculada a um comportamento que permuta a imagem que estiver sendo exibida quando o usu rio passar o ponteiro sobre a mesma Vo alterar o v nculo para que um arquivo seja aberto quando o usu rio clicar na imagem 10 Na caixa de di logo Selecionar o arquivo procure o arquivo DW3 thisweek html e clique em Selecionar no Windows ou
528. t implementado no campo V nculo ser criado um v nculo que exibe uma caixa de alerta de JavaScript com a seguinte mensagem Este recurso n o est implementado Nota Como o c digo JavaScript aparece entre aspas duplas assim como o valor do atributo HREF necess rio utilizar aspas simples no c digo do roteiro ou preceder as aspas duplas por barras invertidas por exemplo VEste recurso n o est implementadoV V nculos e navega o 121 122 Cap tulo 4 Como criar menus de salto Um menu de salto um menu pop up de op es para estabelecer um v nculo a um documento ou arquivo Podem ser criados v nculos a documentos no seu site da Web a documentos em outros sites da Web v nculos de correio eletr nico v nculos a imagens ou a qualquer tipo de arquivo que possa ser aberto em um navegador H tr s componentes b sicos que um menu de salto pode conter e Um aviso de sele o no menu como uma descri o da categoria para os itens do menu ou instru es como Escolha uma op o e Uma lista de itens de menu vinculados um usu rio clica em uma op o e um documento ou arquivo vinculado aberto e Um bot o Ir Quando um item do menu selecionado n o poss vel escolh lo novamente caso voc navegue de volta para essa p gina ou se o campo Abrir a URL em especificar uma moldura H duas maneiras de contornar esse problema e Utilize um aviso de sele o no menu como uma catego
529. t page product page O modelo existente product page foi criado e aplicado s p ginas de produtos do site completo da Scaal Ser criada a sua pr pria vers o deste modelo 3 No campo Salvar como altere o nome do modelo digite my product page e em seguida clique em Salvar Aparecer um novo documento na janela do documento Note o identificador de modelo assim como a extens o de arquivo dwt lt lt Modelo gt gt product page dwt Dreamweaver Tutorial do Dreamweaver 53 54 Cap tulo 1 Modificar o modelo A esta altura o seu novo modelo id ntico p gina a partir da qual foi salvo necess rio que o layout de certas reas da p gina sejam id nticas em todas as p ginas de produtos a fotografia nome descri o e pre o do produto Voc ver como definir estas reas no modelo Cada modelo cont m regi es bloqueadas e edit veis As regi es bloqueadas podem ser editadas apenas no modelo elas aparecem em uma cor real ada em todas as p ginas s quais o modelo for aplicado As regi es edit veis s o alocadores de espa o para o conte do exclusivo de cada p gina que utiliza esse modelo As regi es edit veis est o real adas em um modelo que tenha sido aplicado 1 No modelo my product page dwt na janela do documento selecione e exclua a imagem do CD em seguida digite Insert image here Inserir a imagem aqui na c lula da tabela 2 Selecione o texto digitado 3 Esco
530. ta URL Alinhar determina como o objeto ser alinhado na p gina Consulte Como alinhar os elementos na p gina 203 para obter uma descri o de cada op o Espa o V e Espa o H especificam o n mero de pixels de espa o em branco acima abaixo e em ambos os lados do plug in Bordas especifica a largura da borda ao redor do plug in Par metros abre uma caixa de di logo na qual poder o ser digitados par metros adicionais a serem passados ao plug in do Netscape Navigator Consulte Sobre os par metros na p gina 297 Muitos plug ins respondem a par metros especiais O plug in Flash por exemplo inclui par metros relacionados a BGCOLOR SALIGN e SCALE Como executar os plug ins na janela do documento poss vel visualizar filmes e anima es que dependem dos plug ins do Navigator ou seja elementos que utilizam o r tulo EMBED diretamente na janela do documento N o poss vel visualizar na janela do documento os filmes ou anima es que dependem dos controles ActiveX poss vel executar todos os elementos de plug in simultaneamente a fim de examinar a apar ncia que a p gina ter para o usu rio ou executar cada elemento individualmente para garantir que o elemento de m dia correto tenha sido incorporado Para executar os filmes assegure se de que os plug ins necess rios tenham sido instalados no computador Quando o Dreamweaver for inicializado ele procurar automaticamente todos os plu
531. ta de marcadores Se um documento for criado sem um t tulo de p gina ele aparecer no navegador com o t tulo Documento sem t tulo 1 Coma janela do documento ativa escolha Modificar gt Propriedades da p gina para exibir as op es correspondentes 2 No campo T tulo da caixa de di logo Propriedades da p gina digite Scaal Gourmet Coffee Propriedades da p gina E T tulo EA Imagem do fundo Procurar feios Eundo J RFFFFFF cme Texto E ROGOOOO v nculos visitados V nculos IF V nculos ativos Ty Margem esquerda Largura da margem Margem superior Altura da margem Codifica o do documento Ocidental Latin1 vj Recanegar Imagem de rastreamento Procurar Transpar ncia da imagem j 100 Ajuda Transparente paca Pasta do documento F 4ProjectsARubricALocalizationkT 0402 Diw3 mmeASt Pasta do site F Projects Rubric Localization T0402_Dw3 mme E 3 Clique em OK O t tulo aparecer na barra de t tulo da janela do documento do Dreamweaver Criar um layout de p gina Inicialmente abra a vers o conclu da da home page da Scaal em um navegador para servir de refer ncia durante o trabalho 1 Escolha Arquivo gt Abrir navegue at a pasta Sites Scaal site selecione scaal home html e em seguida clique em Abrir 2 Pressione F12 para visualizar a p gina em um navegador A home page aparecer no navegador Mantenha a janela do na
532. ta de objetos Escolha Inserir gt M dia gt HTML do Fireworks 3 Na caixa de di logo que aparecer clique em Procurar para localizar e selecionar o HTML do Fireworks Selecione a op o Excluir o arquivo ap s a inser o para mover o arquivo HTML para a Lixeira no Windows ou Lixo no Macintosh quando a opera o for conclu da Nota Se o arquivo HTML estiver em uma unidade de rede ele ser exclu do permanentemente mas n o movido para a Lixeira ou Lixo 4 Clique em OK A imagem e seu HTML associado e o JavaScript se houver ser o adicionados ao documento do Dreamweaver nos locais apropriados imagem aparecer na janela do documento para ver o c digo de origem que foi adicionado escolha Janela gt Origem de HTML Como criar os mapas de imagens Um mapa de imagens uma imagem dividida em regi es ou pontos ativos 8 c 5 dl E quando o usu rio clicar no ponto ativo ser exibida uma p gina da Web Utilize o inspetor de imagens para criar e editar graficamente os mapas de imagens do cliente Os mapas de imagens do cliente armazenam as informa es sobre hiperv nculos no documento HTML mas n o em um arquivo de mapa separado como no caso dos mapas de imagens do servidor Quando o usu rio clicar em um ponto ativo na imagem a URL a ela associada ser enviada diretamente ao servidor Isso tornar os mapas de imagens de clientes mais r pidos que os do servidor porque o ser
533. tado por um sinal de n mero na caixa V nculo do inspetor de propriedades poss vel alterar o valor do v nculo se desejar torn lo um v nculo real a outra p gina por m se o sinal de n mero for exclu do e n o for substitu do por outro v nculo o comportamento ser removido Como anexar um comportamento a uma linha de tempo Coloque comportamentos em linhas de tempo para que sejam desencadeados em um determinado quadro da linha de tempo Para obter mais informa es sobre a cria o de linhas de tempo consulte Sobre as linhas de tempo na p gina 253 Para colocar um comportamento em uma linha de tempo 1 Clique duas vezes em um quadro do canal Comportamento no inspetor de linhas de tempo 2 Utilize o inspetor de comportamentos para definir o comportamento Apenas um tipo de evento pode desencadear uma a o em uma linha de tempo a anima o que atinge um determinado quadro um evento onFrame7 por exemplo Al m dos objetos de uma linha de tempo o comportamento pode afetar qualquer objeto na p gina Visualize a linha de tempo em um navegador para examinar o funcionamento do comportamento N o poss vel visualizar os comportamentos no Dreamweaver Como alterar um comportamento Depois de anexar um comportamento voc poder alterar o evento que dispara a a o adicionar ou remover a es e alterar os par metros relativos s a es Para alterar um comportamento 1 Selecione um objeto
534. tamanhos de fonte e tamanho padr o de janelas do navegador que n o podem ser previstos em uma verifica o de navegador de destino Consulte Como visualizar em navegadores na p gina 170 e Fique atento ao tamanho das suas p ginas e ao tempo de descarga Lembre se que as p ginas que consistem de uma tabela grande ser o visualizadas pelos visitantes somente ap s o t rmino da descarga da tabela inteira Leve em considera o a possibilidade de desmembrar tabelas grandes se isto n o for poss vel considere ent o colocar um conte do pequeno como uma mensagem de boas vindas ou uma faixa de propaganda fora da tabela no alto da p gina para que os visitantes possam visualizar esse material enquanto a tabela descarregada Consulte Como verificar o tempo e o tamanho da descarga na p gina 172 Como verificar uma p gina quanto compatibilidade com os navegadores de destino O Dreamweaver permite a constru o de p ginas da Web com elementos que contam com o suporte de todos os navegadores imagens e texto de par grafo por exemplo assim como elementos que contam apenas com o suporte dos navegadores mais modernos estilos e camadas por exemplo O recurso Verificar os navegadores de destino testa o HTML nos documentos a fim de verificar se algum r tulo ou atributo n o conta com o suporte dos navegadores de destino A verifica o n o altera qualquer aspecto do documento O recurso Verificar os navega
535. tamento automaticamente ap s a carga da p gina Consulte Sobre as linhas de tempo na p gina 253 Utilize os filmes Shockwave e Flash applets de Java ou quaisquer outros controles ActiveX ou plug ins da Netscape de uma p gina para adicionar filmes aut nomos esquemas interativos de navega o e outros elementos multim dia p gina Consulte Como inserir m dia na p gina 283 Como criar sites e documentos 105 106 Cap tulo 3 Como exibir e editar o conte do do HEAD Os arquivos HTML s o compostos por duas se es principais a se o HEAD CABE ALHO e a se o BODY CORPO A se o BODY a parte do documento que os visitantes do site podem ver em uma janela do navegador e que voc pode ver na janela do documento no Dreamweaver A se o HEAD est normalmente invis vel aos visitantes e no Dreamweaver exceto o texto que contiver r tulos TITLE que aparece na barra de t tulo do navegador e da janela do documento e utilizado como um identificador dos marcadores do documento D um t tulo a cada p gina que criar A se o HEAD cont m informa es importantes al m do t tulo do documento que incluem o tipo de documento a codifica o de idioma as fun es e vari veis do JavaScript e VBScript e as palavras chave e indicadores de conte do para os mecanismos de busca N o necess rio fornecer todos estes elementos para cada p gina voc poder por exemplo fornecer as palavras chave
536. tar a exibi o a determinados tipos de arquivos Se a maior parte do trabalho envolver um tipo de arquivo espec fico como os arquivos ASP pode se alterar a exibi o padr o Para alterar o tipo de arquivo padr o do Dreamweaver aberto segundo a op o Arquivo gt Abrir 1 Fa a uma c pia de seguran a do arquivo Extensions txt contido na pasta Configuration para o caso de precisar restaurar os padr es posteriormente Abra o arquivo Extensions txt em um editor de texto N o o abra no Dreamweaver Recorte a linha correspondente ao novo padr o e cole a no local da primeira linha do arquivo Salve o arquivo e reinicie o Dreamweaver para ver o novo padr o Para adicionar novos tipos de arquivos ao menu na caixa de di logo Arquivo gt Abrir 1 Fa a uma c pia de seguran a do arquivo Extensions txt contido na pasta Configuration caso precise restaurar os padr es posteriormente Abra o arquivo Extensions txt em um editor de texto N o o abra no Dreamweaver Adicione uma nova linha ao arquivo para cada novo tipo de arquivo Em letras mai sculas digite as extens es de nome de arquivo que o novo tipo de arquivo pode ter separadas por v rgulas em seguida adicione dois pontos e uma frase descritiva curta para ser mostrada no menu Arquivo gt Abrir Por exemplo para os arquivos JPEG digite Arquivos de imagem JPG JPEG JFIF JPEG Salve o arquivo e reinicie o Dreamweaver para ver as altera es Como pers
537. tas s o as nicas propriedades necess rias Consulte Propriedades do Shockwave na p gina 287 para obter mais informa es sobre as outras 8 propriedades Propriedades do Shockwave Para garantir os melhores resultados tanto no Microsoft Internet Explorer como no Netscape Navigator o Dreamweaver insere os filmes Shockwave utilizando os r tulos OBJECT e EMBED OBJECT o r tulo definido pela Microsoft para os controles ActiveX enquanto que EMBED o r tulo definido pela Netscape para os plug ins Para exibir as propriedades no inspetor de propriedades selecione um filme Shockwave O inspetor de propriedades inicialmente exibir as propriedades mais comumente utilizadas Clique na seta de expans o situada no canto inferior direito para examinar todas as propriedades Nome especifica um nome que identificar o filme para a cria o de roteiros Digite um nome no campo sem t tulo extrema esquerda do inspetor de propriedades L e U especificam a largura e altura do filme em pixels Tamb m poss vel especificar as seguintes unidades pc paicas pt pontos pol polegadas mm mil metros cm cent metros ou percentagem do valor do objeto pai As abreviaturas devem se seguir ao valor sem um espa o por exemplo 3mm Arquivo especifica o caminho at o arquivo do filme Shockwave Digite um caminho ou clique no cone correspondente pasta para procurar um arquivo R tulo determina os r tul
538. te A o No Windows No Macintosh exibi o dos arquivos do site F5 F5 Atualizar o painel Local Shift F5 Shift F5 Tornar raiz Control Shift R Command Shift R Vincular a um arquivo existente Control Shift K Command Shift K Alterar o v nculo Control L Command L Remover o v nculo Tecla Delete Tecla Delete Mostrar ocultar o v nculo Control Shift Y Command Shift Y Mostrar os t tulos das p ginas Control Shift T Command Shift T Renomear o arquivo F2 n o dispon vel Aumentar o zoom do mapa do site Control sinal de adi o Command sinal de adi o Reduzir o zoom do mapa do site Control sinal de Command sinal de subtra o subtra o Como executar os plug ins A o No Windows No Macintosh Executar o plug in Control Alt P Command Option P Parar o plug in Control Alt X Command Option X Executar todos os plug ins Control Shift Alt P Command Shift Option P Parar todos os plug ins Control Shift Alt X Command Shift Option X Atalhos de teclado 417 Como exibir os elementos da p gina Para alternar a exibi o de No Windows No Macintosh Elementos invis veis Control Shift I Command Shift R guas Control Shift Alt R Command Shift Option R Grade Control Shift Alt G Command Shift Option G Exibir o conte do do cabe alho Control Shift W Command Shift W Como trabalhar com os modelos A o No Windows No Macintosh Criar uma nova re
539. te na p gina 78 Uma vez criado o site local voc poder preench lo com documentos Os documentos s o as p ginas vistas pelos usu rios quando visitam um site da Web Podem conter texto e imagens bem como um conte do mais sofisticado como som anima o e v nculos a outros documentos Durante a cria o e o trabalho com os documentos o Dreamweaver gera automaticamente o HTML subjacente Utilize o inspetor de origem de HT ML para examinar ou editar o c digo de origem de HTML 73 74 Cap tulo 3 poss vel criar documentos no Dreamweaver a partir de p ginas HTML em branco ou modelos Os documentos HTML criados em outros aplicativos tamb m podem ser abertos e modificados Consulte Como criar e editar os documentos HTML na p gina 84 Utilize a caixa de di logo Propriedades da p gina para configurar um documento e definir os elementos b sicos da p gina O t tulo da p gina identifica o documento para o usu rio As imagens e a cor do fundo as cores do texto e dos v nculos personalizam a p gina e distinguem o texto comum do hipertexto Consulte Como definir as propriedades do documento na p gina 93 Adicione texto aos documentos atrav s de digita o na janela do documento ou da colagem do texto a partir de outras origens Adicione imagens r guas horizontais e outros objetos utilizando a paleta de objetos ou os comandos do menu Inserir Consulte Como adicionar texto e inserir objetos na p
540. te em seguida digite as coordenadas da esquerda e do alto assim como a largura e altura da al a de arraste Esta op o til quando a imagem dentro da camada possuir um elemento que sugere o arraste como uma barra de t tulo ou al a de desenho por exemplo N o selecione esta op o se preferir permitir ao usu rio clicar em qualquer ponto da camada para poder arrast la Como utilizar os comportamentos 315 316 Cap tulo 12 12 Escolha qualquer op o Enquanto arrasta que desejar utilizar e Selecione Trazer a camada para frente se preferir que a camada seja transferida para a frente da ordem de empilhamento enquanto for arrastada Se selecionar esta op o utilize o menu pop up para optar por deixar a camada na frente ou restaur la sua posi o original na ordem de empilhamento e Digite um c digo JavaScript ou um nome de fun o monitorLayer por exemplo no campo Chamar JavaScript a fim de executar repetidamente o c digo ou fun o enquanto a camada for arrastada Por exemplo grave uma fun o que monitore as coordenadas da camada e exiba indica es como voc est pr ximo ou muito distante do destino de soltura em um campo de texto Consulte Como reunir informa es sobre a camada arrast vel na p gina 317 13 Digite um c digo JavaScript ou um nome de fun o evaluateLayerPos por exemplo no segundo campo Chamar o JavaScript a fim de executar o c digo ou fun o quando a
541. te a op o Pr carregar as imagens quando estiver utilizando Permutar a imagem Para poder utilizar a a o Pr carregar as imagens 1 Selecione um objeto e abra o inspetor de comportamentos 2 Clique no bot o com o sinal de adi o e escolha Pr carregar as imagens no menu pop up A es 3 Clique em Procurar para selecionar o arquivo de imagem a ser pr carregado ou digite o caminho e nome do arquivo de imagem no campo Arquivo de origem da imagem 4 Clique no bot o com o sinal de adi o situado no alto da caixa de di logo para adicionar a imagem lista Pr carregar as imagens Nota Se voc n o clicar no bot o com o sinal de adi o antes de digitar a pr xima imagem a imagem escolhida na lista ser substitu da pela pr xima imagem escolhida 5 Para todas as imagens restantes a serem pr carregadas na p gina repita as etapas 3 e 4 6 Para remover uma imagem da lista Pr carregar as imagens selecione a imagem na lista e clique no bot o com o sinal de subtra o 7 Clique em OK 8 Verifique se o evento padr o corresponde ao desejado Se n o corresponder escolha um outro evento no menu pop up Se os eventos desejados n o estiverem listados altere o navegador de destino no menu pop up Eventos de Como utilizar os comportamentos 323 324 Cap tulo 12 Definir a imagem da barra de navega o Utilize a a a o Definir a imagem da barra de navega o para transformar uma i
542. te em uma p gina pelo conte do especificado O conte do pode incluir qualquer HTML v lido Consulte Definir o texto da camada na p gina 326 Como utilizar as camadas 263 264 Cap tulo 9 CAP TULO 10 Como utilizar as molduras As molduras s o compostas de dois elementos principais um conjunto de molduras e as molduras individuais Um conjunto de molduras uma p gina HTML que define a estrutura de um conjunto de molduras em um documento A defini o do conjunto de molduras abrange informa es sobre o n mero de molduras exibidas em uma p gina o tamanho das molduras a origem da p gina carregada em uma moldura e outras propriedades que podem ser definidas Uma p gina HTML com um conjunto de molduras n o exibida em um navegador ela apenas armazena as informa es sobre a maneira como as molduras em uma p gina ser o exibidas As molduras HTML s o regi es definidas espacialmente ou reas em uma p gina HTML Cada moldura em uma p gina ret m um documento HTML individualmente Geralmente as molduras definem uma rea de navega o e uma rea de conte do em uma p gina da Web Quando um documento do Dreamweaver dividido em molduras s o criados documentos HTML separados para o conjunto de molduras e para cada nova moldura O conjunto de molduras chamado de moldura m e e uma moldura chamada de moldura filha Um novo conte do pode ser criado diretamente em uma p gina com moldura as p
543. tempo a ser executada ou parada ou opte por parar todas linhas de tempo no menu pop up 5 Clique em OK 6 Verifique se o evento padr o corresponde ao desejado Se n o corresponder escolha um outro evento no menu pop up Se os eventos desejados n o estiverem listados altere o navegador de destino no menu pop up Eventos de Como utilizar os comportamentos 333 334 Cap tulo 12 Validar o formul rio A a o Validar o formul rio verifica o conte do de determinados campos de texto a fim de garantir que o usu rio tenha digitado o tipo correto de dados Anexe esta a o a certos campos do formul rio com o evento onBlur a fim de validar os campos medida que o usu rio estiver preenchendo o formul rio ou anexe a ao formul rio com o evento onSubmit a fim de avaliar diversos campos simultaneamente quando o usu rio clicar no bot o Enviar A anexa o desta a o a um formul rio evita que este seja enviado ao servidor se algum dos campos contiver dados incorretos Para poder utilizar a a o Validar o formul rio 1 Escolha Inserir gt Formul rio ou clique no bot o Formul rio situado na paleta de objetos para inserir um formul rio Escolha Inserir gt Objeto de formul rio gt Campo de texto ou clique no bot o Campo de texto situado na paleta de objetos para inserir um campo de texto Repita esta etapa para inserir outros campos de texto Siga um dos procedimentos abaixo Para validar determinados
544. tepadi o 58 Tam Nenhum 0 BIZ E 0 V nculo 90 Destino a ls eles g Gaio Lizo0pr yis defaut x Imagem de fundo im m ltiplas E A ums B tuo Dv Cor de fundo 4 a Clique em qualquer ponto do documento para cancelar a sele o das camadas e que em qualquer p para examinar o alinhamento das mesmas Converter as camadas em uma tabela Como voc j disp s a p gina converta as camadas em uma tabela para que a p gina seja exibida com precis o nos navegadores 3 0 e de vers es mais avan adas 1 Escolha Modificar gt Modo de layout gt Converter as camadas em tabela Aparecer a caixa de di logo Converter as camadas em tabela Converter as camadas em tabela x Layout da tabela C G gi Menor que p Pixels de largura Cancelar FP Utilizar GIFs transparentes IV Centralizar na p gina Ferramentas de layout IV Evitar sobreposi es de camadas I Mostrar a paleta de camadas I Mostrar a grade I Encaixar na grade Ajuda 2 Na caixa de di logo Converter as camadas em tabela verifique se abaixo de Layout da tabela as op es O menor Fechar as c lulas vazias e Utilizar GIFs transparentes est o selecionadas 3 Abaixo de Ferramentas de layout verifique se a op o Evitar sobreposi es de camadas est selecionada Tutorial do Dreamweaver 37 38 Cap tulo 1 4 Clique em OK As camadas foram convertidas em uma tabela Nota O Dreamweav
545. tes de coloc lo no servidor remoto Para salvar o arquivo clique em Sim para colocar a vers o salvada anteriormente no servidor remoto clique em N o Se preferir n o salvar o arquivo as altera es feitas ap s o ltimo salvamento n o ser o colocadas no servidor remoto Contudo o arquivo continuar aberto para que seja ainda poss vel salvar o arquivo antes de coloc lo no servidor 7 Para carregar os arquivos dependentes clique em Sim para ignor los clique em N o Se j houver c pias locais dos arquivos dependentes clique em N o Para evitar perguntas sobre os arquivos dependentes em carregamentos posteriores selecione a op o N o me pergunte novamente Nota Para interromper a transfer ncia de arquivos em qualquer momento clique no bot o Parar a tarefa atual o sinal de parar vermelho com um X branco no canto inferior direito da janela do site ou pressione Esc no Windows ou Command ponto no Macintosh poss vel que a transfer ncia n o pare imediatamente Se o arquivo estiver aberto na janela do documento ser poss vel escolher Site gt Colocar na janela do documento O Dreamweaver registra todas as atividades de transfer ncia de arquivos atrav s de FTP Se ocorrer um erro durante a transfer ncia de um arquivo com o FTP o Registro de FTP do site poder auxili lo a determinar o problema Para exibir o registro escolha Janela gt Registro do FTP na janela do site no Windows ou Site gt
546. tes de outra j existente Pressione a tecla Control no Windows ou Command no Macintosh para alterar essa defini o temporariamente enquanto desenha a camada Compatibilidade com o Netscape 4 insere JavaScript no r tulo HEAD de um documento e determina como ser o redimensionamento das camadas CSS da Netscape em um navegador O JavaScript tamb m pode ser adicionado ou removido escolhendo Comandos gt Adicionar remover ajuste de redimensionamento da Netscape Como definir as propriedades das camadas Utilize o inspetor de propriedades para especificar o nome e posi o de uma camada assim como definir outras op es de camadas Para exibir todas as seguintes propriedades clique na seta de expans o localizada no canto inferior direito do inspetor de propriedades Id da camada permite especificar um nome que identificar a camada na paleta de camadas e como refer ncia de roteiros Digite um nome na caixa sem t tulo no lado esquerdo do inspetor de propriedades Utilize apenas caracteres alfanum ricos padr o no nome de uma camada N o utilize caracteres especiais como espa os h fens barras ou pontos E e A especificam a posi o da camada em rela o ao canto superior esquerdo da p gina ou camada m e L e U especificam a largura e altura da camada Esses valores ser o ignorados se o conte do da camada exceder o tamanho especificado Como utilizar as camadas 239 240 Cap tulo 9 Nas camadas CSS os va
547. tes do que eles imaginaram mas pode se utilizar tamb m qualquer imagem que tenha as mesmas dimens es da principal Borda define a largura em pixels da borda do v nculo em volta da imagem Insira O zero para que n o haja uma borda Campo Nome do mapa possibilita a cria o de mapas de imagens do cliente Consulte Como criar os mapas de imagens na p gina 211 Atualizar redefine os valores L e U do tamanho original da imagem Editar inicia o editor de imagens especificado nas prefer ncias de editores externos e abre a imagem selecionada Quando voc salvar a imagem e retornar ao Dreamweaver este programa atualizar a janela do documento com a imagem editada Consulte Como utilizar um editor de imagens externo na p gina 205 Como alinhar os elementos As seguintes op es de alinhamento aparecem no menu suspenso de mesmo nome no inspetor de propriedades e podem ser associadas a determinados elementos como imagens e plug ins Os bot es de alinhamento esquerda direita e No centro tamb m podem ser utilizados para colocar os elementos selecionados Padr o do navegador geralmente especifica um alinhamento na linha de base O padr o pode ser diferente dependendo do navegador Linha de base e Embaixo alinham a base do objeto selecionado com a parte de baixo do texto Embaixo absoluto alinha a parte de baixo absoluta do texto incluindo as hastes descendentes como na letra g com a base do objeto
548. tilos externa siga um dos procedimento abaixo e Clique em Procurar no Windows ou Escolher no Macintosh para procurar uma folha de estilos CSS externa ou digite o caminho da folha de estilos na caixa Arquivo URL e Crie uma nova folha de estilos CSS externa digitando um nome de arquivo que ainda n o exista no local especificado As folhas de estilos devem conter a extens o css 5 Selecione a op o Vincular ou Importar para especificar e criar o r tulo utilizado para anexar a folha de estilos CSS externa ao documento e em seguida clique em OK A op o Importar insere no documento as informa es contidas no arquivo da folha de estilos CSS externa enquanto Vincular acessa e reserva as informa es sem transferi las Embora ambas as op es passem todos os estilos da folha de estilos CSS externa para o documento Vincular oferece mais recursos e funciona com mais navegadores O nome da folha de estilos CSS externa aparece com o identificador vincular ou importar na lista de estilos na caixa de di logo Editar a folha de estilos Conclua as etapas abaixo para criar ou editar os estilos definidos na folha de estilos CSS externa Na caixa de di logo Editar a folha de estilos selecione o nome da folha de estilos externa e clique em Editar Aparecer a caixa de di logo Editar a folha de estilos para essa folha de estilos Clique em Novo para definir os estilos na folha de estilos CSS externa Na caixa de di l
549. tivos raiz campo Diret rio do host 142 campo Endere o HTTP 78 campo Imagem cambi vel 208 campo Imagem original 208 campo Nome do host de FTP 141 campo Nome do site 77 campo Pasta raiz local 77 campos de texto como definir o texto com comportamentos 328 canal de comportamentos nas linhas de tempo 253 caracteres especiais como inserir 88 vis o geral 87 caracteres especiais 87 c lula do cabe alho como formatar 225 c lulas Consulte c lulas da tabela c lulas da tabela c lulas do cabe alho como designar 225 como copiar e colar 226 como dividir 231 como formatar 224 como mesclar 231 Consulte tamb m tabelas cor do fundo como adicionar 224 imagem de fundo como adicionar 224 Centro de suporte do Dreamweaver 13 CFML r tulos como personalizar a an lise e a apar ncia 402 CFML Consulte ColdFusion Markup Language codifica es 71 c digo de origem 338 ndice remissivo 427 c digo de origem de HTML buscas de r tulos 159 como buscar 157 158 como editar com o BBEdit 355 como editar na janela do documento 340 como exibir com o inspetor de origem de HTML 71 como formatar nos documentos existentes 351 como limpar 350 como limpar o HTML do MS Word 352 como selecionar na janela do documento 89 convers o de atributos CSS 197 do Fireworks 209 editores externos 354 estilos de r tulos 188 material de refer ncia 19 menus pop up de sugest es 345 perfil de formata o 396 prefer ncias de cores de r tulos 349 pre
550. to na p gina 405 Como criar os modelos Um modelo pode ser criado a partir de um documento HTML j existente e em seguida ser modificado para que atenda s suas exig ncias ou ser criado a partir do zero com base em um documento HTML em branco Os modelos s o armazenados automaticamente na pasta Modelos contida na pasta raiz local do site Se esta pasta ainda n o existir o Dreamweaver a criar quando voc salvar um novo modelo Para salvar um documento j existente como um modelo 1 Escolha Arquivo gt Abrir e selecione um documento 2 Escolha Arquivo gt Salvar como modelo 3 Na caixa de di logo que aparecer selecione um site e digite um nome para o modelo na caixa Salvar como 4 Clique em Salvar Para criar um novo modelo em branco 1 Escolha Janela gt Modelos 2 Na paleta de modelos siga um dos procedimentos abaixo e Clique no bot o do menu contextual e em seguida selecione Novo modelo e Clique no cone de Novo modelo na rea inferior direita da paleta de modelos e Na lista da paleta de modelos clique com o bot o direito do mouse no Windows ou clique mantendo a tecla Control pressionada no Macintosh e no menu contextual selecione Novo modelo Um novo modelo em branco ser adicionado lista de modelos na paleta 3 Enquanto o modelo estiver selecionado digite um nome para ele Para editar um modelo 1 Escolha Janela gt Modelos 2 Na paleta de modelos clique duas vezes no
551. to e o lt i gt c o lt i gt preto A escolha de Origem de HTML permite buscar determinadas segi ncias de texto no c digo de origem de HTML Consulte Sobre as buscas de origem de HTML na p gina 158 A escolha de Texto Avan ado permite buscar determinadas segi ncias de texto dentro ou fora de um ou mais r tulos Por exemplo em um documento que cont m o seguinte HTML a procura de tenta fora do r tulo i acarretaria a localiza o apenas da segunda inst ncia da palavra tenta Jo o lt i gt tenta lt i gt entregar o trabalho dentro do prazo mas nem sempre consegue Ele sempre tenta cumprir os prazos Consulte Como buscar texto entre r tulos espec ficos na p gina 160 Gerenciamento de sites 157 158 Cap tulo 5 e A escolha de R tulo permite procurar determinados r tulos atributos e valores de atributo como todos os r tulos TD com a defini o de VALIGN para TOP Consulte Como buscar os r tulos e atributos HTML na p gina 159 Nota A ativa o de Control Enter ou Shift Enter no Windows ou Control Return Shift Return ou Command Return no Macintosh adiciona quebras de linha nos campos de busca permitindo a procura de um caractere de retorno Verifique se a op o Ignorar os diferentes espa os em branco est desmarcada ao fazer essa busca quando n o forem utilizadas as express es regulares Observe que esse procedimento localiza um determinado caractere mas n o a no o geral de queb
552. tribute para obter um efeito semelhante supportedAttribute1 supported Attribute validValue validValue2 validValue3 unsupportedAttribute Error htmlmsg lt b gt Nunca utilize esse unsupportedAttribute do htmiTag lt b gt gt onde htmiTag o r tulo na forma em que aparece em um documento HTML tagName como o r tulo chamado por exemplo o r tulo HR chamado de r gua horizontal O atributo NAME opcional Se for especificado tagName ser utilizado na mensagem de erro caso n o seja fornecido um nome ser utilizado htmiTag unsupportedAttribute um atributo que n o conta com suporte Considera se que os r tulos e atributos que n o foram especificamente mencionados n o contam com suporte Especifique os r tulos ou atributos sem suporte apenas quando desejar criar uma mensagem de erro personalizada supportedAttribute um atributo ao qual o htmiTag oferece suporte Considera se que apenas os r tulos presentes na lista sem uma designa o Error contam com suporte do navegador validValue um valor que conta com suporte do atributo O exemplo abaixo mostra uma entrada para o r tulo APPLET que seria preciso para o Navigator 3 0 lt ELEMENT APPLET Name Java Applet gt lt ATTLIST APPLET Align top middle bottom left right absmiddle absbottom baseline texttop Alt Archive Class Warning htmImsg Este navegador ignora o atributo lt CODE gt CLASS lt CO
553. u clique na moldura no inspetor de molduras Defina as seguintes op es no inspetor de propriedades Bordas controlam a borda das molduras As op es s o Sim N o e Padr o A defini o padr o da maioria dos navegadores Sim Para desativar uma borda todas as molduras a ela adjacentes dever o estar definidas como N o ou Padr o com o conjunto pai de molduras definido como N o Cor da borda define a cor de todas as bordas adjacentes moldura Para definir as bordas do conjunto de molduras 1 Selecione o conjunto de molduras clicando na borda de uma moldura na janela do documento ou na borda que circunda as molduras no inspetor de molduras Defina as seguintes op es no inspetor de propriedades Bordas controlam a borda das molduras no conjunto de molduras Escolha Sim para exibir as bordas em cores e tr s dimens es N o para exibir as bordas em cinza e lisas ou Padr o para que o navegador determine como ser o exibidas as bordas A defini o padr o da maioria dos navegadores Sim Cor da borda define a cor de todas as bordas no conjunto de molduras Essa defini o pode ser ignorada para uma nica moldura especificando uma cor de borda para essa moldura Largura da borda especifica a largura das bordas no conjunto de molduras Digite 0 para especificar sem borda Como alterar a cor do fundo de uma moldura poss vel alterar a cor do fundo de uma moldura definindo a cor do fundo do d
554. u desativar a quebra autom tica de linha selecionando ou desmarcando a op o Quebra autom de linha Observe que a ativa o de quebras autom ticas de linha n o as insere no c digo HTML apenas exibe as linhas como se estivessem quebradas para facilitar a visualiza o Voc tamb m pode optar por exibir ou n o os n meros das linhas selecionando ou desmarcando a op o N meros de linhas Como editaro HTML 339 340 Cap tulo 13 Para iniciar um editor de HTML externo clique no bot o Editor externo Caso ainda n o tenha sido escolhido um editor de HTML externo necess rio escolher primeiro Editar gt Prefer ncias e em seguida selecionar a categoria Editores externos e escolher um deles Para obter mais informa es consulte Como utilizar os editores de HTML externos na p gina 354 Para alternar entre a janela do documento e o inspetor de origem de HTML Pressione as teclas Control e Tab no Windows e no Macintosh Como editar um r tulo HTML na janela do documento Utilize o Quick Tag Editor para verificar e editar rapidamente a origem de HTML de um nico r tulo na janela do documento sem ter de alternar para o inspetor de origem de HTML e voltar A maneira mais f cil de abrir o Quick Tag Editor pressionando as teclas Control e T no Windows ou Command e T no Macintosh O Quick Tag Editor apresenta os tr s modos seguintes e Inserir o HTML utilizado para incluir o novo c digo HTML e Editar o
555. ue no bot o Camada na paleta de objetos em seguida dentro de uma camada existente arraste o cursor para desenhar a camada aninhada Se o Aninhamento estiver desativado nas prefer ncias de camadas pressione a tecla Control no Windows ou Command no Macintosh para desenhar uma camada dentro de outra j existente Para criar uma camada aninhada utilizando a paleta de camadas 1 Escolha Janela gt Camadas ou pressione F11 para abrir a paleta de camadas 2 Pressione a tecla Control no Windows ou Command no Macintosh selecione uma camada na paleta de camadas e arraste a at a camada de destino 3 Solte o bot o do mouse quando aparecer uma caixa ao redor do nome da camada de destino Como definir as prefer ncias de camadas Utilize as prefer ncias de camadas para ajustar as defini es padr o das novas camadas criadas Escolha Editar gt Prefer ncias e em seguida clique em Camadas para alterar as prefer ncias de camadas R tulo determina o r tulo padr o utilizado na defini o da camada SPAN e DIV criam camadas CSS enquanto que LAYER e ILAYER criam camadas da Netscape Visibilidade determina se as camadas ser o vis veis como padr o Largura e Altura definem a largura e altura padr o das camadas criadas pelo comando Inserir gt Camada Cor do fundo especifica a cor do fundo padr o Imagem do fundo especifica uma imagem de fundo padr o Aninhamento torna aninhada uma camada desenhada dentro dos limi
556. uivo de conte do para o plug in do Navigator Propriedades dos plug ins do Netscape Navigator Ap s ter inserido o conte do de um plug in do Netscape Navigator utilize o inspetor de propriedades para definir os par metros do conte do Para exibir as seguintes propriedades no inspetor de propriedades selecione um objeto plug in do Netscape Navigator O inspetor de propriedades inicialmente exibir as propriedades mais comumente utilizadas Clique na seta de expans o situada no canto inferior direito para examinar todas as propriedades Plug in especifica um nome que identificar o plug in para a cria o de roteiros Digite um nome no campo sem t tulo extrema esquerda do inspetor de propriedades L e U especificam a largura e altura em pixels alocadas ao objeto na p gina Tamb m poss vel especificar as seguintes unidades pc paicas pt pontos pol polegadas mm mil metros cm cent metros ou percentagem do valor do objeto pai As abreviaturas devem se seguir ao valor sem um espa o por exemplo 3mm Orig especifica o arquivo de origem dos dados Digite um nome de arquivo ou clique no cone correspondente pasta para procurar um arquivo URL do Plg especifica a URL do atributo PLUGINSPAGE Digite a URL completa do site onde os usu rios poder o descarregar o plug in Se o usu rio que estiver visualizando a p gina n o contar com o plug in o navegador tentar descarreg lo a partir des
557. ulos HTML essa formata o poder ser reaplicada em qualquer texto de documentos que utilizem a paleta de estilos HTML Diferentemente dos estilos CSS a formata o do estilo HTML afetar apenas o texto ao qual for aplicada ou o texto criado com um estilo HTML selecionado Se for alterada a formata o de um estilo HTML criado por voc o texto originalmente formatado com esse estilo n o ser atualizado Se desejar ter a op o de alterar a formata o e atualizar automaticamente todas as suas ocorr ncias utilize uma folha de estilos CSS consulte Como formatar o texto com as folhas de estilos CSS na p gina 188 A paleta de estilos HTML pode ser utilizada para registrar os estilos HTML utilizados no site e em seguida compartilh los com outros usu rios sites locais ou remotos Para exibir a paleta de estilos HTML siga um dos procedimentos abaixo e Escolha Janela gt Estilos HTML e Clique no bot o Estilos HTML no Iniciador e Clique no cone de Estilos HTML um s mbolo de par grafo amarelo no Mini iniciador na parte inferior da janela do documento Para exibir um estilo HTML existente 1 Na paleta de estilos HT ML selecione um estilo Observe que Limpar o estilo do par grafo e Limpar o estilo da sele o s o utilizados em um texto que cont m um estilo aplicado mas eles n o constituem estilos por esse motivo n o podem ser exibidos ou editados 2 Clique com o bot o direito do mouse no Wind
558. ulos e as rela es entre os mesmos semelhante a uma generaliza o da HTML que permite que voc crie os seus pr prios r tulos Os r tulos de XML se assemelham aos de HTML eles consistem de um nome de r tulo mais os atributos opcionais envolvidos por sinais de maior e menor Como em HTML s o utilizados um r tulo de abertura e outro de fechamento nos quais o nome do r tulo precedido por uma barra inclinada para marcar o conte do entre os r tulos Uma diferen a entre as sintaxes que em XML um r tulo vazio sem conte do como lt img gt dever terminar com uma barra inclinada logo antes do sinal de maior Por exemplo a apar ncia de um r tulo lt img gt em XML poder ser lt img src test png gt Para obter mais informa es sobre XML consulte Recursos de tecnologias de Web e HTML na p gina 19 Modelos e bibliotecas 371 372 Cap tulo 14 Como utilizar as nota es de r tulos XML O Dreamweaver permite exportar conte dos XML utilizando uma das duas nota es de r tulos r tulos de nomes das regi es edit veis ou r tulos XML padr o do Dreamweaver A nota o utilizada depender da maneira como o conte do XML ser incorporado ao site da Web O seguinte c digo XML foi exportado de um documento que se baseou em um modelo denominado newstemplate O documento cont m uma regi o edit vel chamada Edit Region e Os r tulos dos nomes das regi es edit veis utilizam os nomes das
559. ulte Como sincronizar os arquivos nos sites local e remoto na p gina 154 Nota N o utilize caracteres especiais como ou ou pontua o como dois pontos barras inclinadas ou pontos nos nomes dos arquivos que ser o colocados em um servidor remoto Muitos servidores converter o esses caracteres durante a carga provocando a ruptura dos v nculos entre os arquivos Para colocar arquivos em um servidor remoto 1 Escolha Janela gt Arquivos do site para abrir a janela do site 2 No alto da janela do site escolha o site desejado no menu pop up com a lista de sites atuais 3 Se for utilizado o FTP para a transfer ncia dos arquivos clique em Conectar para abrir uma conex o com o servidor remoto que lhe permitir ver o que h no site remoto antes de transferir os arquivos Contudo n o necess rio clicar em Conectar quando voc clicar em Colocar o Dreamweaver estabelecer automaticamente a conex o 4 Selecione os arquivos a serem carregados Normalmente eles s o escolhidos no painel local mas em vez disso selecione os arquivos correspondentes no painel Remoto se preferir 5 Clique em Colocar ou escolha Colocar no menu contextual ou no menu Site Gerenciamento desites 153 154 Cap tulo 5 6 Seo arquivo n o tiver sido salvo poder aparecer uma caixa de di logo dependendo da defini o da prefer ncia no painel de FTP do site da caixa de di logo Prefer ncias que permite salvar o arquivo an
560. um gerenciador de arquivos permitindo copiar colar excluir mover e abrir arquivos da mesma forma que no localizador de arquivos ou no explorador em seu computador Site scaal MEE Arquivo Edtar Exbi Ste Janela Auda 3E dg eca E eio Atara e eca amp FAProjects Rubric Localzatio Pasta 07712 991353 Images Pasta 20 11 99 15 13 Library Pasta 20 11 99 15 13 Templates Pasta 07 12 99 13 18 DW3 copytst 1KB Text Docu 19 11 99 16 51 DW3 ourstory word html 4KB Microsoft 19 11 99 16 51 DW3_products_cd html 5KB Microsoft 19 11 99 16 51 DW3 products index html 9KB Microsoft 19 11 99 16 51 y 5 mug html 5KB Microsoft 19 11 99 16 51 DW3_scaal_home htmi 7KB Microsoft 29 11 99 12 14 DW3 thisweek html 7KB Microsoft 19 11 99 16 51 gifts html 1KB Microsoft 28 11 99 14 02 home html 1KB Microsoft 29 11 99 14 02 index html 1KB Microsoft 28 11 9913 33 inspiration html 1KB Microsoft 28 11 99 14 02 my ourstor html 7KB Microsoft 19 11 99 16 51 my_scaal_home htmi 2KB Microsoft 29 11 99 11 30 products cd htm SKB Microsoft 19 11 99 16 51 products index html 9KB Microsoft 19 11 99 16 51 products_mints html 5KB Microsoft 19 11 99 16 51 products mug html SKB Microsoft 19 11 99 16 51 scaal home html 7KB Microsoft 19 11 99 16 51 thisweek html 7KB Microsoft 19 11 99 16 51 D T tulo Untitled Document Data 28 11 99 14 02 Tamanho 1KB 8 Deixe a janela do site aberta 9 Clique na janela d
561. uma camada para que esta se sobreponha a outra camada Consulte Como evitar as sobreposi es de camadas na p gina 251 Para redimensionar uma camada siga um dos procedimentos abaixo Para redimensionar arrastando o cursor selecione a camada e arraste qualquer uma das al as de redimensionamento Para redimensionar um pixel por vez selecione a camada e pressione a tecla Control e uma das teclas de seta no Windows ou a tecla Option e uma das teclas de seta no Macintosh Para redimensionar de acordo com o incremento de encaixe na grade pressione as teclas Shift Control e uma das teclas de seta no Windows ou Option e uma das teclas de seta no Macintosh Para obter informa es sobre a defini o de incrementos de encaixe na grade consulte Como encaixar as camadas na grade na p gina 247 No inspetor de propriedades digite os valores da largura e altura O redimensionamento de uma camada altera a sua largura e altura Este n o define a extens o do conte do da camada que estar vis vel Para definir a regi o vis vel de uma camada consulte Como definir as propriedades das camadas na p gina 239 Para redimensionar camadas m ltiplas 1 2 Na janela do documento selecione duas ou mais camadas Siga um dos procedimentos abaixo Escolha Modificar gt Camadas e pontos ativos gt Tornar as larguras iguais ou Modificar gt Camadas e pontos ativos gt Tornar as alturas iguais As primeira
562. up Localizar ou selecione qualquer r tulo Se desejar apenas buscar todas as ocorr ncias do r tulo especificado pressione o bot o com o sinal de subtra o e passe etapa 6 Caso contr rio prossiga na etapa 4 4 Limite a busca utilizando um dos seguintes modificadores de r tulos e Escolha Com atributo para selecionar um atributo que deva estar no r tulo para que este coincida com o crit rio de busca poss vel especificar um determinado valor deste atributo ou escolher qualquer valor e Escolha Sem atributo para selecionar um atributo que n o deva estar no r tulo para que haja coincid ncia Por exemplo escolha esta op o para buscar todos os r tulos IMGsem o atributo ALT e Escolha Contendo para especificar um texto ou r tulo que deve estar contido no r tulo original para que haja coincid ncia Por exemplo no c digo lt B gt lt FONT FACE Arial gt Cabe alho 1 lt FONT gt lt B gt o r tulo FONT est contido no r tulo B e Escolha N o contendo para especificar um texto ou r tulo que n o deve estar contido no r tulo original para que este atenda ao crit rio de busca e Escolha Dentro do r tulo para especificar um r tulo dentro do qual deve estar o r tulo de destino para que haja coincid ncia e Escolha Fora do r tulo para especificar um r tulo dentro do qual n o deve estar o r tulo de destino para que haja coincid ncia 5 Clique no bot o com o sinal de adi o e
563. uto o menu de sugest es ser rolado real ando o primeiro nome de atributo iniciado com as letras inseridas Para mover o realce para cima ou para baixo no menu utilize as teclas de seta para cima e para baixo ou a barra de rolagem Para escolher o nome de atributo real ado pressione a tecla Enter no Windows ou Return no Macintosh o nome real ado ser inserido no Quick Tag Editor Uma alternativa clicar duas vezes em um nome de atributo no menu para inseri lo Para fechar a lista de sugest es sem escolher qualquer entrada pressione Esc ou continue a digita o Quando ocorrer uma pausa durante a digita o ou edi o de um nome de r tulo aparecer um menu suspenso de sugest es semelhante com uma lista de nomes de r tulos em vez de nomes de atributos No modo Editar o r tulo se voc fizer uma altera o e depois pressionar a tecla Tab ou as teclas Shift e Tab a altera o ser aplicada imediatamente Para evitar que as altera es sejam feitas antes do Quick Tag Editor ser fechado cancele a sele o da op o Aplicar as modifica es durante a edi o no painel do Quick Tag Editor da caixa de di logo Prefer ncias Nota Quando a op o Aplicar as modifica es durante a edi o estiver cancelada v rias altera es aplicadas simultaneamente aparecer o como uma nica etapa na paleta de hist rico e ser o desfeitas pressionando uma vez Desfazer Para adicionar um novo atributo a um r tu
564. vega o 131 132 Cap tulo 4 Para remover um v nculo siga um dos procedimentos abaixo e Selecione a p gina no mapa do site e escolha Site gt Remover o v nculo no Windows ou Site gt Exibi o do mapa do site gt Remover o v nculo no Macintosh e Selecione a p gina no mapa do site e escolha Remover o v nculo no menu contextual Para abrir a origem de um v nculo 1 Selecione um arquivo no mapa do site 2 Escolha Site gt Abrir a origem do v nculo no Windows ou Site gt Exibi o do mapa do site gt Abrir a origem do v nculo no Macintosh O inspetor de propriedades e o arquivo de origem que cont m o v nculo ser o abertos O v nculo ser real ado Como mostrar e ocultar os arquivos do mapa do site poss vel modificar o layout do mapa do site para mostrar ou n o os arquivos ocultos e dependentes Esse procedimento til quando se deseja enfatizar t picos ou conte dos importantes e retirar a nfase de materiais menos relevantes Antes de ocultar ou mostrar um arquivo HTML necess rio marc lo como oculto Quando um arquivo marcado como oculto n o for mostrado seus v nculos tamb m se tornar o ocultos Quando um arquivo marcado como oculto for exibido o cone e seus v nculos estar o vis veis na exibi o do mapa do site por m os nomes aparecer o em it lico Para marcar os arquivos como ocultos 1 No mapa do site selecione um ou mais arquivos 2 Escolha Exibir gt Mo
565. vegador aberta no fundo para consult la se for necess rio 3 Clique na janela do documento de scaal home html e em seguida escolha Arquivo gt Fechar para fechar o documento Adicionar camadas As camadas s o ideais para criar layouts complexos de p ginas pois os elementos da p gina que foram colocados nas camadas podem ser facilmente reposicionados bastando serem arrastados A estrutura da home page criada atrav s da utiliza o de camadas e em seguida da convers o do layout em layout de tabela para que a p gina seja exibida com precis o nos navegadores tanto da vers o 3 0 quanto da vers o 4 0 N o poss vel converter as camadas em tabelas se o documento a ser convertido contiver camadas aninhadas ou sobrepostas 1 Escolha Janela gt Camadas para abrir a paleta de camadas 2 Certifique se de que a caixa Evitar sobreposi es esteja selecionada 3 Clique na janela do documento my scaal home a fim de torn lo ativo 4 Escolha Inserir gt Camada Ser adicionada uma camada ao documento Tutorial do Dreamweaver 29 5 No painel Comuns da paleta de objetos clique no bot o Desenhar a camada Ts E Es a K e ia 6 Mova o ponteiro para a janela do documento o ponteiro se transformar em uma ferramenta de desenho No espa o abaixo da primeira camada arraste o ponteiro para desenhar uma nova camada 7 Repita as a es nas etapas 5 e 6 para desenhar uma outar camada A sua p gina
566. ver Para poder utilizar a a o Arrastar a camada 1 Escolha Inserir gt Camada ou clique no bot o Camada situado na paleta de objetos e desenhe uma camada na janela do documento 2 Desmarque a camada clicando em outro local da janela do documento 3 Abra o inspetor de comportamentos 4 Clique no bot o com o sinal de adi o e escolha Arrastar a camada no menu pop up A es Se a op o Arrastar a camada n o estiver dispon vel prov vel que j haja uma camada selecionada Como as camadas n o aceitam eventos em ambos os navegadores da vers o 4 0 selecione um outro objeto como o r tulo BODY ou um v nculo r tulo A ou no menu pop up Eventos de altere o navegador de destino para IE 4 0 No menu pop up Camada selecione a camada que deseja tornar arrast vel No menu pop up Movimento escolha Restrito ou N o restrito O movimento n o restrito adequado aos quebra cabe as e outros jogos que envolvem o arraste e soltura de elementos No caso dos controles deslizantes e cen rios m veis como gavetas de arquivos cortinas e mini persianas opte pelo movimento restrito Digite os valores do movimento restrito expressos em pixels nos campos Acima Abaixo esquerda e direita Os valores se relacionam posi o inicial da camada Para restringir o movimento a uma regi o retangular digite valores positivos nos quatro campos Para permitir apenas o movimento vertical digite valores positiv
567. ver clique em um r tulo do seletor de r tulos situado na parte inferior esquerda da janela do documento O seletor sempre mostra os r tulos que circundam a sele o atual ou a posi o do ponto de inser o hi 4 ET EP lt body gt lt table gt lt tr gt lt td gt lt p gt lt font gt lt font gt lt img gt 598 x 450 28K 8 seg s o LI J O F DlA e Seletor de r tulos Por exemplo se tiver sido definido um v nculo para uma imagem o c digo HTML no inspetor de origem HTML ter a seguinte apar ncia lt a href http Avww macromedia com gt lt img src agraphic gif gt lt a gt A a o de clicar na imagem que estiver dentro da janela do documento selecionar o r tulo lt img gt no seletor de r tulos que corresponde sele o de lt img src agraphic gif gt no inspetor de origem de HTML Para selecionar o v nculo clique na imagem que estiver dentro da janela do documento e em seguida clique em lt a gt que aparece no seletor de r tulos esquerda de lt img gt Para ver o c digo HTML associado ao texto ou objeto selecionado escolha Janela gt Origem de HT ML para abrir o inspetor de origem de HTML As sele es feitas no inspetor de origem de HTML se refletir o na janela do documento Como criar sites e documentos 89 90 Cap tulo 3 Sobre os elementos invis veis Escolha Exibir gt Elementos invis veis para mostrar ou ocultar os marcadores na janela do documento que rep
568. ver os seus pr prios objetos comportamentos comandos e inspetores de propriedades Muitos destes usu rios optaram por compartilhar os resultados de seus esfor os de programa o com outros usu rios ao enviar os seus arquivos ao site do Dreamweaver na Web Para descarregar estes arquivos de extens o abra o inspetor de comportamentos e no menu pop up A es escolha Obter mais comportamentos Para instalar um comportamento descarregado de outros fabricantes na sua c pia do Dreamweaver 1 Extraia os arquivos de comportamento do arquivo descarregado com uma ferramenta de descompacta o de arquivos Por exemplo o WinZip no Windows ou o Ziplt no Macintosh podem abrir os arquivos zip que se encontram dispon veis no Centro de recursos on line 2 Arraste os arquivos extra dos at a pasta Configuration Behaviors Actions localizada na pasta do aplicativo do Dreamweaver 3 Reinicie o Dreamweaver Como utilizar as a es de comportamentos enviadas com o Dreamweaver As a es de comportamentos enviadas com o Dreamweaver foram criadas para que funcionem com todos os navegadores da vers o 4 0 e no Internet Explorer 5 o Netscape Navigator 5 ainda n o havia sido lan ado quando este manual foi escrito Algumas a es no entanto n o funcionam nos navegadores mais antigos Consulte a tabela a seguir para obter mais detalhes sobre o modo de funcionamento das a es em determinados navegadores anteriores vers o 4 0
569. vidor n o precisar interpretar onde o usu rio clicou Os mapas de imagens de clientes contam com suporte do Netscape Navigator 2 0 e mais avan ado NCSA Mosaic 2 1 e 3 0 e de todas as vers es do Microsoft Internet Explorer O Dreamweaver n o altera as refer ncias dos mapas de imagens do servidor nos documentos existentes Em um mesmo documento poss vel utilizar mapas de imagens de cliente e de servidor Os navegadores que oferecem suporte a ambos os tipos de mapas d o prioridade aos do cliente Para incluir um mapa de imagens do servidor em um documento necess rio gravar o c digo HTML adequado Para criar um mapa de imagens do cliente 1 Selecione a imagem 2 Clique na seta de expans o no canto inferior direito do inspetor de propriedades para maximiz lo 3 Digite o nome do mapa no campo Nome do mapa Nota Caso sejam utilizados v rios mapas de imagens no mesmo documento d um nome exclusivo a cada mapa 4 Para definir as reas do mapa de imagens siga um dos procedimentos abaixo e Selecione a ferramenta de c rculo e arraste o ponteiro sobre a imagem para criar um ponto ativo circular e Selecione a ferramenta de ret ngulo e arraste o ponteiro sobre a imagem para criar um ponto ativo circular e Selecione a ferramenta de pol gono e defina um ponto ativo com forma irregular clicando uma vez em cada canto Clique na ferramenta de seta para fechar o formato Quando o ponto ativo for selecionado o ins
570. vidor remoto 1 Escolha Janela gt Arquivos do site para abrir a janela do site 2 No alto da janela do site escolha o site desejado no menu pop up Sites atuais 3 Caso seja utilizado o FTP para transferir arquivos clique em Conectar a fim de abrir uma conex o com o servidor remoto Se j houver uma conex o aberta o bot o indicar Desconectar em vez de Conectar ignore essa etapa Caso os arquivos remotos j estejam vis veis no painel remoto devido a uma conex o anterior n o ser preciso clicar em Conectar quando se clica em Obter o Dreamweaver estabelece automaticamente a conex o 4 Selecione os arquivos a serem descarregados Normalmente eles s o escolhidos no painel remoto mas em vez disso selecione os arquivos correspondentes no painel Local se preferir 5 Clique em Obter ou escolha Obter no menu contextual ou no menu Site Se o arquivo estiver aberto na janela do documento poss vel escolher Site gt Obter nessa janela 6 Para descarregar os arquivos dependentes clique em Sim para ignor los clique em N o Se j houver c pias locais dos arquivos dependentes clique em N o Para evitar perguntas sobre os arquivos dependentes em descargas posteriores selecione a op o N o me pergunte novamente Nota Para interromper a transfer ncia de arquivos em qualquer momento clique no bot o Parar a tarefa atual o sinal de parar vermelho com um X branco no canto inferior direito da janela do site
571. vidor remoto Observe que para o FTP essa defini o aplica se apenas ao modo de transfer ncia bin ria o modo de transfer ncia ASCII do Dreamweaver ignora esse par metro Quando os arquivos s o descarregados no modo ASCII o Dreamweaver define as quebras de linha com base no sistema operacional do computador se os arquivos forem carregados no modo ASCII todas as quebras de linha ser o definidas para CR LF Essa defini o tamb m til quando se est trabalhando com um editor de texto externo que reconhece apenas determinados tipos de quebras de linha Por exemplo utilize CR LF no Windows se o Bloco de Notas for o seu editor externo e no Macintosh utilize CR no caso do Simple Text Caixa do r tulo e Caixa do atributo controlam a caixa alta ou baixa dos nomes de r tulos e atributos Estas op es s o aplicadas a r tulos e atributos inseridos ou editados na janela do documento mas n o aos inseridos diretamente no inspetor de origem de HTML ou queles inseridos em um documento quando este for aberto a menos que uma ou ambas as op es em Ignorar a caixa de estejam selecionadas Ignorar a caixa de R tulos e Atributos especificam se as op es de caixa definidas ser o implementadas sempre inclusive quando for aberto um documento HTML j existente Quando uma destas op es for selecionada todos os r tulos e atributos nos documentos abertos ser o imediatamente convertidos para a caixa especificada bem como todos o
572. vo da lista 1 Selecione o tipo de arquivo na lista de extens es Nota N o poss vel desfazer a a o depois de remover um tipo de arquivo da lista portanto certifique se de n o precisar dele antes de remov lo 2 Clique no bot o de subtra o situado acima da lista de extens es Para dissociar um editor de um tipo de arquivo 1 Selecione o tipo de arquivo na lista de extens es 2 Selecione o editor na lista de editores 3 Clique no bot o de subtra o situado acima da lista de editores Para tornar um editor o editor prim rio de um tipo de arquivo 1 Selecione o tipo de arquivo 2 Selecione o editor ou adicione o se j n o estiver na lista 3 Clique no bot o Tornar prim rio Como utilizar as Design Notes com objetos de m dia Do mesmo modo que faria com outros objetos no Dreamweaver voc poder adicionar as Design Notes a um objeto de m dia Para adicionar as Design Notes a um objeto de m dia 1 Clique com o bot o direito do mouse no objeto no Windows ou pressione a tecla Control e clique no objeto no Macintosh na janela do documento 2 No menu contextual escolha Design Notes 3 Digite as Design Notes Para obter mais detalhes consulte Sobre as Design Notes na p gina 172 Como inserirm dia 285 286 Cap tulo 11 Como inserir filmes Shockwave Shockwave o padr o da Macromedia para multim dia interativa na Web um formato compactado que permite que os arqui
573. vos de m dia criados no Macromedia Director sejam descarregados rapidamente e executados pela maior parte dos navegadores mais comuns O software que executa os filmes Shockwave est dispon vel como um plug in do Netscape Navigator e um controle ActiveX Quando voc inserir um filme Shockwave o Dreamweaver utilizar os r tulos OBJECT para o controle ActiveX e EMBED para o plug in a fim de obter os melhores resultados em todos os navegadores Quando voc fizer altera es ao filme no inspetor de propriedades o Dreamweaver mapear as entradas dos par metros apropriados aos r tulos OBJECT e EMBED Para obter os melhores resultados em diversas plataformas utilize o Macromedia Aftershock para adicionar wrappers de HTML e JavaScript aos filmes Shockwave O Aftershock capaz de adicionar diversos recursos aos filmes Shockwave inclusive a possibilidade de detec o das vers es do navegador e dos plug ins utilizados pelo visitante para que se adaptem de maneira condizente Para obter mais informa es sobre o Aftershock consulte Como inserir e editar os objetos Aftershock na p gina 290 Para inserir um filme Shockwave 1 Na janela do documento coloque o ponto de inser o onde deseja inserir o filme Shockwave 2 Clique no bot o Shockwave na paleta de objetos 3 Na caixa de di logo que aparecer selecione um arquivo de filme 4 No inspetor de propriedades digite a largura e altura do filme nas caixas L e U Es
574. w w3 0rg TR REC html40 a norma oficial para o HTML do World Wide Web Consortium A especifica o para o n vel 1 Cascading Style Sheets CSS1 http www w3 org TR REC CSS1 a especifica o oficial para as folhas de estilo do World Wide Web Consortium ndice DOT Html http www blooberry com indexdot html uma lista completa de r tulos atributos e valores HTML bem como sua compatibilidade com os diversos navegadores Style Sheets Reference Guide da Web Review http Webreview com guides style um guia que explica o que s o os estilos e em quais navegadores funcionam CGI Scripts for Fun and Profit http www hotwired com Webmonkey 99 26 index4a html tw programming um artigo do site Hotwired Webmonkey sobre a inclus o de roteiros CGI Common Gateway Interface j prontos nas p ginas ndice de recursos CGI http www cgi resources com um instrumento de pesquisa de todas as quest es relativas a CGI incluindo roteiros prontos documenta o livros e at mesmo programadores que oferecem seus servi os Site Common Gateway Interface http hoohoo ncsa uiuc edu cgi inclui uma introdu o CGI Tabela de entidades http www bbsinc com iso8859 html lista os nomes de entidades utilizados no ISO 8859 1 Latin 1 P gina de eventos de HTML din mico http msdn microsoft com workshop author dhtml reference events asp om40 event cont m informa es sobre os eventos no Microsoft Inter
575. weaver n o alterar os r tulos n o reconhecidos incluindo XML porque n o disp e de um crit rio para distinguir se eles s o v lidos ou inv lidos Se um r tulo n o reconhec vel se sobrepuser a um outro v lido o Dreamweaver poder marc lo como incorreto mas n o regravar o c digo Por exemplo o r tulo personalizado abaixo seria marcado como incorreto lt MyNewTag gt lt b gt text lt MyNewTag gt lt b gt O Dreamweaver n o altera os r tulos Cold Fusion Markup Language CFML ou Microsoft Active Server Page ASP e exibe cones para identificar blocos de c digo CEML ou ASP na janela do documento quando for poss vel Consulte Como editar os arquivos ColdFusion e Active Server no Dreamweaver na p gina 356 O Dreamweaver permite iniciar um editor de HTML com base em texto para editar o documento O Dreamweaver integrado ao HomeSite no Windows e BBEdit no Macintosh Consulte Como utilizar os editores de HTML externos na p gina 354 Como utilizar o inspetor de origem de HTML O inspetor de origem de HTML exibe o c digo de origem de HTML do documento Os r tulos s o codificados por cores nas defini es de prefer ncias Consulte Como definir as prefer ncias de cores HTML na p gina 349 Quando o conte do em uma janela do documento for adicionado ou alterado o Dreamweaver exibir imediatamente essas modifica es no inspetor de origem de HTML Isso torna o inspetor de origem
576. works Para utilizar uma imagem de fundo na p gina especifique a como uma propriedade da p gina Consulte Como definir uma imagem de fundo ou a cor da p gina na p gina 94 Para sobrepor as imagens insira as nas camadas Consulte Como utilizar as camadas na p gina 235 199 200 Cap tulo 7 Como inserir uma imagem Quando uma imagem inserida em um documento do Dreamweaver o programa gera automaticamente uma refer ncia desse arquivo no HTML Para assegurar que essa refer ncia est correta o arquivo de imagem deve estar no site Caso n o esteja o Dreamweaver perguntar se o arquivo deve ser copiado em uma pasta do site Para inserir uma imagem 1 Siga um dos procedimentos abaixo Coloque o ponto de inser o onde a imagem dever aparecer na janela do documento e em seguida escolha Inserir gt Imagem ou clique no bot o Inserir a imagem no painel Comuns da paleta de objetos Arraste o bot o Inserir a imagem da paleta de objetos at a posi o escolhida na janela do documento Arraste uma imagem da rea de trabalho at essa mesma posi o e em seguida v para a etapa 3 Na caixa de di logo que aparecer clique em Procurar no Windows ou Escolher no Macintosh para selecionar um arquivo ou digite o caminho do arquivo de imagem Se voc estiver trabalhando em um documento que n o foi salvo o Dreamweaver ir gerar uma refer ncia file para esse arquivo de imagem Quando o
577. xemplo TD H2 ser aplicado sempre que um cabe alho H2 aparecer em uma c lula de tabela ou de todos os r tulos que contiverem um atributo ID por exemplo myStyle ser aplicado a todos os r tulos que contiverem o par atributo valor ID myStyle A formata o manual de HTML anular a formata o aplicada com os estilosCSS ou HTML Para que os estilos CSS controlem a formata o de um par grafo remova toda a formata o HTML manual ou os estilos HTML Embora voc possa configurar um n mero ilimitado de atributos de estilos CSS definidos pela especifica o CSS1 no Dreamweaver nem todos os atributos aparecer o na janela do documento Os atributos ocultos s o marcados com um asterisco na caixa de di logo Defini o de estilo Observe tamb m que a apar ncia de alguns dos atributos de estilos CSS que podem ser definidos no Dreamweaver diferente no Microsoft Internet Explorer 4 0 e no Netscape Navigator 4 0 e alguns n o contam com suporte de qualquer navegador Sobre as propriedades dos estilos CSS A especifica o Cascading Style Sheets CSS1 controlada pelo World Wide Web Consortium define as propriedades dos estilos CSS por exemplo fonte cor preenchimento margem espa amento entre as palavras e controla a apar ncia dos elementos na p gina da Web O Dreamweaver permite definir qualquer propriedade CSS1 No Microsoft Internet Explorer 4 0 podem ser utilizadas as linguagens de roteiro como JavaScri
578. xto alocador de espa o Na regi o Descri o da janela do documento digite um texto descritivo sobre a caneca e exclua o texto alocador de espa o Salve o documento Feche o documento Na pr xima se o do tutorial voc ir vincular documentos de p ginas de produtos p gina principal de produtos da Scaal As p ginas de produtos que voc vincular foram criadas com um modelo semelhante Tutorial do Dreamweaver 57 58 Cap tulo 1 Criar um menu de salto Um menu de salto um menu pop up de op es que se vinculam e abrem arquivos em uma janela de um navegador Voc criar um menu de salto que permitir ao cliente saltar rapidamente da p gina do ndice de produtos para as p ginas espec ficas aos produtos do site da Scaal Antes de criar o menu de salto visualize a p gina conclu da 1 Na janela do site clique duas vezes no cone correspondente ao arquivo products index html para abri lo 2 Pressione F12 para visualizar a p gina no navegador WEILL brave new world coffee our story e se this week Select a product 3 Clique na seta situada direita do menu pop up Selecionar um produto para exibir o menu de sele o do mesmo Selecione um produto a ser exibido 4 Ao terminar de examinar os arquivos feche a janela do navegador 5 Feche o arquivo products index Inserir um menu de salto O menu de salto que voc criar ir conter um aviso de sele o a f
579. xtual escolha Abrir e Na lista Paleta de bibliotecas clique duas vezes no item a ser aberto Selecione o item na lista Paleta de bibliotecas e em seguida clique no cone de Abrir o item de biblioteca o cone correspondente pasta na parte inferior da paleta para poder alterar o item Op es da paleta de bibliotecas Estes comandos est o dispon veis no menu contextual Paleta de bibliotecas Criar item de biblioteca cone de documento adiciona a sele o atual da janela do documento biblioteca como um novo item Excluir cone de lata de lixo remove o item selecionado da biblioteca Renomear renomeia o item selecionado Abrir cone correspondente pasta abre o item selecionado em uma nova janela para edi o Adicionar p gina coloca na posi o do ponto de inser o o item de biblioteca selecionado na p gina N o h um cone para este comando ele pode ser selecionado no menu contextual Selecionar na janela do site seleciona o item real ado na janela do documento Atualizar as p ginas abre a caixa de di logo Atualizar as p ginas que permite atualizar o site ou arquivos que utilizam o item da biblioteca Como utilizar as server side includes As server side includes inclus es do servidor s o instru es destinadas ao servidor para que ele inclua o arquivo especificado no documento atual Como o processamento das inclus es ocorre no servidor o conte do inclu do normalmente n o a

Download Pdf Manuals

image

Related Search

Related Contents

Manual - Optimus  Lexmark X854e    アンダーカウル 取扱説明書  Service Manual  4. ALIMENTATION - HumanitarianResponse  TDSH`BA 東芝電球直付器具取扱説明書 保管用  AllerAir 3000 Vocarb User's Manual  Philips Master Genie Stick energy saving bulb 872790090351500  

Copyright © All rights reserved.
Failed to retrieve file