DREAMWEAVER

MENU SUSPENSO Exibir menu suspenso

12345678910111213141516Exibir rgua. Posicionar o cursor abaixo do menu. Pressionar o botao Desenhar a Camada ou utilizar o a opo Camada do menu Inserir. Utilizar o mouse para desenhar a camada. Inserir a tabela de acordo com o nmero de links. Determinar a cor do fundo da tabela, o tamanho da borda, a cor da borda, etc. Ajustar com o mouse o tamanho da camada de forma a ficar prxima da tabela. Clicar em cima do cone da camada e no inspetor de propriedades atribuir um nome para identificar a camada (no campo id da camada). Nota: Levar o cone da camada para debaixo do menu. Selecionar o boto (ou link) que acionar o menu suspenso. Ir para a paleta design, aba comportamento (caso no esteja visvel a paleta design, escolher o menu janela, opo comportamento). Clicar no boto +. Escolher a opo mostrar-ocultar as camadas. Selecionar a camada desejada. Clicar na opo (boto) mostrar, pois neste caso desejamos mostrar o menu suspenso. Confirmar com o boto OK. Alterar o evento que estiver aparecendo na aba comportamento para onMouseOver.

Tornar a camada invisvel no carregamento do site

1- Selecionar a camada (ou o cone da mesma). 2- Escolher a opo Hidden no campo Vis do inspetor de propriedades.

Ocultar o menu suspenso quando o mouse passar por cima de outros links
12345678Selecionar o prximo boto (link do menu). Selecionar a aba comportamento da paleta design. Clicar no boto +. Escolher a opo mostrar-ocultar as camadas. Selecionar a camada desejada. Clicar No boto ocultar. Confirmar com o boto OK. Alterar o evento que estiver aparecendo na aba comportamento para onMouseOver. Nota: Executar os passos de 1 a 8 para os demais links do menu.

Dreamweaver 1/5

Ocultar o menu suspenso atravs de outra camada

1- Inserir uma nova camada. 2- Digitar um n (maior que todos valores que constam nos respectivos ndice Z das outras camadas) no campo ndice Z do inspetor de propriedades. 3- Selecionar a aba comportamento da paleta design. 4- Clicar no boto +. 5- Escolher a opo mostrar-ocultar as camadas. 6- Selecionar a camada desejada. 7- Clicar no boto ocultar 8- Confirmar no boto OK. 9- Alterar o evento que estiver aparecendo na aba comportamento para onMouseOver.

MachakFX
Menu Roolover (sub-menus rolando para baixo dos menus com velocidades controladas). - Espao menor entre os ttulos dos links SHIFT + ENTER - Para o ttulo se tornar link Selecionar o ttulo criado e linkar - Borda 1- Criar no Fireworks uma tela do mesmo tamanho da moldura do marchakFX (ou usar Modificar-Tela-Aparar Tela) 2- Exportar o arquivo criado para a pasta desejada 3- Selecionar a moldura no Dreamweaver 4- Trazer o arquivo como imagem de fundo no inspetor de propriedades

Print
Inserir um boto ou um texto para imprimir a pgina inteira.

Goodies
Barra de Rolagem vertical dentro da pgina.

Banner image builder

1234Menu Comandos Opo Banner Image Builder Inserir as imagens com os respectivos links ADD

Dreamweaver 2/5

Criao de formulrio com validao dos campos

Clicar na aba Formulrios da barra de ferramentas Inserir 1- Clicar na opo Formulrio para criar a rea onde sero inseridos os quadros com os respectivos textos 2- Digitar o texto do quadro 3- Adicionar o quadro utilizando a opo campo de texto 4- Clicar no quadro para realizar as seguintes configuraes atravs do Inspetor de Propriedades: Digitar o nome do campo na opo campo de texto Informar o tamanho do campo (size) na opo larg. do caractere Informar o nmero mximo de caracteres(maxlength) na opo n max. de caract. Informar se linha simples, multi-linha ou senha na opo tipo Informar qual o texto default que aparecer para o usurio no campo valor inicial 5- Inserir 2 botes clicando duas vezes na opo boto 6- Habilitar(no inspetor de propriedades) no 2 boto a opo redefinir o formulrio e digitar no campo denominao o nome do boto. 7- Clicar na linha tracejada vermelha ao redor do formulrio 8- Definir no inspetor de propriedade o nome do formulrio no campo formulrio, a ao(endereo fornecido pelo provedor ) no campo ao e escolher o mtodo no campo mtodo(post) 9- Clicar na opo campo oculto 3 vezes (aparecero 3 cones) 10- Selecionar o 1 cone 11- Digitar as seguintes informaes no inspetor de propriedades: Campo oculto = recipient valor = e-mail (ex: pedrorui@rio.com.br) Campo oculto = redirect valor = pgina desejada (ex:.http://planeta.terra.com.br/esporte/pedro/lider/index.html) Campo oculto = subject valor = assunto (ex: cadastro) 12- Selecionar o boto de envio do formulrio 13- Clicar no menu janela 14- Escolher a opo Comportamentos 15- Adicionar o comportamento Validar o formulrio 16- Selecionar o campo do formulrio na caixa de listagem 17- Marcar as opes desejadas: Para preenchimento obrigatrio: Valor = Necessrio Para valores numricos: Aceitar = Nmero Para preenchimento de e-mail vlido: Marcar a opo endereo Notas: 1-Realizar as operaes descritas acima para os outros campos de formulrio na caixa de listagem , que pretende validar. 2 Para alterar as opes marcadas em cada campo do formulrio, clicar no boto de envio do formulrio e 2 vezes no Eventos do Comportamento para que a janela Validar o Formulrio aparea. 18- Alterar no cdigo fonte(dentro do dreamweaver) as mensagens para portugus: Alerta introdutrio Alerta de campo no preenchido Alerta de e-mail incorreto OBS: Selecionar a caixa de texto e inserir o cdigo fonte CSS no final do input (vide cdigo fonte no arquivo validacao_formulario.htm na pasta AulaDreamweaver), para alteraes na fonte, cor da borda e cor de fundo.

Dreamweaver 3/5

Inserir arquivo criado em Flash sobre uma pgina existente com efeito de transparncia
12345678910111213Criar um arquivo em Flash Abrir uma pgina existente no Dreamweaver Clicar no local que dever ser inserido o arquivo .swf Clicar no menu inserir Selecionar camada Inserir dentro da camada o arquivo . swf Ajustar o tamanho da camada de acordo com o tamanho do arquivo . swf Posicionar a camada no local desejado Selecionar o arquivo . swf Clicar em parmetros no inspetor de propriedades Digitar no campo parametro wmode Digitar no campo valor transparent OK

Extra (Gradiente)
1234Clicar em Extra Clicar no cone Gradient Text Realizar as configuraes OK

Open Cromeless Window

12345Abrir uma pgina existente Clicar no menu Janela Selecionar Comportamentos Adicionar (sinal +) Open Chromeless Window Realizar as seguintes configuraes: Url To Display Digitar o nome da outra pgina existente que dever ser aberta quando ocorrer o evento (ex: onLoad, onMouseOver). Window Title Digitar o ttulo que dever aparecer no topo de janela Nota: As outras configuraes so auto-explicativas 6- OK 7- Selecionar o evento

Dreamweaver 4/5

Flash Fx(Panel)
1- Criar uma camada 2- Selecionar a camada 3- Salvar o arquivo 4- Clicar em Flash Panel 5- Clicar no cone Insert Flash Panel 6- Realizar as configuraes na janela Flash Panel e no Inspetor de Propriedades 7- OK Nota: Efeito possvel tambm numa clula de uma tabela

Dreamweaver 5/5