dreamweaver_truquesmagicos

5/7/2018 dreamweaver_truquesmagicos - slidepdf.com

http://slidepdf.com/reader/full/dreamweavertruquesmagicos 1/63

DREAMWEAVER CS5



2

ÍNDICE

ÍNDICE .......................................................................................................................................... 2 INTRODUÇÃO .............................................................................................................................. 3

A série............................................................................................................. 3 01 – CONECTANDO O DREAMWEAVER A UM SERVIDOR WEB ........................................... 6 02 – VIDEO WMV NO DREAMWEAVER ................................................................................... 24 03 – FORMULÁRIO DE CONTATO EM PHP ............................................................................ 28 04 – VALIDANDO O FORMULÁRIO .......................................................................................... 31 05 – CRIANDO UM QUIZZ ......................................................................................................... 34 06 – SLIDESHOW ....................................................................................................................... 38 07 – SISTEMA DE BANNERS .................................................................................................... 40 08 – LAYERS FLUTUANTES TRANSPARENTES .................................................................... 42 9 – WIDGETS – CS5 ................................................................................................................... 43 10 – LIVRO DE VISITAS PHP MYSQL ...................................................................................... 55 CONCLUSÃO ............................................................................................................................. 63



3

INTRODUÇÃO

Atualmente é muito comum encontrar material que ensine a utilizar um softwareem seu computador, basta apenas dedicação e você passa a conhecer sua

interface, seus botões e menus.

Alguns materiais como os do Apostilando.com “casam” a explicação com

exemplos reais. Mas para quem está começando muitas vezes isso é

insuficiente.

Então nós do Apostilando.com, criamos uma série chamada TRUQUES

MÁGICOS. A composição da série será de apostilas para você que já baixounossas apostilas e precisa exercitar a criatividade.

Cada material da série trará dentro de um determinado software dicas e

exemplos de uso do software, reforçando assim seu aprendizado sobre ele e

despertando sua criatividade. Obrigado e tenha um bom curso.

A série

A série em sua primeira edição abordará exemplos para os seguintes

softwares: Adobe Photoshop;

Adobe Flash

Adobe Dreamweaver

PHP

Microsoft Word

Microsoft Excel

Embora não seja um pré-requisito par se trabalhar no Dreamweaver, ao se

criar arquivos dinâmicos é necessário testá-los em um servidor web. No caso

vamos instalar o WAMP, que é um servidor local e você pode baixa-lo

gratuitamente em servidores de download.

Instalando o WampServer.

Basta ir clicando e avançando. Após a instalação será mostrado próximo ao

relógio o ícone de seu servidor WEB.



4

Ao clicar sobre este ícone você terá acesso ao menu de opções de seu

servidor local.

Para quem usa window 7 pode ocorrer de não iniciar o serviço. Caso

isso ocorra é necessário uma pequena modificação, pois o Apache que é o

servidor WEB utiliza a porta 80, precisamos mudar para a porta 82. Vá até apasta: C:\wamp\bin\apache\apache2.2.6\conf.

Abra o bloco de notas e depois arraste o arquivo httpd.conf para dentro do

bloco de notas. Localize a linha: Listen 80 e mude para Listen 82

Depois localize a linha ServerName localhost:80 e mude para ServerName



5

localhost:82

Clique no botão do Wamp, pare todos os serviços e depois os reinicie.

No seu navegador digite http://localhost:82/ .

Vamos a um exemplo simples de teste.

Abra o Dreamweaver ou mesmo o bloco de notas e digite o código

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

</head>

<?php echo "teste de texto"

?>

http://localhost:82/






6

<body>

</body>

</html>

Salve como teste.php e salve na pasta: C:\wamp\www, depois digite em seu

navegador: http://localhost:82/teste.php.

01 – CONECTANDO O DREAMWEAVER A UM

SERVIDOR WEBCada vez mais se necessita criar sistemas em sites na Internet que tenham

ligação com Bancos de Dados. No exemplo a seguir vamos aprender a criar

um projeto de site no Dreamweaver que tenha acesso a um servidor local, no

caso o wamp.

Inicialmente crie uma pasta chamada drw dentro da pasta www de seu servidor

wamp.

Abra o Dreamweaver.

Na primeira tela Create New, escolha Dreamweaver site.

Dê um nome e defina um caminho para seu site.

http://localhost:82/teste.php






7

Clique em Servers.

Clique no sinal de mais(+). Preencha os dados

Clique em save.

Será mostrado a estrutura de seu site.



8

O procedimento acima foi feito no Dreamweaver CS5. Para as versões

anteriores é semelhante, apenas é preciso preencher os dados quando

solicitados e escolher como tipo de aplicação PHP MYSQL. Veja um exemplo

abaixo:



9



10



11



12



13

Observe que próximo ao relógio do Windows aparece o ícone do Wamp, clique

sobre ele e depois clique em phpMyAdmin.



14

Na área de novo banco de dados coloque como nome contato e clique em

criar.Será criada nosso banco de dados. Vamos agora criar a tabela cadastro. Esta

tabela terá os campos: COD, NOME, EMAIL, um cadastro simples.



15

Clique em Executar.

Agora vamos criar os campos de nossa tabela.

Se quiser testar seu banco de dados clique na guia Inserir e adicione um

registro.



16

Clique em Executar.

Ok.

Vamos agora ao Dreamweaver fazer a conexão de nosso arquivo ao Banco de

dados.

Em Create New, escolha PHP.

Salve como cadastro.php

Clique no Menu Window, Server Behaviors.

Clique na ABA DATABASES.

Clique no sinal de mais MYSQL CONECTION.

Preencha da seguinte forma.



17

Clique agora no botão select e selecione o banco de dados contato.

Clique em OK

Observe que foi criado uma pasta chamada connections.



18

Agora vamos criar um formulário de preenchimentos dos dados. Este processo

pode ser criado de forma manual, ou usando um assistente. Pelo Dreamweaver

clique na Guia Insert e escolha a opção DATA.

Dentro desta guia existe uma opção chamada Insert Record: Record

Insertion Form Wizard.

Clique sobre esta opção.

Automaticamente ele já seleciona a sua conexão e lista a tabela e os campos

da mesma. Como o campo COD é auto incremento, ou seja, ele será

automático clique no sinal de menos e retire-o da listagem.



19

Clique em OK. Seu formulário estará pronto.

Você pode alterá-lo facilmente através de HTML e CSS.

Pressione F12 para testar seu cadastro e depois verifique o banco de dados.

(clique em visualizar).



20

Crie um novo arquivo PHP e salve-o com o nome consulta.php.

Clique no painel Bindings e escolha RecordSet (Query).

Dê um nome ao seu Recordset.



21

Clique em OK.

Crie neste arquivo uma tabela com 2 linhas e 3 colunas, com largura de 700 px:



22

Preencha da seguinte forma:

É necessário agora adicionarmos os Recordsets para cada campo na tabela.

Para podermos visualizar todos os campos de nosso banco de dados,

selecione a linha inteira onde estão os recordsets, depois na ABA Data clique

em Repeat Region.



23

Defina a quantidade de dados a serem mostrados por tela.

Aqui se deve ter um cuidado, mesmo selecionando a linha, oDreamweaver pode se perder e ao testar sua repetição, ele, adicionar os dados

ao lado e não abaixo.

Para certificar-se abra seu documento em modo código e se não estiver mude

a posição do bloco PHP.



24

02 – VIDEO WMV NO DREAMWEAVERAdicionar vídeo em FLV no Dreamweaver é simples. Basta apenas clicar em

Insert, Media FLV e adicionar os parâmetros da URL, tipo de barra e

dimensões do vídeo. O próprio programa se encarrega de adicionar toda

codificação necessária para que ele funcione.



25

Podemos também adicionar videos em outrod formatos como por exemplo em

WMV. O processo funciona da seguinte forma.

O Dreamweaver controla esses parâmetros por meio de dois objetos: o Objeto

Plugin e Objeto ActiveX.

Cada objeto chama um tipo específico de Player. O Objeto Plugin padrão

chama o LiveAudio Plugin em um navegador Netscape ou o controle de

Windows Media Player no Internet Explorer. Já se você chamar o Windows

Media Player por um Objeto ActiveX, você poderá modificar vários parâmetros

do Internet Explorer.

Incorporando o Objeto Plugin

Posicione o cursor aonde deseja que o painel de controle aparece;

Insira o objeto plugin indo em: Menu Insert > Media > Plugin ou Barra

Insert > Common > Media > Plugin

Você tem duas maneiras de redimensionar o marcador de lugar de seu plugin:

clicando nas alças de redimensionamento e arrastando

inserindo os valores W (witch) e H (height) no Inspetor Properties (pelo



26

Explorer ao clique sobre o vídeo ele mostra as dimensões de seu vídeo)

Incorporando ActiveX

O Windows Media Player é o player padrão do Internet Explorer. Você pode

reproduzir por ele vários formatos de áudio, tais como MP3, AIFF, WAV , MIDI,

etc... Quando você "chama" o Media Player por um Objeto ActiveX, você pode

controlar, dentre outras coisas, sua largura, sua altura, loudness, número deloops etc...

Posicione o cursor aonde deseja que o painel de controle apareça;

Escolha Menu Insert > Media > ActiveX ou Barra Insert > Commom >

Media > ActiveX

No Inspetor Properties, insira a ClassID: CLSID:22d6f312-b0f6-11d0-

94ab-0080c74c7e95



27

04. Ainda no Painel Properties em ID > mediaPlayer;

05. Em Base >

http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#V

ersion=5,1,52,701;

06. Clique no botão "Parameters..."

07. Insira o parâmetro FileName e, pressionando tab, insira seu valor(caminho do arquivo de áudio) ;

08. Desse mesmo jeito você insere os demais parâmetros:

o AutoStart > true ou false (determina se o som começa a

reproduzir quando o download estiver completo) ;

o PlayCount > número inteiro (o número de vezes que o arquivo

deve repetir) ;

o SelectionStart > número inteiro (determina o início do áudio emrelação ao início do arquivo) ;

o SelectionEnd > número inteiro (determina o fim do áudio em

relação ao início do arquivo );

o ShowControls > true ou false (mostra ou não o painel de

controles) ;

o ShowDisplay > true ou false (mostra ou não o painel de exibição) ;

o Volume > número inteiro, sendo 0 mais alto e 10000 mais baixo



28

(configura o volume do arquivo).

o 07. Clique OK quando terminar.

Não deixe de marcar a opção Embed pois o Netscape não reconhece a tag

<object>. Ao fazer essa marcação o DW cria a tag <embed> em seu código ,

juntamente com a <object>.

Com a introdução do HTML 5 , teremos mais uma nova opção de

distribuição de vídeo pela Internet. Como ele ainda não foi totalmente

homologado, apenas alguns navegadores o suportam, pode haver uma

pequena demora em se tornar o padrão.

03 – FORMULÁRIO DE CONTATO EM PHPO script em PHP que interpretará as informações desse formulário: nós o

chamaremos de "envia_contato.php". Os dados que serão interpretados

nesse arquivo serão enviados pelo formulário pelo método POST.

Criando o Formulário

Monte o seguinte formulário.



29

Adicione nos campos de texto como nome e email.

Nos campos de botões de rádio como grupo sexo e valores masculino e

feminino.

Mude o botão para enviar.

Selecione o formulário e adicione o arquivo de destino dos dados postados.

Inicie um novo arquivo PHP e salve-o com o nome de envia_contato.php.

Chame a aba PHP. Clique no botão Code Block, ele adiciona as linhas iniciar

do PHP e deixa sua tela em Split.



30

Adicione dentro deste bloco

Explicando o que foi feito.

No código acima você está determinando que antes da variável $nome,

aparecerá "Nome", determinando o que se trata a variável a seguir.

Precisamos agora informar para quem será enviado esses dados. Vamos criar

uma variável chamada $cabecalho que indicará os valores dos campos "Para"

e "Cc" do email.



31

Depois criamos a função mail e adicionamos a resposta quando o formulário for

enviado.

Como nosso servidor local não possui a função mail, ao testar o envio ele dará

um resultado alertando sobre isso.

04 – VALIDANDO O FORMULÁRIO

Vamos aproveitar o exemplo anterior e adicionar validação aos campos de

envio de nosso formulário.

Clique no menu Window, Behaviors.

Selecione o botão Enviar. No painel Behaviors clique no sinal de mais eescolha a opção Validate Form.

Será apresentada uma tela onde aparecem os campos que podem ser

validados.

Para o nome marque a opção Required.



32

Para o campo e-mail, marque a opção Required e a opção Email address.

Clique em OK e observe que ele acrescentou a validação ao evento onclick do

botão.



33

Ao tentar enviar será mostrado a seguinte mensagem.

O formulário está validado, mas precisamos agora mudar os textos para

português. Entre no modo de código de seu documento. Localize no inicio do

documento onde aparece o bloco de script.

Onde aparece “must contai na e-mail adress”, mude para Digite um endereço

de e-mail válido.

Onde diz “is required” mude para é requerido.

Onde diz “The following error(s) occurred:” mudar para Foram encontrados os

seguintes erros:

Salve e teste seu formulário novamente.



34

05 – CRIANDO UM QUIZZVamos criar em nossa apostila agora um exemplo de perguntar um Quizz.

Inicialmente baixe a extensão que está em

http://www.4shared.com/file/JdgjgLll/simple_quizzer.html.

Agora abra o Adobe Extension Manager e adicione a extensão.

http://www.4shared.com/file/JdgjgLll/simple_quizzer.html





35

Abra o Dreamweaver e observe que a extensão aparece junto a ABA Form,

como a última opção.

Clique sobre ele e defina as perguntas e respostas.



36

Você pode adicionar até 10 questões. Defina também a resposta correta e de

um nome ao seu formulário.

Clique em OK e seu formulário será montado.

Salve-o e vamos modificar algumas coisas.



37

Abra o modo código.

Observe que ele possui duas linhas alert, são as caixas de alerta que são

mostradas quando finalizamos o questionário.

Vamos modifica-los.



38

06 – SLIDESHOW

Em nosso próximo exemplo vamos aprender a fazer um slideshow pelo

Dreamweaver. Inicialmente baixe e instale a extensão DHTML SLideshow,

você pode baixa-la em:

http://www.4shared.com/file/SHYhptBT/dHTML_Slideshow.html

Após instala a extensão abra o Dreamweaver .Salve seu arquivo e clique no menu Commands, dhtmlSlideShow.

Configure a tela de acordo com a quantidade de imagens, local das imagens,

tamanho das imagens, prefixo a ser utilizado e formato de imagem.






39

Clique em Create.



40

Antes de começar o exemplo é aconselhável criar a pasta onde ficarão

as imagens e por algum editor de imagens deixar as fotos nas dimensões e

formatos a ser utilizado.

Caso queira mudar algum parâmetro dele depois de pronto é necessário fazer

isso através do código da página.

07 – SISTEMA DE BANNERSVamos criar um sistema de banners de forma simples e bem funcional através

da instalação da extensão Advanced Random Images. Você pode baixa-la em:http://www.4shared.com/file/19-GIHbs/advRandImage3.html

Instale-a no Adobe Manager e abra o Dreamweaver. Sempre que instalar uma

extensão, é necessário reiniciar o programa.

Salve seu arquivo e clique no menu Commands, Kasweaver.com, Advanced

Random Images.

No campo action , você deve definir qual o tipo de ação vai querer usar. No

exemplo usei Random Images.Defina qual a imagem, as dimensões, o atributo Alt da imagem, se ela terá

bordas ou não e para onde será o link.

http://www.4shared.com/file/19-GIHbs/advRandImage3.html





41

Clique no sinal de mais e adicione quantas imagens farão parte de seu sistema

de banners, apenas lembre-se de que em todas se deve selecionar a imagem e

preencher os dados.



42

Caso não apareçam as suas imagens. Edite o código e retire a barra

que aparece antes da pasta onde estão armazenadas as imagens.

08 – LAYERS FLUTUANTES TRANSPARENTESCom os navegadores com bloqueadores de janelas POP-UPS as camadas

flutuantes é a alternativa mais utilizada para publicidade da Internet. Mas seuprocesso é simples, elas abrem com a página e ao clicar sobre elas ou em um

link fechar, elas saem da tela. Existe uma extensão chamada Opacity que

permite que ela tenha uma animação em FADE para essa saída. Inicialmente

baixe a extensão que está em:

http://www.4shared.com/file/uTRQY4dg/opacitySuite.html.

Instale a extensão, inicie o Dreamweaver e salve seu arquivo.

Desenhe sua layer e pinte-a ou então adicione uma imagem e mantenha-aselecionada. Clique em Behaviors e observe que terá a opção Opacity.

Escolha Fade Opacity.

Preencha os valores.

http://www.4shared.com/file/uTRQY4dg/opacitySuite.html





43

Clique em OK.

Verifique se o evento do JavaScript é onClick.

Salve novamente.

9 – WIDGETS – CS5Um Widget da Web é um componente de páginas da Web composto de HTML,

CSS e JavaScript Exemplos de widgets da Web incluem acordeons, painéis

com guias e calendários.

Para acrescentar Widgets a sua página, clique no botão Extend Dreamweaver.

Escolha a opção Widget Browser.



44

Será dado um aviso que precisa ser instalado a aplicação.

Clique em OK, você será direcionado ao Adobe Labs.

Execute-o.

Será perguntado se você quer realmente instalar o aplicativo.



45

Clique em instalar. Você poderá definir se quer deixar um ícone dele em sua

área de trabalho e se quer iniciar seu aplicativo após a instalação.

Clique em Continuar.

Clique em aceitar na primeira tela.



46

E será aberto seu aplicativo.

A opção padrão que ele traz é do Adobe Exchange, clique em Option e marque

a opção Enable Widget Projects, será mostrado uma nova opção chamada

Widget Projects.



47

Volte à opção Adobe Exchange e clique no Widget Spry Image Slideshow.

Ao clicar será necessário se logar no site da Adobe.

Ao finalizar o login, será mostrado a tela de detalhes do aplicativo.



48

Você pode dar um Preview (topo a direita) par visualizar o efeito.

Estando no modo Preview, pode clicar em CODE e analisar a codificação do

componente.



49

Para adicionar o componente para seus projetos clique no botão Add My

Widgets (rodapé à direita).

Aceite os termos, depois clique no botão Go to My Widgets.

Ao clicar em seu Widget, você terá os PRESETS do desenvolvedor e a



50

possibilidade de acrescentar seus PRESETS.

Clique em Configure.

Você poderá configurar se o efeito deve iniciar automaticamente, se deve ter



51

efeito de lide, de Pan e Zoom, o tempo de exibição da imagem, o tempo da

transição.

Podemos configurar os títulos de nossa galeria.

Os frames.



52

A última opção é sobre os thumbnails como podemos configurá-los.

Para salvar suas modificações clique no botão Save Preset, e ele agora fará

parte de seus Presets.

Retorne ao Dreamweaver, posicione o cursor onde deseja adicionar a suagaleria.

Na Painel Insert, ao deixarmos em Commom, agora estará disponível a opção

Widget.

Clique sobre ele, e será mostrada uma tela com seus Widgets.



53

Clique em OK.

Será necessário agora configurar seu Widget.Salve e clique no botão Live View, ou pelo seu navegador.

Para mudar as fotos, o processo é simples.

No Dreamweaver selecione a primeira foto, depois pelo Painel Files, abra a

pasta onde estão as fotos as serem trabalhadas.



54

Basta apenas direcionar as imagens de thumbs e a grande para as que você

possui em sua pasta.

As fotos que estão a mais, basta selecioná-las pelo modo de código e excluir

as suas linhas.

Se precisar adicionar mais fotos, basta duplicar umas linha de código e mudar

as imagens.

Você pode testar outros widgets, como por exemplo adicionar em sua página

atualizações de seu Twitter.



55

10 – LIVRO DE VISITAS PHP MYSQLLivro de visitas é um sistema de mensagens que pode ser adicionado ao site

tendo como objetivo proporcionar uma maior interatividade de seus usuários,

que se tornou muito comum em blogs. Nossa primeira ação é criar um banco

de dados e uma tabela.

Crie uma tabela chamada visitas com os seguintes campos: ID, data, nome,

email e mensagem.

Vamos agora estabelecer uma conexão entre o nosso Dreamweaver e o banco

de dados:

Através da ABA Data Bases, crie uma conexão com o banco de dados

cadastro.



56

Crie uma tabela 5 linhas e 1 coluna. Na primeira linha digite Livro de Visitas. Na

segunda linha vamos colocar o formulário para inserção de dados.Criando esse formulário:

Chame o painel DATA e clique em Record Insertion Form Wizard.

Apenas faça uma mudança em mensagem para um campo do tipo textArea.



57

Selecione o campo TextField da Data.Clique em Modify, edit TAG.

Coloque no Value o código <?php echo date("d-m-Y H:i:s"); ?> e coloque o

campo somente para leitura Read Only conforme a imagem.



58

Vamos configurar agora como serão mostradas as mensagens. Na terceira

linha de nossa tabela digite Mensagens e na quarta linha ficarão as mensagens

postadas. Vamos ao Painel Server Behaviors e criamos um recordset.



59

Na quarta linha de nossa tabela, crie outra tabela com 1 linha e 1 coluna. Digite

nessa célula: data, nome, email, mensagem

Pelo Painel Bindings insira ao lado de data seu registro correspondente.

Repita a operação para os campos restantes, exceto o id.



60

Como ainda não temos nada. Vamos adicionar uma mensagem.Na terceira linha (Mensagens) escreva: Nenhuma Mensagem Postada.

Selecione a frase e vá até o Painel Server Behaviors > Show Region >Show if

Recordset Is Empty.

Clique em OK.



61

Vamos agora usar o Repeat Region para definir quantas ocorrências aparecerã

de cada vez.

Selecione a célula onde estão os campos de retorno.

Painel Server Behaviors > Repeat Region.

Verifique seo código em PHP ficou englobando o bloco de texto.



62

Vamos agora inserir uma barra de navegação. Ela será necessária, porque

certamente haverão mais registros a serem mostrados, do que a quantidade

pré-definida (repeat region).

Na linha abaixo dos dados postados clique e na ABA DATA e clique em

Recordset Paging , Recordset Navigation Bar.

Selecione Images e clique em OK.

Para finalizar vamos adicionar um campo que contabilize a quantidade deregistros.

Insira uma nova linha digite Total de Registros: , depois clique em Painel

Server Behaviors > Display Record Count > Display Total Records.



63

Retire o campo ID de seu formulário visto que ele é autoincremento e formate

seu formulário.

Salve e teste seu aplicativo.

CONCLUSÃO

Com isto finalizamos nossa apostila de Dreamweaver TRUQUESMÁGICOS, se você quer aprender mais sobre esta fantástica ferramenta e

quer aprender a usá-la para projetos de criação de web sites conheça nosso

curso Webkit através do link: http://apostilando.com/pagina.php?cod=30.

http://apostilando.com/pagina.php?cod=30




Documents

dreamweaver_truquesmagicos