Galeriade imagens

IntroduoQuem nunca se deparou com a necessidade de criar uma pequenagaleriade imagens, fotos, de vdeos para inserir seu portflio, fazer um pequeno catlogo? Desde os iniciantes ao de nvel avanado, j passaram ou passaro por esta obrigao. E um dos recursos mais simples, porm, pouco explorado para tal fim no Dreamweaver e a aplicao de camadas. Para quem precisa de rapidez e no carece de dinamismo, actualizaes automticas, ou que nem saiba programar, esta uma boa opo.Pr-Requisitos Facilidade com o manuseio do Dreamweaver CS3 Entendimento sobre o conceito de Camadas e DIVs Entendimento conceitual sobre Behaviors (Comportamentos)ObjectivoCriar uma galeria que receba contedos diversos, como: textos, imagens,animaesem flash e vdeo utilizando camadas

ConceitosMuitos alunos meus, iniciantes no Dreamweaver, tm uma certa dificuldade sobre o entendimento e funcionalidade das camadas e, a forma mais simples de passar tal conceito que encontrei foi associ-las a um caderno com folhas soltas onde, de acordo com a necessidade ou ordem de importncia, podemos desloc-las, umas sobre as outras, alterando sua ordem.No Dreamweaver no diferentee veremos o porqu agora.ContedoPara melhor entendimento de todo o processo, vamos dividi-lo em partes.Parte 1: Montagem da Estrutura da Galeria ContedoNossa galeria ter como base a seguinte estrutura:

Fig. 01: Estrutura da galeriaPara mont-la vamos comear inserindo a camada responsvel pelo contedo de texto. Para isso, acedermos no painelInsert >Layouto coneDraw AP Div

Fig. 02: Painel Insert Draw AP Div (Inserir > Camada) e com um clique na rea de desenvolvimento, faamos um retngulo (clicando sobre a borda logo em seguida) e o configuremos com as seguintes caractersticas:

Fig. 03: Propriedades da Camada TextoCSS-P Element: Nome que identificar a camada e a diferenciar das demais.L: Distncia do lado esquerdo | T: Distncia do topo | W: Largura da camada | H: Altura da camadaBg color: Cor de fundo da camadaSeguindo o mesmo procedimento, vamos criar mais trs camadas com as mesmas caractersticas, alterando a penas seus nomes(Imagem, Flash e Vdeo respectivamente) e suas cores de fundo para melhor identific-las adiante.Aps inserirmos as quatro camadas, teremos a seguinte visualizao no painel CSS:

Fig. 04: Painel CSS de identificao das camadasName: Nome da camadaZ: Ordem de visualizaoVejamos, de acordo com o Z, como esto organizadas as camadas, caso tenhamos que desmembr-las:

Fig. 05: Organizao das camadas

Parte 2: Montagem da Estrutura da Galeria MenuAs camadas que recebero seus respectivos contedos j esto prontas. O prximo passo inserirmos uma nova camada que conter o menu de acesso s outras camadas.Se prestarmos bem ateno, perceberemos que as camadas desenvolvidas esto a25 pxdo topo, que por sua vez, possuem uma altura de300 px.Ento, para que a camada com o menu saia perfeitamente abaixo das demais, e dando um espao de2 pxpara no ficar muito prximo, vejamos na imagem a seguir:

Fig. 06: Configurao da camada MenuVamos clicar dentro desta nova camada e inserir umatabela com 1 linha e 4 colunas; com largura de 100%, para, em seguida, criarmos os devidos links para as camadas de contedo, como mostra a fig. 01 deste tutorial.Parte 3: Utilizando Behaviors para Controlar a Exibio das CamadasBehaviors nada mais do que alguns comportamentos que o Dreamweaver oferece aos desenvolvedores com scripts pr-configurados e, o que usaremos agora, chama-seShow-Hide Elements(Exibir-Ocultar Elementos). Este comportamento nos d o controle total sobre quais camadas sero exibidas e/ou ocultadas no momento em que o usurio clicar em algum link do menu.Primeiramente, vamos seleccionar a palavra Texto da camada menu e, atravs do painelTag > Behaviors > +(sinal de mais), clicaremos emShow-Hide Elements.

Fig. 07: BehaviorsNa janelaShow-Hide Elementstemos todas as camadas que criamos e os botes responsveis pelo controle de exibio das mesmas.

Fig. 08: Janela Show-Hide ElementsElements: Nome de todas as camadas criadas na pginaBotes: Show (Exibir) | Hide (Ocultar) | Default (Padro)Vamos entender a lgica desta janela.Quando clicarmos no linkTextoqueremos que sejam exibidas as camadasTextoeMenu(clicar no nome e em seguida no boto Show). O restante deve ser ocultado (Clicar no nome e em seguida no boto Hide). Ao clicarmos no linkImagem, as camadasImagemeMenudevem ser exibidas e o restante, ocultado. E assim sucessivamente.Parte 4: Ajustes nas CamadasAt aqui foi tudo tranquilo, sem dificuldades, no verdade?!Para alguns usurios, certamente a galeria j est funcionando ao clicar em seus links. Contudo, caso isso ainda no ocorreu ainda, vamos fazer alguns ajustes.Acessando o PainelCSS > AP Elements, onde se encontram todas as camadas, existe na primeira coluna um olho. Este deve est aberto ou fechado para que os links funcionem. Caso queiramos que, ao entrar na galeria, o usurio j visualize a camada Flash aberta, devemos fazer a seguinte configurao, bastando clicar ao lado do nome da camada:

Fig. 09: Ajustes nas CamadasDevemos ficar atentos camadaMenu. Como ela responsvel pela navegao da galeria, ela sempre deve estar visvel.Parte 5: Ajustes nos Comportamentos de Ocultao e ExibioAo clicarmos em qualquer link da galeria, visualizaremos, no painelBehaviors, o seguinte:

Fig. 10: Ajustes no Painel BehaviorsTemos duas colunas onde, na primeira, consiste a configurao do comportamento. Para que o Behaviors assuma a funo de clique, precisamos alterar sua configurao para OnClick:

Fig. 11: Configurao do Behaviors para OnClickEste procedimento deve ser efetuado em todos os links. Mas existe outro ajuste a ser feito, pois em alguns navegadores, a mosinha do mouse no aparece quando estamos com ele sobre o link. Para isso acontecer, no PainelProperties > Linkvamos inserir o caracter # em todas as camadas.

Fig. 12: Configurao do linkConsideraes FinaisPronto, pessoal!Nossa galeria est completa. Agora basta inerirmos o devido contedo. Para isso, basta clicar, no Painel CSS > AP Elements, na camada desejada, e na rea de desenvolvimento, dentro dela, inserir os devidos contedos. Vejamos o resultado abaixo:Espero que tenham gostado.S para constar, este tutorial tambm est presente no sitewww.mxstudio.com.br, pois tambm sou colunista de l.Um abrao a todos.

http://www.webtutoriais.com/open.php?cut=5470

Dreamweaver - Como criar um formulrio

CRIANDO UM FORMULRIO

1 coloque o ponto de insero onde o formulrio devera ser exibido.

2. Escolha inserir >formulrio ou seleccione a categoria formulrio na barra inserir e clique no cone de Formulrio Ou ainda seleccione na barra Inserir a guia Formulrio.

O Dreamweaver inserir o formulrio. Com a pgina no modo de visualizao do projecto, os formulrios so indicados por um contorno pontilhado em vermelho.

Dica

Se este contorno no estiver visvel, verifique se a opo Exibir > Auxlios visuais >Elemento invisvel est seleccionado.

3 . Na janela dodocumento, clique no contorno do formulrio para seleccionar o formulrio ou seleccionar a tag , no selector de tags situado no canto inferior esquerda da janela do documento.

Propriedades do formulrio

O inspetor de propriedades ser exibido como abaixo:

A - Aco - Identificar o aplicativo do servidor que processa as informao do formulrio, especificadas como URL. Clique no cone da pasta, para localizar o aplicativo, ou digite o caminho correspondente a ele, tambm possvel a digitao de um email.

B - formulrio - Defina o nome do formulrio.

C - Mtodo - Define a maneira como sero processados os dados do formulrio. Segue abaixo as opes;

. Get; Anexa o valor URL que solicita a pgina.

. Post; Incorpora os dados do formulrio solicitao http.

. Padro; Utiliza a definio padro do navegador para enviar os dados do formulrio ao servidor Normalmente, o padro utilizado o mtodo GET.

D - Tipo de Codificao - permite especificar o tipo de codificao

MIME dos dados enviados ao servidor para processamento.

Inserindoobjectosem um formulrio

Para adicionar um objeto de formulrio necessrio que o ponto de insero esteja

Dentro dos limites do formulrio (clique com o mouse dentro da rea pontilhada vermelho), seleccione o Menu Inserir e na clique na opo Objectos de Formulrio.

Porm, a maneira mais prtica de se inserir objectos em um formulrio utilizando a barra Inserir, como segue abaixo:

A-Campo de texto-coloca um campo de texto no ponto de insero. Defina o nome, tamanho e valor inicial no inspector de propriedades.

B- Campo oculoto - coloca um campo oculto no ponto de insero. Defina o nome e valor no inspector de propriedades

C-rea de texto - insere um campo de texto com vrias linhas no ponto de insero.

D - Caixa de seleo e boto de rdio - colocam os controles correspondentes no ponto de insero. Defina o nome, valor quando seleccionado e o estado inicial no inspector de propriedade.

E - Grupo de botes de rdio inserir um grupo de botes de opes no ponto de insero.

F - Menu de lista - coloca uma lista ou menu p-up no ponto de insero. Defina o nome, tipo e valores da lista no inspector de propriedades.

G - Menu de salto - coloca um menu pop- up de URL s no ponto de insero. A escolha de um valor nesse menu levar o usurio URL. Defina a lista de valores na caixa de dilogo que for exibido.

H - Campo deimagens-coloca um campo imagens no ponto insero Defina o nome, tamanho, texto alternativo e arquivo de origem no inspetor de propriedades.

I - Campo de arquivos - coloca um campo de upload de arquivos no ponto de insero. Defina o nome, tamanho e valor inicial no inspetor de propriedades.

J - Boto coloca um boto com nome e value padro Enviar no ponto de insero.

Para inserir um boto, coloque o ponto de insero dentro dos limites de um formulrio, os botes situados fora dos formulrios no aparecero em todos os navegadores. Utilize o inspetor de propriedades para definir o nome, identificador e a ao. Identificador uma maneira de associar estruturalmente o identificador do texto ao campo.

k-Conjunto de campos uma tag de conteno para um grupo lgico de elementos do formulrio.

Criao de nomes de salto

Um menu de salto um menu pop-up em um documento, visvel aus usurios do site, que lista as opo que estabelecem links a documentos e arquivos. Podem ser criados links a documentos no seu site da Web, a documentos em outros sites da Web,links de correio electrnico, links a imagem ou a qualquer tipo de arquivo que passa ser aberto em um navegado.

Um menu de salto contm trs componentes bsico;

. Um aviso de seleco no menu, como uma descrio da categoria para os itens do menu, ou instruo, Por exemplo; Escolha uma opo (Opcional)

Uma lista de itens de menu vinculados; um usurio escolhe uma opo e um documento

Um boto Ir (Opcional)

A - Clique no boto com o sinal de adio (+) para adicionar um item de menu.

B - Clique novamente no boto para incluir outro outros itens de menu. Seleccione um item de menu e clique no boto com sinal de subtraco(-)para remover um item.

C - Seleccione um item de menu e, em seguida, utilize as teclas de seta para percorrer a lista para cima /baixo.

D - No campo Texto, digite o texto do item de menu que dever aparecer na lista do menu.

Para utilizar um aviso de seleco no menu, como "Escolha uma opo", digite o texto da

Seleco no campo Texto para o primeiro item de menu.

E - Na caixa de texto Aps selecionar, v para a URL, clique no cone de pasta para procurar o arquivo a ser aberto, ou digite o caminho do arquivo nessa caixa.

F - No menu pop - up Abrir as URLs em, seleccione uma localizao onde o arquivo ser aberto;

A opo Moldura abre o arquivo na moldura selecionada.

H - Na caixa de texto Nome de menu, digite um nome para o item de menu.

I - em opes, seleccione inserir o boto ir aps o menu para adicionar um boto ir em vez de aviso de seleco no menu

J - Em Opes, escolha Seleccionar o primeiro item aps a alterao da URL, se for utilizado um aviso de seleco no menu ( como "Escolha uma opo")

ENVIANDO UM FORMULRIO VIA e-mail

Para enviar os dados de um formulrio para um endereo de email, faa como indicado abaixo:

Clique no campo de formulrio (em sua linha vermelha), selecione no inspetor de propriedades o mtodo post e coloque o email de destino na opo ao.

Observao

Os dados do formulrio sero enviados utilizando-se o sorftware de correio que estiver configurado na mquina

Dreamweaver - como adicionarmsicano site

Link paraudio

A incorporao de udio encaixa o aparelho de reproduo de som directamente na pgina, mais o som s ser excludo se os visitantes do seu site contarem como o plug-in apropriado ao arquivo escolhido. Incorpora os arquivos, se desejar, utilizar o som como msica de fundo ou se desejar mais controle sobre a prpria apresentao de som.

Para inserir um link de udio, faa como o que se segue abaixo:

1. Seleccione um texto ou imagem no documento.

2. No inspector de propriedades seleccione a caixa Link.

3. Digite o nome do arquivo de udio para qual se deseja criar o link, ou clique no boto procure para encontr-lo.

Arquivos de udio embutidos

Embutido um arquivo de udio em sua pgina ser aberto um software para reproduo

Do arquivo (media player, por exemplo),mais o arquivo somente ser reproduzido se o usurio possuir plug-in para osoftwareinstalado em seu browser.

Lembrando que, esse arquivo de udio tambm dever estar copiado e guardado juntamente com os arquivos de seu site. Esses arquivos poder ser utilizado como som de fundo, com a vantagem de que o usurio poderia controlar o arquivo atravs do software que o est reproduzindo.

Para embutir arquivos de som em uma pgina, faca como abaixo.

1.Clique no Menu Inserir

2.Selecione a opo Mdia

3.Clique em Plu-ln

4.Na caixa de dilogo que ser exibida, seleccione o arquivo de som ao qual se deseja embutir na pgina, caso o arquivo no esteja gravado em uma pasta de site Dreamweaver solicitar o arquivo a ser copiado.

Dica

A Barra Inserir possui um atalho para inserir Mdia, veja;

Observe agora qual a aparncia da mdia inserida no Dreamweaver MX;

J a aparncia no navegador do udio embutido esta;

Dica

No inspector de propriedades existe uma caixa uma caixa chamada Url do Plug-In, digite o endereo da pgina onde possvel fazer o download do programa necessrio para a reproduo do arquivo embutido.

Dreamweaver - como criar mapasdeimagens

CRIANDO MAPAS DE IMAGENS

Um mapa de imagens uma imagem que serve como dispositivo de navegao. Com um mapa de imagens, possvel. Criar multimdia ponto activo (rea clicveis) em uma nica imagem e vincular cada ponto activo a uma URL diferente ou arquivo a ser aberto. possvel tambm definir onde um documento ser aberto, por exemplo; abrir o documento em uma moldura de um conjunto de molduras de um documento ou abri-lo em uma nova janela do navegador.

Para criar um mapa de imagens

1.Insira uma imagem e seleccione-a.

2.Clique na seta de expanso do inspector de propriedades ( na extrema direita inferior da pgina, dentro do inspector de propriedades ) e observe as opes;

A - MAPA - Digite o nome do mapa.

B - FERRAMENTA PONTO ACTIVO DE PONTEIRO - Ferramenta utilizada para seleccionar as reas do mapa definido na imagem.

C-ferramenta utilizadas para definir a rea do mapa na imagem como segui abaixo;

. Ferramenta Ponto Activo Rectangular: cria mapas rectangulares

.Ferramentas Ponto Activo Oval; cria mapas ovais

. Ferramentas Ponto Activo Poligonal; cria mapas em qualquer formato.

Para definir uma rea do mapa na imagem, seleccione uma das ferramentas acima, posicione o mouse por sobre a imagem e utilize o arrastar e soltar observe que o inspector de propriedades passar a exibir as seguintes opes:

Dreamweaver - como criar texto em flash

Texto Flash

O Texto Flash um texto que quando outilizadorpassa o mouse em cima, o mesmo muda de cor, para inseri-lo no documento siga os seguintes passos:

1.Clique no Menu Inserir (ou utilize a barra inserir)

2.Clique emimagens interactivas

3.Selecione texto flash

Uma caixa, como a que segue, ser exibida;

A - FONTE- seleccione o tipo deletraa ser formatada para o texto flash, assim como o tamanho o estilo e o negrito.

B - COR - cor do texto para visualizao na pgina. Cor da Imagem Cambivel; cor que ser exibida quando o mouse deslizar por sobre a imagem.

C - TEXTO - digite o texto que aparecer no boto.

D - LINK- pgina que aparecer quando clicarem por sobre a imagem.

E - DESTINO- definio de onde a pgina ser aberta.

F - COR DE FUNDO - definio da cor de fundo do boto.

G - SALVA COMO - especificao do local onde ficar gravado o texto flash.

DICA

Para testar o texto flash, siga os mesmos passos para testar o Boto flash.

Como criar botes em flash com o dreamweaver

O objecto de boto Flash um boto actualizvel baseado em um modelo Flash. possvel personalizar um objecto de boto Flash, adicionando texto, cor de fundo e links para outrosarquivos. possvel inserir botes Flash durante o trabalho na visualizao do projecto ou na visualizao do cdigo.

DICA

necessrio salvar osdocumentos antes de inserir um objecto de boto ou texto Flash.

Para obter Boto Flash deve-se clicar no menu inserir, seleccione a opoimagensinteractivas > Boto Flash, uma caixa, como abaixo, ser exibida;

A-AMOSTRA-exibe um exemplo do estilo seleccionado.

B- ESTILO - lista de botes pr-definidos, para visualiz-lo observe a caixa Sample.

C- TEXTO DO BOTO- texto que aparecer na parte de cima do boto.

D -FONTE- seleccione o tipo de letra a ser utilizada.

E - Link_ endereo (URL),que ser aberto quando o usurio clicar sobre o boto.

F - Destino - quando o link ser aberto.

G- Cor de Fundo - Cor atribuda ao fundo do boto. (de preferncia a cor do fundo da pgina).

H - salvar como - especifica o nome do boto e onde ser gravado

Dica

Para testar o boto inserido, clique sobre o mesmo, v at o inspector de propriedades e escolha a opo Executar, para finalizar ainda no inspector de propriedades, seleccione a opo Parar.

Dreamweaver - como inseririmagens

Neste tutorial vamos mostrar como inserir imagens.

Como inserir imagens

As imagens costumam ser utilizadas para indicar interfaces grficas (como botes de navegao), apelo visual (por exemplo; fotografias) ou elementos de design interactivos, como imagens cambiveis ou um mapa de imagens.

No Dremweaver MX, possvel possvel trabalhar visualizao do projecto ou do cdigo para inserir imagens em um documento. Ao adicionar imagens em um documento, possvel definir ou modificar propriedades daimageme exibir as alteraes directamente na janela do documento.

Para inserir imagens no Dremweaver seleccione o Menu Inserir e seleccione Imagem, existindo tambm a opo da barra Inserir. Na caixa de dilogo que ser exibida escolha o local onde se encontra guardada a imagem escolhida, em seguida clique duas vezes sobre o nome doarquivo.

Como mencionando em captulo anterior, nem todos os tipos (extenses) de imagens poder se utilizados pelo Dreamweaver, os mais utilizados so GIF, e PNG.

Propriedades da imagem

Ao seleccionar uma imagem o inspector de propriedades, passara a exibir as informaes da mesma.

A-LARGURA E ALTURA - permite configura / altura da imagem seleccionada no documento.

B- Orig. - exibe o nome do arquivo inserido, assim como o caminho para a pasta onde o mesmo est gravado.

C- ALT- Opo que permite que seja exibida uma frase quando o usurio permanece com o mouse posicionado alguns segundos em cima da imagem no navegador.

D-ALINHAR-alinhamento do texto em relao imagem.

E-ALINHAMENTO-do texto em relao ao documento.

F- BORDA- configurao da espessura da borda da imagem.

IMAGEM CAMBIVEL

Uma imagem cambivel aquele que, quando exibida em um navegador, alterada quando o ponteiro movido sobre a mesma.

Esse tipo de imagem consiste, de fato, em duas imagens: a imagem primria (exibida quando a pgina for carregada pela primeira vez) e a imagem secundria (que ser exibida quando o cursor for deslizado sobre a imagem primria). As imagens cambiveis devero ter o mesmo tamanho; caso contrrio, o Dreamweaver redimensionar automaticamente a segunda imagem para que coincida com as propriedades da primeira.

Para inserir uma imagem cambivel no documento deve-se clicar no Menu Inserir (ou utilizar a barra inserir ), seleccionar o item imagens Interactivas e clicar na opo Imagem cambivel, seguinte caixa de dilogo ser exibida:

A -NOME DA IMAGEM - d um nome para o conjunto de imagens. (imagem cambivel)

B- IMAGEM ORIGINAL - clique no boto procurar e seleccione a imagem que aparecer inicialmente, no navegador.

C- IMAGEM CAMBIVEL- clique no boto procurar e seleccione a imagem que substituir a imagem original.

D - QUANDO TIVER CLICADO, V PARA A URL - digite o nome d pgina a ser visitada quando o usurio clicar na imagem cambivel.

Dreamweaver - Construir umsitedo incio

Propriedades da pgina

Quando criamos pginas no Dremweaver, temos que definir algumas coisas bsicas, tais como; plano de fundo,coresdos textos e dois links, etc. Para isso clique em Modificar e seleccione a opo Propriedades da pgina, ira aparecer uma caixa como abaixo;

A - Titulo - o nome que aparece na barra de ttulo donavegador, a pgina for carregada.

B-Imagem de Fundo-Uma imagem pode ser seleccionada para compor o fundo da pgina.

C-Fundo - Permite que seja escolhida a cor de fundo da pgina.

D- Texto- Define a cor do texto

E-Links - Define a cor utilizada para os links da pgina.

F-Margens - Define as margens da pgina.

Como trabalhar com textos

Trabalhar com textos uma tarefa bastante simples. H vrias formas de adicionar texto a um documento, do Dreamweaver. possvel digitar texto diretamente na janela do documento, recortar e colar ou importar texto de outros documentos.

Sempre que digitarmos um texto no Dreamweaver, suas opes de formatao ficam registradas no inspetor de propriedades, como segue abaixo;

A- Formato- Permite aplicar estilos em ttulos.B- Fonte- Opes de vrios tipos de fonte para a formatao de texto. Porm, nem todas as fontesarmazenadasno computador so visualizadas automaticamente pelo Dreamweaver, se a fonte desejada no estiver na lista seleccione a ltima opo dela (editar lista), e escolha a fonte desejada.C- Tamanho - Especifica o tamanho do texto.D- cor do texto -Item para a escolha da cor do texto.E - Negrito (Bold)F - Itlico (Italic)G - Alinhamentos (esquerda, centralizado, direita e justificado)H - Marcadores e NumeraoI - Aumentar/ Reduzir recuo do texto.

ESTILOS HTML

Ao configurar estilos HTML podem, possvel aplicar com rapidez e consistncia formatao de fonte ao texto de documentos,

Os estilos HTML podem consistir em um nico ou em vrios atributos de tag de fonte

HTML, como cor, tamanho da fonte, tamanho, bem como outros atributos de formatao como negrito ou itlico. Por exemplo; possvel criar um estilo HTML para texto que Arial, tamanho 4+, verde e itlico. Depois, possvel aplicar rapidamente o estilo seleccionando o texto em que deseja aplica-lo e, em seguida, seleccionado o estilo HTML do painel Estilos HTML.

Para criar um estilo HTML deve - se seguir os seguintes passos;

1) Clique no Menu janela

2) Seleccione a opo Estilos HTML

Ao lado direito (nos painis) aparecer o painel como abaixo;

A - Remove formatao que porventura, j tenham sido aplicadas a um texto do documento activo.

B - Para criar um novo estilo clique no boto como indicado, escolha a opo Nova, a seguinte caixa ser exibida;

A -Nome - Atribui um nome, escolhido pelo usurio, ao estilo criado.B - Aplique a - Indica onde dever ser aplicado o estilo criado se a um texto selecionado ou a um pargrafo onde est posicionado o cursor.C- Fonte - Seleccionado o tipo da letra a ser utilizada.D- Tamanho - Seleccione o tamanho de a letra ser aplicado.E- Cor - Selecciona a cor do estilo.F - Estilo - Negrito o ItlicoG - Formato - S estar disponvel se o usurio estiver criado um estilo para um pargrafo, utilizado para escolher um nvel de cabealho.H - Alinhamento - Alina o estilo da maneira, mas conveniente ao usurio (esquerda direita ou centralizada).

Criar janelaPOP-UP

Quem que gosta dos chamadas Janelinhas Pop-up? Os Pop-ups tem se tornado um dos campees de chateaes do mundo da Internet e para driblar essas chateaes nada melhor do que criarmos um pop-up bem mais interessantedo que uma simples janelinha flutuante. Uma das alternativas bem atraentes utilizar janelinhas pop-up transparentes. O uso de um Comportamento do DW (behaviors) pode ser adicionado em camadas que as deixam transparente. Poderemos adicionar um boto que ao clicar em fechar , aps um tempo determinado ela "vai desaparecendo" (Efeito Fade) para o usurio. Ou podemos fazer com que a camada j aparea transparente. Esse recurso s funcionar se voc tiver no seu DW o comportamento "Opacity Suite". Caso no possua esse comportamento baixe-o

OBS: recomendvel umconhecimentosobre camadas e comportamentos do DW. Veja a matria que falo sobre esses recursos super teis do DW.Bom ento mos a obra.

Crie umaimagemno Fireworks ou em um programa grfico de sua preferncia e exporte-a com o formato "gif" ou "jpeg".

Inserimos na pgina aonde queremos que aparea a popup, uma camada "Menu Inserir Camada". Seleccione a camada e altere as propriedades de modo que a opo "Imagem de fundo" fique com o URL do nosso arquivo "gif" ou "jpeg" criado anteriormente bem como uma ID para essa camada aqui no caso eu dei o nome de "popup" e a figura feita no Fireworks eu exportei como como "pai.gif".

Com o Comportamento j instalada em seu DW , v no menu "Janela Comportamentos> Opacity > Fade Opacity

em "Object ID:" insira o mesmo nome anteriormente dado a ID da camada. Aqui no meu caso seria "popup" que foi o nome que eu dei para a minha camada, em "Start Opacity" insira 100 (visualizao total) , em "Final Opacity" insira 0 (zero - visualizao nula) e em "Speed" insira a velocidade do efeito (no exemplo este valor 20). Clique em "OK". No se esquea de configurar o evento para esse Comportamento sendo "onclick".

Com esse comportamento voc pode tambm optar por: Set Opacity (com um evento , coloca sua camada com a opacidade determinada por voc) ou Stop Fade Opacity (com um evento voc para de aplicar o efeito de opacidade).Mapeamento deimagens no Dreamweaver

Aprenda a mapear imagens, usando o Dreamweaver. Mapear imagens, voc colocar uma imagemna sua pgina e colocar um link nessa imagem, mas no na imagem inteira.

Mapear a imagem colocar um link apenas em uma parte dHoje vamos a mapear imagens, usando o Dreamweaver.Mapear imagens, voc colocar uma imagem na sua pgina e colocar um link nessa imagem, mas no na imagem inteira. Mapear a imagem colocar um link apenas em uma parte de imagem.

Esse mapeamento ptimo pra splashes e aberturas desites.1 Escolha a sua figura. Usarei esta:

Obviamente, coloque essa imagem na sua pgina. Pra fazer isso, basta ir em Insert >> Image (meu Dreamweaver em Ingls). Aparecer uma janela, basta escolher a imagem, ou colocar a URL da figura na janela.2 Em cima da pgina, existem trs abas: Code, Split e Design. Escolha "Design", para visualizar sua pgina.

Na aba design, clique com o boto direito na figura, e seleccione a ltima opo, Properties (Propriedades).

3 Aparecer o inspector de Propriedades. Observe que h um quadrado, um circulo e um Polgono. Com essas ferramentas, seleccione a parte que deseja mapear.

4 No inspector de Propriedades, coloque a URL do link e o tipo da target. Se preferir, faa isso manualmente no cdigo HTML.

Pronto, voc mapeou asua imagem!

Rollover ImageEste belo efeito de passar o rato por cima de uma imagem e aparecer outra muito simples de fazer.1. Ir aWindow > Objectse clicar no objecto "Rollover Image"

2. A vai aparecer uma janela para escolher a 1 imagem e a 2 imagem; clique no 1browsee selecciona a imagem desejada, a mesma coisa para o 2browse.

3. E a magia est feita

Dreamweaver para criar um menu Pop-up

modo Design.

29. Montando o menu:30. Mostre a paleta Behaviors, clicando em Window/Behaviors.31. D um clique no boto Verduras 1.32. Clique no sinal + da paleta Behaviors.

33. Seleccione a opo Show Pop Up Menu.

34. Aparecer a caixa de dilogo abaixo:

35. As guias Appearance e Advanced, tratam da formatao da aparncia do menu, use-as como quiser, depois de formatar clique na guia Position para definir em que posio aparecer o menu em relao ao boto que o activa.

36. Clique em OK e seleccione o outro boto.37. Repita para este boto os itens, 32, 33, 34 e 35.38. O ltimo passo alterar o target que est _blank para contedo que o nome do nosso IFRAME, para faz-lo rapidamente, acesse a vizualizao de cdigo do Dreamweaver e clique no menu Edit/Find and Replace.39. Mande localizar _blank e substitua por contedo.