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
2
INTRODUÇÃO Atualmente é muito comum encontrar material que ensine a utilizar um software em 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. Apostilando.com, criamos uma série chamada TRUQUES Então nós do Apostilando.com, MÁGICOS. MÁGICOS. A composição da série será de apostilas para você que já baixou nossas 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.
3
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é a pasta: 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
4
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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Untitled Document
5
C:\wamp\www, depois digite em seu Salve como teste.php e salve na pasta: C:\wamp\www, navegador: http://localhost:82/teste.php http://localhost:82/teste.php..
01 – CONECTANDO O DREAMWEAVER A UM SERVIDOR WEB Cada 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.
6
Clique em Servers. Clique no sinal de mais(+). Preencha os dados
Clique em save. Será mostrado a estrutura de seu site.
7
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:
8
9
10
11
12
Observe que próximo ao relógio do Windows aparece o ícone do Wamp, clique sobre ele e depois clique em phpMyAdmin.
13
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.
14
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.
15
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. DATABASES. Clique na ABA DATABASES. Clique no sinal de mais MYSQL CONECTION. Preencha da seguinte forma.
16
Clique agora no botão select e selecione o banco de dados contato.
Clique em OK
Observe que foi criado uma pasta chamada connections.
17
Agora vamos criar um formulário de preenchimentos dos dados. Este processo pode ser criado de forma f orma 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.
18
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).
19
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.
20
Clique em OK.
Crie neste arquivo uma tabela com 2 linhas e 3 colunas, com largura de 700 px:
21
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 Region. em Repeat Region.
22
Defina a quantidade de dados a serem mostrados m ostrados por tela.
Aqui se deve ter um cuidado, mesmo selecionando a linha, o Dreamweaver 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.
23
02 – VIDEO WMV NO DREAMWEA D REAMWEAVER VER Adicionar 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.
24
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
25
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 de loops 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-11d094ab-0080c74c7e95
26
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: AutoStart > true ou false (determina se o som começa a reproduzir quando o download estiver completo) ; PlayCount > número inteiro (o número de vezes que o arquivo deve repetir) ; SelectionStart > número inteiro (determina o início do áudio em relação ao início do arquivo) ; SelectionEnd > número inteiro (determina o fim do áudio em relação ao início do arquivo ); ShowControls > true ou false (mostra ou não o painel de controles) ; ShowDisplay > true ou false (mostra ou não o painel de exibição) ; Volume > número inteiro, sendo 0 mais alto e 10000 mais baixo o
o
o
o
o
o
o
27
(configura o volume do arquivo). 07. Clique OK quando terminar. Não deixe de marcar a opção Embed pois o Netscape não reconhece a tag
